El CSS ya no se limita a hacer que los sitios parezcan bonitos. Ha evolucionado hasta convertirse en una herramienta que da vida a los sitios web con movimientos e interacciones que antes se creían imposibles.
Así que con esta guía pretendemos que te pongas al día con tres potentes funciones en particular: transiciones, animaciones y transformaciones. Comprender y utilizar estas técnicas avanzadas es esencial para los diseñadores y desarrolladores web que han ido más allá de los conceptos básicos de CSS y pretenden crear sitios web que destaquen — y resistan el paso del tiempo.
Al avanzar por esta guía, adquirirás valiosas habilidades para llevar tus proyectos web más allá de lo ordinario. Y, con suerte, también te llevarás algo de inspiración.
Transiciones CSS avanzadas
Las transiciones CSS avanzadas hacen que los elementos de la interfaz de usuario sean interactivos, atractivos y agradables a la vista. Imagina que tienes un botón en tu web. Normalmente, se queda ahí, pero con las transiciones CSS, cuando alguien pasa el ratón por encima, cambia suavemente de color o quizá aumenta un poco de tamaño.
El concepto gira en torno a la idea de interpolación — una transición suave entre diferentes estados de una propiedad CSS.
Para crear estos efectos, hay varias propiedades CSS con las que debes familiarizarte:
- Propiedades de transición: Esto incluye especificar la propiedad que quieres animar (como
background-coloroopacity), establecer la duración de la transición y decidir eltransition-timing-function(comoease-inolinear), que dicta cómo progresa la transición a lo largo de su duración. - Funciones de temporización: Son imprescindibles, ya que controlan la aceleración y desaceleración de la transición. Una de las opciones más versátiles es la función
cubic-bezier. Esta función permite crear curvas de velocidad personalizadas, dándote un control total sobre el ritmo de tu transición. Al principio puede resultar un poco complicado, pero herramientas como cubic-bezier facilitan la visualización y creación de estas curvas.
Aquí tienes un ejemplo sencillo para ilustrar cómo podrías utilizar esto en tu CSS:
.my-element {
transition-property: opacity;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67);
}
En este fragmento, .my-element cambiará su opacidad con una curva de velocidad única definida por la función cubic-bezier. Esta curva dicta un tipo específico de movimiento, como empezar despacio, acelerar y luego ralentizarse hacia el final.
Utilizando transition-timing-function con valores personalizados, puedes hacer que tus elementos web se muevan de una forma que parezca más natural, más dinámica o simplemente diferente de la estándar. Es una gran herramienta para añadir personalidad y delicadeza a tus animaciones web.
En cuanto a técnicas avanzadas, aquí tienes algunas a tener en cuenta:
- Manejando múltiples propiedades: ¿Por qué conformarse con animar una sola cosa? CSS te permite alinear varias propiedades y animarlas todas a la vez. Esto es perfecto para añadir capas a tu animación.
- Animaciones sincronizadas: También puedes alinear distintas propiedades para que se muevan al mismo ritmo, creando un efecto más coordinado.
- Transiciones anidadas: Aplica transiciones a elementos dentro de un contenedor. De esta forma, cuando interactúes con el contenedor, los elementos hijos se comportarán como prefieras.
Asegúrate de que estas animaciones no sólo se vean bien, sino que también se ejecuten con fluidez, especialmente en dispositivos menos potentes. Utilizar propiedades como transform y opacity es una decisión inteligente porque son más sencillas para los navegadores y no deberían afectar demasiado al rendimiento.
Además, un aviso a tu navegador con la propiedad will-change le ayuda a prepararse para la acción, garantizando que todo se ejecute sin problemas.
Esto es sólo una observación final para garantizar que todo funcione en todas partes: los navegadores pueden ser quisquillosos. Utilizar prefijos de proveedor ayuda a garantizar que tus fantásticas transiciones funcionen en los distintos navegadores. Es un poco de trabajo extra, pero herramientas como autoprefixers pueden hacerlo por ti, evitando problemas.
Transformaciones en CSS
Las transformaciones CSS ofrecen una forma estupenda de añadir más interés a tus diseños web. Se pueden utilizar para mover cosas, por supuesto, pero también pueden cambiar por completo el aspecto de una página. La propiedad transform es tu principal protagonista aquí.
Es versátil y puede desplazar elementos de un lugar a otro, como deslizar una imagen por la pantalla o cambiar su tamaño — piensa en hacer que algo parezca más cerca o más lejos, como acercar o alejar una foto. Y si quieres ponerte un poco extravagante, incluso puedes hacer que los elementos giren.
Lo realmente impresionante aquí es cuando añades transformaciones 3D a la mezcla. Con funciones como translate3d, scale3d, y rotate3d, los elementos pueden saltar fuera de la pantalla, creando una experiencia más envolvente dentro del navegador.
Tomemos, por ejemplo, el efecto de tarjeta volteada. Se trata de una atractiva función en la que una cara de una tarjeta muestra cierta información, y cuando se voltea, se revela nuevo contenido en la otra cara. Este elemento interactivo puede captar realmente la atención de tus visitantes.
La clave para conseguir este efecto es utilizar eficazmente la propiedad backface-visibility. Esto garantiza que el reverso de la tarjeta permanezca oculto hasta que deba verse.
Pero, ¿por qué detenerse ahí? Cuando combinas estas transformaciones con transiciones y animaciones, puedes obtener mucho más de tu CSS. Puedes tener un botón que aumente elegantemente de tamaño al pasar el ratón por encima o un icono que se mueva juguetonamente por la pantalla. Estos cambios dinámicos añaden una cualidad fluida a los elementos de tu página web, haciendo que la experiencia del usuario sea aún más atractiva.
Designmodo ofrece varios ejemplos atractivos de esta técnica en acción. En primer lugar, puedes ver el CSS para transformaciones 3D desglosado. Después, puedes ver el código en acción:
Consultas de contenedor
Las consultas de contenedor son otro aspecto de CSS que merece la pena explorar. Te permiten aplicar estilo a los elementos en función del tamaño de su contenedor, en lugar de en función del tamaño de toda la pantalla. Piénsalo así: tienes una caja, y quieres que lo que hay dentro se vea bien independientemente de lo grande o pequeña que sea la caja. Las consultas de contenedor son perfectas para eso.
Son muy útiles cuando quieres que diferentes partes de tu página web, como las barras laterales o las tarjetas, cambien su aspecto dependiendo del espacio que tengan. Cada componente puede decidir su propio estilo, independientemente del resto de la página.
Aquí tienes un breve resumen sobre cómo utilizarlos:
- Configura el contenedor: En primer lugar, indica al CSS qué parte de tu página es un contenedor. Esto se hace con propiedades como
container-typeycontainer-name. - Escribe tus consultas: Igual que las consultas de medios, pero para contenedores. Escribes una regla que diga: «Oye, si mi contenedor tiene al menos este ancho, entonces haz estos cambios de estilo»
Este es el aspecto que tendría el código básico:
@container (min-width: 300px) {
.component {
/* styles */
}
}En este ejemplo, los estilos de la clase .component se aplicarán cuando su contenedor alcance una anchura mínima de 300px.
Ahora bien, las consultas de contenedor pueden utilizarse en varios escenarios, como por ejemplo:
- Sidebars y pies de página responsivos: Ajustar la anchura y el diseño de los sidebars o los pies de página en función del tamaño del contenedor.
- Tarjetas adaptables: Cambiar el diseño o estilo de las tarjetas en un diseño de cuadrícula o flexbox en función de la anchura del contenedor.
Aunque las consultas de contenedor son compatibles con los principales navegadores, como Chrome, Firefox, Safari y Edge, sigue siendo una buena práctica utilizarlas como mejora progresiva. Empieza con estilos básicos para los navegadores que no los admitan y mejóralos para los que admitan consultas de contenedor.
Utilizar Flexbox para la alineación vertical
Flexbox es una herramienta increíblemente útil en CSS, especialmente cuando se trata de alineación vertical. Aunque existe desde hace tiempo, sigue siendo muy relevante, especialmente para alinear elementos a lo largo del eje transversal (que, dependiendo de tu diseño, puede ser vertical).
Utilizar alinear-elementos para la alineación vertical
La propiedad align-items de Flexbox es tu recurso para alinear elementos verticalmente dentro de un contenedor. Funciona cuando tu contenedor flex tiene un flex-direction de filas. Esta propiedad te permite controlar cómo se alinean todos los hijos de un contenedor flex a lo largo del eje transversal.
Por ejemplo, si tienes un montón de elementos en un contenedor flexible y quieres que todos estén centrados verticalmente, utilizarías align-items: center;. Estas son las principales opciones que tienes con align-items:
flex-start: Alinea los elementos al inicio del contenedor.flex-end: Alinea los elementos al final del contenedor.center: Centra los elementos en el contenedor.baseline: Alinea los elementos en función de su línea base.stretch: Estira los elementos para llenar el contenedor (comportamiento por defecto).
Utilizar el autoalineamiento para el control individual
Aunque align-items es genial para alinear todos los elementos de un contenedor, a veces quieres alinear sólo un elemento de forma diferente. Por eso es tan útil align-self. Esta propiedad te permite anular el valor de align-items para elementos flexibles individuales. Acepta los mismos valores que align-items.
Por ejemplo, supongamos que tienes un contenedor flexible con align-items: center; pero hay un elemento que quieres alinear al principio. Puedes aplicar align-self: flex-start; a ese elemento específico. Es una forma estupenda de tener un control preciso sobre la alineación de elementos individuales.
Sin embargo, puede ser muy útil verlo en acción.
Supongamos que estás diseñando una barra de navegación con un logotipo, algunos enlaces y una barra de búsqueda. Quieres que los enlaces estén centrados, el logotipo alineado en la parte superior y la barra de búsqueda alineada en la parte inferior.
Así es como podrías hacerlo:
.nav-container {
display: flex;
flex-direction: row;
align-items: center;
}
.logo {
align-self: flex-start;
}
.search-bar {
align-self: flex-end;
}En este ejemplo, el .nav-container es un contenedor flexible con sus elementos generalmente centrados. El logotipo y la barra de búsqueda, sin embargo, se salen de esta regla general, alineándose al principio y al final del contenedor, respectivamente.
Funciones de color modernas en CSS
Las funciones de color modernas en CSS han evolucionado significativamente, ofreciendo formas más sofisticadas de definir y manipular los colores en el diseño web. Profundicemos en algunas de estas funciones:
1. rgb() y rgba()
La función rgb() es una forma tradicional de definir colores utilizando los canales Rojo, Verde y Azul. Cada canal puede tener un valor entre 0 y 255. La variante rgba() añade un canal alfa para la opacidad, siendo 1 totalmente opaco y 0 totalmente transparente.
Debería tener este aspecto
.example {
color: rgb(255, 0, 0); /* Red */
background-color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */
}2. hsl() y hsla()
hsl() representan los colores en términos de Tono, Saturación y Luminosidad, lo que hace más intuitiva la selección de variaciones de color. Al igual que rgba(), hsla() incluye un canal alfa para la opacidad. Así
.example {
color: hsl(120, 100%, 50%); /* Green */
background-color: hsla(120, 100%, 50%, 0.3); /* Semi-transparent green */
}3. oklch() y oklab()
oklch() y oklab() son adiciones más recientes a las funciones de color CSS. Se basan en el espacio de color CIELAB, que está diseñado para ser perceptualmente uniforme. Esto significa que los cambios en los valores de color se corresponden más estrechamente con los cambios percibidos por el ojo humano.
En concreto
oklab()se utiliza para definir los colores en un espacio perceptualmente uniforme.oklch()es similar, pero utiliza coordenadas cilíndricas (luminosidad, croma y tono).
Estas funciones permiten una manipulación del color más precisa e intuitiva, especialmente para tareas como la creación de gradientes de color suaves. Esto es lo que podría parecer en forma de código:
.example {
color: oklch(75%, 0.25, 250); /* A color in oklch */
background-color: oklab(0.623, 0.172, -0.079); /* A color in oklab */
}Implementación de esquemas de color avanzados
Con estas funciones, especialmente las más avanzadas oklch() y oklab(), puedes implementar intrincados esquemas de color que sean visualmente coherentes y atractivos. Ofrecen más control sobre cómo se representan y perciben los colores, garantizando que tus diseños sean estéticamente agradables y accesibles.
Cuando combinas estas funciones de color con características CSS como propiedades personalizadas (variables CSS) y cálculos, puedes desarrollar sistemas de color dinámicos y flexibles que se adapten a diferentes temas, estados y entornos.
Como los estándares web y la compatibilidad de los navegadores con estas funciones siguen cambiando, adoptar estas modernas funciones de color puede mejorar significativamente el diseño visual y la experiencia de usuario de tus proyectos web.
Curvar el texto alrededor de las imágenes
La propiedad CSS shape-outside ofrece una forma creativa de envolver texto alrededor de las imágenes, contribuyendo a diseños más dinámicos y visualmente interesantes y a un estilo de imagen más avanzado.
Te permite definir una forma alrededor de la cual debe envolverse el contenido en línea. Esto es útil para envolver texto alrededor de imágenes de forma no rectangular, creando composiciones más orgánicas y visualmente más atractivas que la envoltura de texto rectangular estándar.
¿Cómo funciona?
Puedes definir varias formas como círculos, elipses y polígonos, o incluso utilizar el canal alfa de una imagen para dictar la forma.
La propiedad shape-outside se aplica normalmente a elementos flotados. Y cuando haces flotar una imagen y aplicas un shape-outside, el texto se envuelve alrededor de ella según la forma definida.
Aquí tienes un ejemplo básico de uso de forma-exterior con un círculo:
.image {
float: left;
shape-outside: circle(50%);
width: 200px;
height: 200px;
margin-right: 15px;
}En este ejemplo, la clase .image se aplica a un elemento imagen. Está flotando a la izquierda, y el shape-outside: circle(50%); crea una forma circular alrededor de la cual se envolverá el texto. Utilizar shape-outside de forma eficaz puede abrir nuevas posibilidades en tus diseños, ya que permite que el texto fluya alrededor de formas complejas, haciendo posible crear diseños tipo revista y páginas web visualmente ricas.
Modos de fusión CSS
Los modos de fusión CSS ofrecen una potente forma de mezclar colores e imágenes, creando efectos visuales únicos que también pueden mejorar tus diseños. Estos modos de mezcla te permiten crear atractivos efectos de texto, superposiciones de imágenes e intrincados patrones de fondo. Para utilizar background-blend-mode, hablemos primero de lo que hace. Esta propiedad se utiliza para definir cómo deben mezclarse las imágenes y el color de fondo de un elemento. Por ejemplo, si tienes una imagen de fondo y un color de fondo, puedes mezclarlos utilizando diferentes modos de mezcla como multiplicar, pantalla, superponer, etc. Este es el aspecto que podría tener el código
.element {
background-image: url('image.jpg');
background-color: blue;
background-blend-mode: multiply;
}Ahora mix-blend-mode funciona mezclando el contenido de un elemento (incluyendo imágenes y texto) con su fondo. Esto es especialmente útil para efectos de texto o para superponer una imagen sobre otra. Así
<
.element {
mix-blend-mode: screen;
}Modos de fusión populares
Como referencia, aquí tienes algunos de los modos de fusión más populares que necesitarás conocer para utilizar este efecto correctamente:
- Multiplicar: Multiplica los colores de la capa de mezcla y de la capa base, dando como resultado un color más oscuro.
- Malla: Aclara los colores, al contrario que multiplicar. Es útil para crear efectos de luz.
- Superponer: Combina los modos de fusión multiplicar y pantalla. Las partes claras de la imagen se aclaran y las oscuras se oscurecen.
- Oscurecer y aclarar: Selecciona el color más oscuro o más claro, respectivamente.
- Esquivar color y quemar color: Aclara u oscurece el color base para reflejar el color de fusión.
- Diferencia y exclusión: Se utilizan para crear efectos de color más artísticos e invertidos.
Adaptarse a las preferencias del usuario
Adaptarse a las preferencias del usuario en el diseño web es un aspecto crítico para crear sitios web accesibles y fáciles de usar. Las consultas de medios CSS para preferencias como prefers-color-scheme y prefers-reduced-motion desempeñan un papel importante en este proceso.
Exploremos estos conceptos.
prefiere-color-esquema
Esta consulta de medios se utiliza para detectar si el usuario ha solicitado al sistema que utilice un tema de color claro u oscuro. Es una forma cómoda de implementar un modo oscuro en el diseño de un sitio web.
Puedes utilizar prefers-color-scheme para especificar estilos diferentes para los modos claro y oscuro.
Por ejemplo:
/* Default light mode styles */
body {
background-color: white;
color: black;
}
/* Dark mode styles */
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}En este fragmento, los estilos por defecto se aplican al modo claro, mientras que los estilos dentro de la consulta @media se aplican cuando el usuario prefiere un esquema de color oscuro.
prefiere-movimiento-reducido
Esta consulta de medios está diseñada para detectar si el usuario ha solicitado al sistema que minimice la cantidad de animación o movimiento que utiliza. Es esencial para los usuarios que experimentan mareos por movimiento o tienen trastornos vestibulares.
Puedes utilizar prefers-reduced-motion para reducir o eliminar animaciones y transiciones:
/* Standard animations */
.animate {
transition: transform 0.3s ease;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.animate {
transition: none;
}
}Aquí verás que las animaciones se desactivan cuando el usuario ha indicado su preferencia por el movimiento reducido.
Incorporar prefers-color-scheme y prefers-reduced-motion a tu CSS es un paso hacia una web más inclusiva y fácil de usar, que garantiza que tu sitio sea accesible y cómodo para una amplia gama de usuarios con diferentes necesidades y preferencias.
Utiliza los pseudoselectores :is() y :where()
Los pseudoselectores :is() y :where() de CSS son herramientas avanzadas para gestionar la especificidad y simplificar las complejas cadenas de selectores. Exploremos cómo funcionan y veamos algunos ejemplos reales.
pseudoselector :is()
Este selector te permite apuntar a varios elementos con una sola regla y reduce la repetición de selectores similares. La especificidad de la pseudoclase :is() es la especificidad del selector más específico de sus argumentos.
/* Selects any paragraph or heading inside an article */
article :is(h1, h2, h3, p) {
color: blue;
}pseudoselector :where()
Éste es similar a :is(), pero tiene una diferencia clave. :where() siempre tiene una especificidad de cero. Esto lo hace útil para anular estilos sin aumentar la especificidad. En uso, podría ser algo parecido a esto:
/* Selects any paragraph or heading, but with no added specificity */
:where(article, section) p {
margin-bottom: 1em;
}Utilizando :is() y :where(), puedes elaborar hojas de estilo más flexibles y fáciles de mantener, especialmente cuando se trata de diseños complejos. Por ejemplo, estos pseudoselectores pueden ser útiles si necesitas:
- Simplificar los selectores anidados: Pueden simplificar selectores anidados profundamente o selectores agrupados, haciendo tu CSS más legible y fácil de mantener.
- Anular estilos:
:where()es genial para crear estilos base que pueden anularse fácilmente sin preocuparse por la especificidad. - Reutilizar estilos: Ambos pseudoselectores permiten crear estilos más modulares y reutilizables, ya que puedes agrupar varios elementos bajo una misma regla.
Para una aplicación práctica de esto en acción, imagina un menú de navegación con diferentes secciones. Puedes utilizar :is() para aplicar un estilo uniforme a todos los enlaces del menú, independientemente de su nivel de anidamiento, como se indica a continuación:
nav :is(ul, ol, div) > li > a {
padding: 10px;
color: white;
}Resumen
Desde la elegancia de las transiciones CSS que dan vida a las interfaces de usuario hasta el poder de las transformaciones 3D, esperamos que ahora comprendas mejor algunas de las técnicas CSS más avanzadas de las que dispones en 2024 y más allá.
Esta guía ilumina estas técnicas avanzadas y subraya su importancia en la elaboración de diseños web con capacidad de respuesta, fáciles de usar y visualmente atractivos. Y no importa cuál decidas utilizar, recuerda dar prioridad a la accesibilidad y al rendimiento de CSS en todo lo que hagas.
¿Utilizas actualmente alguna de estas técnicas CSS avanzadas? ¿Tienes recomendaciones para probar otras? No dudes en hacérnoslo saber.
Deja una respuesta