Colección rápida de trucos poco conocidos de #CSS.
🧵Abro hilo.
Si tenemos colores donde los pares son repetidos (ej: #334455) se puede simplificar omitiendo el segundo dígito de cada par (#345).
Además, si hay un par más, es el canal alfa (transparencia, también abreviable).
Más sobre colores CSS:
Desde selectores #CSS, se pueden seleccionar etiquetas dependiendo de sus atributos HTML.
Por ejemplo, `a[href$=".pdf"]` selecciona todos los enlaces a archivos con extensión `.pdf`, pero `a[href$=".pdf" i]` hace lo mismo sin tener en cuenta mayúsculas/minúsculas.
Las "variables CSS" no son animables por defecto. Sin embargo, mediante `@property` (Houdini CSS) podemos asignarles un tipo de dato (syntax), herencia y un valor inicial por defecto, de modo que pasan a serlo.
Más sobre variables CSS:
Si una unidad mide `0%`, `0px`, `0em`, `0rem`, etc... puedes omitir la unidad de forma segura, ya que independientemente de la unidad, va a ser '0', y funcionará igual.
Si queremos posicionar un elemento con la propiedad `position`, haciendo uso de las `top`, `bottom`, `left` y `right`, hoy en día podemos usar la propiedad de atajo `inset` la cuál resulta mucho más cómoda.
Ojo, Edge aún no lo soporta: caniuse.com/mdn-css_proper…
Usando el pseudoelemento `::first-letter` podemos dar estilo a la primera letra de un elemento, estableciendo (por ejemplo) una tipografía decorativa al estilo de cuentos, como Cinzel Decorative: fonts.google.com/specimen/Cinze…
Más consejitos sobre tipografías:
Las sombras `box-shadow` permiten crear sombras en la caja (rectángulo) que aplicamos. Sin embargo, el filtro `drop-shadow()` permite crear una sombra IDÉNTICA (como una gota de agua), que respeta incluso las transparencias de una imagen.
Con la media query especial `@Media print { ... }` se pueden indicar estilos que se aplican sólo cuando el usuario imprime una página.
Puede ser útil para ocultar elementos que no tienen sentido en un formato físico, reducir la cantidad de color negro (ahorrar tinta), etc...
Utilizando la propiedad `image-rendering` al valor `pixelated` podemos cambiar el renderizado del navegador de ciertas imágenes, cambiando el algoritmo de interpolación, lo que puede ser útil por ejemplo para imágenes pixel art.
Los gradientes `linear-gradient` y `radial-gradient` son bien conocidos (incluso variantes con prefijo `repeating-*`). Pero `conic-gradient` no lo suele ser tanto. Con él podemos representar gradientes cónicos vistos desde arriba.
Más sobre gradientes:
lenguajecss.com/css/colores-y-…
¡Listo! Hemos terminado...
¿o no?
¿Más? Eres insaciable...
Que no, que no... que ya hemos terminado...
Por aquí tienes otro hilo de HTML:
Venga, ya está... circule... 🚧👮♀️👷♂️
Bueeeeeeeeeeno... Aquí me puedes ver haciendo el pato construyendo una torreta de Portal con CSS en Twitch clips.twitch.tv/DignifiedSmoot…
¡Has llegado hasta aquí! Si te ha gustado este contenido, sígueme en Twitch ( twitch.tv/ManzDev ) donde hacemos cosas chulas con HTML+CSS+Javascript y mira mis otras redes (Youtube, Discord, etc...) para descubrir todo lo que hemos hecho...
👇manz.dev
Share this Scrolly Tale with your friends.
A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.