trucos de css que deberías conocer - spain.wordcamp.org
TRANSCRIPT
![Page 1: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/1.jpg)
Trucos de CSS que deberías conocerAleix Martí Carmona
![Page 2: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/2.jpg)
var amarti = {nombre: Aleix Martí Carmonaempresa: Human CTAroles: front-end, docentetecnologías: [
HTML,CSS,JS,WordPress
]twitter: @Nemesis_XIIIcodepen: codepen.io/Aleix
}
![Page 3: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/3.jpg)
https://codepen.io/collection/PYPxkP
![Page 4: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/4.jpg)
Lo de CSS
● Accesibilidad
● Flexbox & Grid
● De todo un poco
● Casos reales
● El futuro
![Page 5: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/5.jpg)
Lo de CSS
● Accesibilidad
● Flexbox & Grid
● De todo un poco
● Casos reales
● El futuro
![Page 6: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/6.jpg)
:not() , [attr]
img[alt=""],
img:not([alt]) {
outline: 3px solid #f00;
}
https://codepen.io/collection/PYPxkP
![Page 7: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/7.jpg)
.container { background-image: linear-gradient(...), url('...'); }
background múltiples capas
https://codepen.io/collection/PYPxkP
![Page 8: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/8.jpg)
@media (prefers-reduced-motion) { h1 { animation: none; }
@media prefers-reduced-motion
https://codepen.io/collection/PYPxkP
![Page 9: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/9.jpg)
@media (prefers-color-scheme: dark) { :root { --bg-color: #000331; --color: #47f682; } }
@media prefers-color-scheme
https://codepen.io/collection/PYPxkP
![Page 10: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/10.jpg)
visually hidden
input[type="checkbox"]{ display: none; position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }
https://codepen.io/collection/PYPxkP
![Page 11: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/11.jpg)
Lo de CSS
● Accesibilidad
● Flexbox & Grid
● De todo un poco
● Casos reales
● El futuro
![Page 12: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/12.jpg)
nav { display: flex; }
a:first-child { margin-right: auto; }
first-child, margin-right auto
https://codepen.io/collection/PYPxkP
![Page 13: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/13.jpg)
grid auto-fit vs auto-fill
ul.fit{ grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
https://codepen.io/collection/PYPxkP
![Page 14: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/14.jpg)
grid auto-fit vs auto-fill
https://codepen.io/collection/PYPxkP
![Page 15: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/15.jpg)
.container { display: grid; place-items: center; }
grid place-items: center
https://codepen.io/collection/PYPxkP
![Page 16: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/16.jpg)
Lo de CSS
● Accesibilidad
● Flexbox & Grid
● De todo un poco
● Casos reales
● El futuro
![Page 17: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/17.jpg)
aspect-ratio
.ar169 { width: 160px; aspect-ratio: 16 / 9; }
.ar43 { height: 100px; aspect-ratio: 4 / 3; }
https://codepen.io/collection/PYPxkP
![Page 18: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/18.jpg)
box-shadow inset
.out { box-shadow: 0 0 10px 5px green }
.in { box-shadow: inset 0 0 10px 5px green }
https://codepen.io/collection/PYPxkP
![Page 19: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/19.jpg)
filter drop-shadow
.shadow { filter: drop-shadow (0 0 10px #000331) }
https://codepen.io/collection/PYPxkP
![Page 20: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/20.jpg)
filter
https://codepen.io/collection/PYPxkP
![Page 21: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/21.jpg)
p:first-letter { font-size: 2rem; color: gray; }
p { column-count: 2; }
:first-letter, column-count
https://codepen.io/collection/PYPxkP
![Page 22: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/22.jpg)
h2 { writing-mode: vertical-lr; }
img { border-bottom-right-radius:30% 10%; }
writing-mode, border-radius
https://codepen.io/collection/PYPxkP
![Page 23: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/23.jpg)
img { border-bottom-right-radius:30% 10%; }
h2 { writing-mode: vertical-lr; }
border-radius, writing-mode
10%30%
https://codepen.io/collection/PYPxkP
![Page 24: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/24.jpg)
border-radius
https://codepen.io/collection/PYPxkP
![Page 25: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/25.jpg)
background-image: conic-gradient(
var(--color1) 0%, var(--color2) 100% );
conic-gradient
https://codepen.io/collection/PYPxkP
![Page 26: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/26.jpg)
.slider { overflow-x: scroll; scroll-snap-type: x mandatory; }
.slider .slide { scroll-snap-align: center; }
scroll-snap
https://codepen.io/collection/PYPxkP
![Page 27: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/27.jpg)
.item { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.item { position: absolute; inset: 0; }
inset
https://codepen.io/collection/PYPxkP
![Page 28: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/28.jpg)
box-sizing: border-box
140px
100px
.div { width: 100px; padding: 10px; border: 10px solid;
box-sizing: border-box; }
SIN border-box
CON border-box
https://codepen.io/collection/PYPxkP
![Page 29: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/29.jpg)
reset
*, *::before, *::after { box-sizing: border-box; }
https://codepen.io/collection/PYPxkP
![Page 30: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/30.jpg)
Lo de CSS
● Accesibilidad
● Flexbox & Grid
● De todo un poco
● Casos reales
● El futuro
![Page 31: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/31.jpg)
li:nth-child(odd) { flex-direction: row-reverse; color: var(--dark); } li:nth-child(even) { flex-direction: row; color: var(--light); }
:nth-child (odd / even)
https://codepen.io/collection/PYPxkP
![Page 32: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/32.jpg)
a:hover {
text-stroke: 2px #47f682;
}
text-stroke
https://codepen.io/collection/PYPxkP
![Page 33: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/33.jpg)
filter drop-shadow
.item { background-image: url("data:image/svg+xml..."); }
.item:hover { filter: invert(1)
sepia(1) brightness(0.4) saturate(80) hue-rotate(240deg);
}
por defecto
:hover
https://codepen.io/collection/PYPxkP
![Page 34: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/34.jpg)
border: 1px solid
https://codepen.io/collection/PYPxkP
![Page 35: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/35.jpg)
Harry Potter y el layout misterioso
https://codepen.io/collection/PYPxkP
![Page 36: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/36.jpg)
.item { box-sizing: border-box; border: 1px solid; }
.item { outline: 1px solid; }
outline, box-sizing
https://codepen.io/collection/PYPxkP
![Page 37: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/37.jpg)
.card { position: relative; }
.link { position: relative; position: initial; }
.link:before { position: absolute; inset: 0; }
full card link
https://codepen.io/collection/PYPxkP
![Page 38: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/38.jpg)
.container { overflow: auto; scroll-snap-type: y mandatory; }
.container > * { scroll-snap-align: start; }
scroll-snap
https://codepen.io/collection/PYPxkP
![Page 39: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/39.jpg)
Lo de CSS
● Accesibilidad
● Flexbox & Grid
● De todo un poco
● Casos reales
● El futuro
![Page 40: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/40.jpg)
Container Queries
Según el tamaño de un elemento, no de la pantalla
![Page 41: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/41.jpg)
:has()
Se podrá “atacar” al elemento padre
![Page 42: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/42.jpg)
Nesting
Elementos anidados. Como SASS, pero sin SASS
![Page 43: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/43.jpg)
CSS se debuga con outline
![Page 44: Trucos de CSS que deberías conocer - spain.wordcamp.org](https://reader036.vdocuments.site/reader036/viewer/2022071012/62c93e7dcf51c6423d155f06/html5/thumbnails/44.jpg)
¡Muchas gracias!
● https://codepen.io/collection/PYPxkP
● Todas las imágenes son de imgflip.com
● Ningún maquetador ha sido maltratado en la
producción del documento