Al avanzar por esta gu\u00eda, adquirir\u00e1s valiosas habilidades para llevar tus proyectos web m\u00e1s all\u00e1 de lo ordinario. Y, con suerte, tambi\u00e9n te llevar\u00e1s algo de inspiraci\u00f3n.
\n
Transiciones CSS avanzadas<\/h2>\n
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\u00f3n en tu web. Normalmente, se queda ah\u00ed, pero con las transiciones CSS, cuando alguien pasa el rat\u00f3n por encima, cambia suavemente de color o quiz\u00e1 aumenta un poco de tama\u00f1o.<\/p>\n
El concepto gira en torno a la idea de interpolaci\u00f3n \u2014 una transici\u00f3n suave entre diferentes estados de una propiedad CSS.<\/p>\n
Para crear estos efectos, hay varias propiedades CSS con las que debes familiarizarte:<\/p>\n
- \n
- Propiedades de transici\u00f3n<\/strong>: Esto incluye especificar la propiedad que quieres animar (como
background-color<\/code> oopacity<\/code>), establecer la duraci\u00f3n de la transici\u00f3n y decidir eltransition-timing-function<\/code> (comoease-in<\/code> olinear<\/code>), que dicta c\u00f3mo progresa la transici\u00f3n a lo largo de su duraci\u00f3n.<\/li>\n- Funciones de temporizaci\u00f3n<\/strong>: Son imprescindibles, ya que controlan la aceleraci\u00f3n y desaceleraci\u00f3n de la transici\u00f3n. Una de las opciones m\u00e1s vers\u00e1tiles es la funci\u00f3n
cubic-bezier<\/code>. Esta funci\u00f3n permite crear curvas de velocidad personalizadas, d\u00e1ndote un control total sobre el ritmo de tu transici\u00f3n. Al principio puede resultar un poco complicado, pero herramientas como cubic-bezier<\/a> facilitan la visualizaci\u00f3n y creaci\u00f3n de estas curvas.<\/li>\n<\/ul>\n![\"cubic-bezier\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/cubic-bezier.png\")
Un ejemplo de cubic-bezier en acci\u00f3n.<\/figcaption><\/figure>\n Aqu\u00ed tienes un ejemplo sencillo para ilustrar c\u00f3mo podr\u00edas utilizar esto en tu CSS:<\/p>\n
.my-element {\n\ntransition-property: opacity;\n\ntransition-duration: 0.5s;\n\ntransition-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67);\n\n}\n<\/code><\/pre>\nEn este fragmento,
.my-element <\/code>cambiar\u00e1 su opacidad con una curva de velocidad \u00fanica definida por la funci\u00f3ncubic-bezier<\/code>. Esta curva dicta un tipo espec\u00edfico de movimiento, como empezar despacio, acelerar y luego ralentizarse hacia el final.<\/p>\nUtilizando
transition-timing-function<\/code> con valores personalizados, puedes hacer que tus elementos web se muevan de una forma que parezca m\u00e1s natural, m\u00e1s din\u00e1mica o simplemente diferente de la est\u00e1ndar. Es una gran herramienta para a\u00f1adir personalidad y delicadeza a tus animaciones web.<\/p>\nEn cuanto a t\u00e9cnicas avanzadas, aqu\u00ed tienes algunas a tener en cuenta:<\/p>\n
- \n
- Manejando m\u00faltiples propiedades:<\/strong> \u00bfPor qu\u00e9 conformarse con animar una sola cosa? CSS te permite alinear varias propiedades y animarlas todas a la vez. Esto es perfecto para a\u00f1adir capas a tu animaci\u00f3n.<\/li>\n
- Animaciones sincronizadas<\/strong>: Tambi\u00e9n puedes alinear distintas propiedades para que se muevan al mismo ritmo, creando un efecto m\u00e1s coordinado.<\/li>\n
- Transiciones anidadas<\/strong>: Aplica transiciones a elementos dentro de un contenedor. De esta forma, cuando interact\u00faes con el contenedor, los elementos hijos se comportar\u00e1n como prefieras.<\/li>\n<\/ol>\n
Aseg\u00farate de que estas animaciones no s\u00f3lo se vean bien, sino que tambi\u00e9n se ejecuten con fluidez, especialmente en dispositivos menos potentes. Utilizar propiedades como
transform<\/code> yopacity<\/code> es una decisi\u00f3n inteligente porque son m\u00e1s sencillas para los navegadores y no deber\u00edan afectar demasiado al rendimiento.<\/p>\nAdem\u00e1s, un aviso a tu navegador con la propiedad
will-change<\/code> le ayuda a prepararse para la acci\u00f3n, garantizando que todo se ejecute sin problemas.<\/p>\nEsto es s\u00f3lo una observaci\u00f3n final para garantizar que todo funcione en todas partes: los navegadores pueden ser quisquillosos. Utilizar prefijos de proveedor ayuda a garantizar que tus fant\u00e1sticas transiciones funcionen en los distintos navegadores. Es un poco de trabajo extra, pero herramientas como autoprefixers<\/a> pueden hacerlo por ti, evitando problemas.<\/p>\n
Transformaciones en CSS<\/h2>\n
Las transformaciones CSS ofrecen una forma estupenda de a\u00f1adir m\u00e1s inter\u00e9s a tus dise\u00f1os web. Se pueden utilizar para mover cosas, por supuesto, pero tambi\u00e9n pueden cambiar por completo el aspecto de una p\u00e1gina. La propiedad
transform<\/code> es tu principal protagonista aqu\u00ed.<\/p>\nEs vers\u00e1til y puede desplazar elementos de un lugar a otro, como deslizar una imagen por la pantalla o cambiar su tama\u00f1o \u2014 piensa en hacer que algo parezca m\u00e1s cerca o m\u00e1s lejos, como acercar o alejar una foto. Y si quieres ponerte un poco extravagante, incluso puedes hacer que los elementos giren.<\/p>\n
Lo realmente impresionante aqu\u00ed es cuando a\u00f1ades transformaciones 3D a la mezcla. Con funciones como
translate3d<\/code>,scale3d<\/code>, yrotate3d<\/code>, los elementos pueden saltar fuera de la pantalla, creando una experiencia m\u00e1s envolvente dentro del navegador.<\/p>\nTomemos, por ejemplo, el efecto de tarjeta volteada. Se trata de una atractiva funci\u00f3n en la que una cara de una tarjeta muestra cierta informaci\u00f3n, y cuando se voltea, se revela nuevo contenido en la otra cara. Este elemento interactivo puede captar realmente la atenci\u00f3n de tus visitantes.<\/p>\n
La clave para conseguir este efecto es utilizar eficazmente la propiedad
backface-visibility<\/code>. Esto garantiza que el reverso de la tarjeta permanezca oculto<\/a> hasta que deba verse.<\/p>\nPero, \u00bfpor qu\u00e9 detenerse ah\u00ed? Cuando combinas estas transformaciones con transiciones y animaciones, puedes obtener mucho m\u00e1s de tu CSS. Puedes tener un bot\u00f3n que aumente elegantemente de tama\u00f1o al pasar el rat\u00f3n por encima o un icono que se mueva juguetonamente por la pantalla. Estos cambios din\u00e1micos a\u00f1aden una cualidad fluida a los elementos de tu p\u00e1gina web, haciendo que la experiencia del usuario sea a\u00fan m\u00e1s atractiva.<\/p>\n
Designmodo ofrece varios ejemplos atractivos de esta t\u00e9cnica en acci\u00f3n. En primer lugar, puedes ver el CSS para transformaciones 3D<\/a> desglosado. Despu\u00e9s, puedes ver el c\u00f3digo en acci\u00f3n<\/a>:<\/p>\n
![\"donut](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/designmodo-spinning-donut.png\")
Designmodo ofrece un magn\u00edfico ejemplo de transformaciones 3D funcionando a la perfecci\u00f3n.<\/figcaption><\/figure>\n Consultas de contenedor<\/h2>\n
Las consultas de contenedor son otro aspecto de CSS que merece la pena explorar. Te permiten aplicar estilo a los elementos en funci\u00f3n del tama\u00f1o de su contenedor, en lugar de en funci\u00f3n del tama\u00f1o de toda la pantalla. Pi\u00e9nsalo as\u00ed: tienes una caja, y quieres que lo que hay dentro se vea bien independientemente de lo grande o peque\u00f1a que sea la caja. Las consultas de contenedor son perfectas para eso.<\/p>\n
Son muy \u00fatiles cuando quieres que diferentes partes de tu p\u00e1gina web, como las barras laterales o las tarjetas, cambien su aspecto dependiendo del espacio que tengan. Cada componente puede decidir su propio estilo<\/a>, independientemente del resto de la p\u00e1gina.<\/p>\n
Aqu\u00ed tienes un breve resumen sobre c\u00f3mo utilizarlos:<\/p>\n
- \n
- Configura el contenedor<\/strong>: En primer lugar, indica al CSS qu\u00e9 parte de tu p\u00e1gina es un contenedor. Esto se hace con propiedades como
container-type<\/code> ycontainer-name<\/code>.<\/li>\n- Escribe tus consultas<\/strong>: Igual que las consultas de medios, pero para contenedores. Escribes una regla que diga: \u00abOye, si mi contenedor tiene al menos este ancho, entonces haz estos cambios de estilo\u00bb<\/li>\n<\/ul>\n
Este es el aspecto que tendr\u00eda el c\u00f3digo b\u00e1sico:<\/p>\n
@container (min-width: 300px) {\n\n.component {\n\n\/* styles *\/\n\n}\n\n}<\/code><\/pre>\nEn este ejemplo, los estilos de la clase
.component<\/code> se aplicar\u00e1n cuando su contenedor alcance una anchura m\u00ednima de 300px.<\/p>\nAhora bien, las consultas de contenedor pueden utilizarse en varios escenarios, como por ejemplo:<\/p>\n
- \n
- Sidebars y pies de p\u00e1gina responsivos<\/strong>: Ajustar la anchura y el dise\u00f1o de los sidebars o los pies de p\u00e1gina en funci\u00f3n del tama\u00f1o del contenedor.<\/li>\n
- Tarjetas adaptables:<\/strong> Cambiar el dise\u00f1o o estilo de las tarjetas en un dise\u00f1o de cuadr\u00edcula o flexbox en funci\u00f3n de la anchura del contenedor.<\/li>\n<\/ul>\n
Aunque las consultas de contenedor son compatibles con los principales navegadores, como Chrome, Firefox, Safari y Edge, sigue siendo una buena pr\u00e1ctica utilizarlas como mejora progresiva. Empieza con estilos b\u00e1sicos para los navegadores que no los admitan y mej\u00f3ralos para los que admitan consultas de contenedor.<\/p>\n
Utilizar Flexbox para la alineaci\u00f3n vertical<\/h2>\n
Flexbox<\/a> es una herramienta incre\u00edblemente \u00fatil en CSS, especialmente cuando se trata de alineaci\u00f3n 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\u00f1o, puede ser vertical).<\/p>\n
Utilizar alinear-elementos para la alineaci\u00f3n vertical<\/h3>\n
La propiedad
align-items<\/code> de Flexbox es tu recurso para alinear elementos verticalmente dentro de un contenedor. Funciona cuando tu contenedor flex tiene unflex-direction<\/code> de filas. Esta propiedad te permite controlar c\u00f3mo se alinean todos los hijos de un contenedor flex a lo largo del eje transversal.<\/p>\nPor ejemplo, si tienes un mont\u00f3n de elementos en un contenedor flexible y quieres que todos est\u00e9n centrados verticalmente, utilizar\u00edas
align-items: center;<\/code>. Estas son las principales opciones que tienes conalign-items<\/code>:<\/p>\n- \n
flex-start<\/code>: Alinea los elementos al inicio del contenedor.<\/li>\nflex-end<\/code>: Alinea los elementos al final del contenedor.<\/li>\ncenter<\/code>: Centra los elementos en el contenedor.<\/li>\nbaseline<\/code>: Alinea los elementos en funci\u00f3n de su l\u00ednea base.<\/li>\nstretch<\/code>: Estira los elementos para llenar el contenedor (comportamiento por defecto).<\/li>\n<\/ul>\nUtilizar el autoalineamiento para el control individual<\/h3>\n
Aunque
align-items<\/code> es genial para alinear todos los elementos de un contenedor, a veces quieres alinear s\u00f3lo un elemento de forma diferente. Por eso es tan \u00fatilalign-self<\/code>. Esta propiedad te permite anular el valor dealign-items<\/code> para elementos flexibles individuales. Acepta los mismos valores quealign-items<\/code>.<\/p>\nPor ejemplo, supongamos que tienes un contenedor flexible con
align-items: center;<\/code> pero hay un elemento que quieres alinear al principio. Puedes aplicaralign-self: flex-start;<\/code> a ese elemento espec\u00edfico. Es una forma estupenda de tener un control preciso sobre la alineaci\u00f3n de elementos individuales.<\/p>\nSin embargo, puede ser muy \u00fatil verlo en acci\u00f3n.<\/p>\n
Supongamos que est\u00e1s dise\u00f1ando una barra de navegaci\u00f3n con un logotipo, algunos enlaces y una barra de b\u00fasqueda. Quieres que los enlaces est\u00e9n centrados, el logotipo alineado en la parte superior y la barra de b\u00fasqueda alineada en la parte inferior.<\/p>\n
As\u00ed es como podr\u00edas hacerlo:<\/p>\n
.nav-container {\n\ndisplay: flex;\n\nflex-direction: row;\n\nalign-items: center;\n\n}\n\n.logo {\n\nalign-self: flex-start;\n\n}\n\n.search-bar {\n\nalign-self: flex-end;\n\n}<\/code><\/pre>\nEn este ejemplo, el
.nav-container<\/code> es un contenedor flexible con sus elementos generalmente centrados. El logotipo y la barra de b\u00fasqueda, sin embargo, se salen de esta regla general, aline\u00e1ndose al principio y al final del contenedor, respectivamente.<\/p>\nFunciones de color modernas en CSS<\/h2>\n
Las funciones de color modernas en CSS han evolucionado significativamente, ofreciendo formas m\u00e1s sofisticadas de definir y manipular los colores en el dise\u00f1o web. Profundicemos en algunas de estas funciones:<\/p>\n
1. rgb() y rgba()<\/h3>\n
La funci\u00f3n
rgb()<\/code> 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 variantergba()<\/code> a\u00f1ade un canal alfa para la opacidad, siendo 1 totalmente opaco y 0 totalmente transparente.<\/p>\nDeber\u00eda tener este aspecto<\/p>\n
.example {\n\ncolor: rgb(255, 0, 0); \/* Red *\/\n\nbackground-color: rgba(255, 0, 0, 0.5); \/* Semi-transparent red *\/\n\n}<\/code><\/pre>\n2. hsl() y hsla()<\/h3>\n
hsl()<\/code> representan los colores en t\u00e9rminos de Tono, Saturaci\u00f3n y Luminosidad, lo que hace m\u00e1s intuitiva la selecci\u00f3n de variaciones de color. Al igual quergba()<\/code>,hsla()<\/code> incluye un canal alfa para la opacidad. As\u00ed<\/p>\n.example {\n\ncolor: hsl(120, 100%, 50%); \/* Green *\/\n\nbackground-color: hsla(120, 100%, 50%, 0.3); \/* Semi-transparent green *\/\n\n}<\/code><\/pre>\n3. oklch() y oklab()<\/h3>\n
oklch()<\/code><\/a> yoklab()<\/code> son adiciones m\u00e1s recientes a las funciones de color CSS. Se basan en el espacio de color CIELAB<\/a>, que est\u00e1 dise\u00f1ado para ser perceptualmente uniforme. Esto significa que los cambios en los valores de color se corresponden m\u00e1s estrechamente con los cambios percibidos por el ojo humano.<\/p>\nEn concreto<\/p>\n
- \n
oklab()<\/code> se utiliza para definir los colores en un espacio perceptualmente uniforme.<\/li>\noklch()<\/code> es similar, pero utiliza coordenadas cil\u00edndricas (luminosidad, croma y tono).<\/li>\n<\/ul>\nEstas funciones permiten una manipulaci\u00f3n del color m\u00e1s precisa e intuitiva, especialmente para tareas como la creaci\u00f3n de gradientes de color suaves. Esto es lo que podr\u00eda parecer en forma de c\u00f3digo:<\/p>\n
.example {\n\ncolor: oklch(75%, 0.25, 250); \/* A color in oklch *\/\n\nbackground-color: oklab(0.623, 0.172, -0.079); \/* A color in oklab *\/\n\n}<\/code><\/pre>\nImplementaci\u00f3n de esquemas de color avanzados<\/h3>\n
Con estas funciones, especialmente las m\u00e1s avanzadas
oklch()<\/code> yoklab()<\/code>, puedes implementar intrincados esquemas de color que sean visualmente coherentes y atractivos. Ofrecen m\u00e1s control sobre c\u00f3mo se representan y perciben los colores, garantizando que tus dise\u00f1os sean est\u00e9ticamente agradables y accesibles.<\/p>\nCuando combinas estas funciones de color con caracter\u00edsticas CSS como propiedades personalizadas (variables CSS) y c\u00e1lculos, puedes desarrollar sistemas de color din\u00e1micos y flexibles que se adapten a diferentes temas, estados y entornos.<\/p>\n
Como los est\u00e1ndares web y la compatibilidad de los navegadores con estas funciones siguen cambiando, adoptar estas modernas funciones de color puede mejorar significativamente el dise\u00f1o visual y la experiencia de usuario de tus proyectos web.<\/p>\n
Curvar el texto alrededor de las im\u00e1genes<\/h2>\n
La propiedad CSS
shape-outside<\/code> ofrece una forma creativa de envolver texto alrededor de las im\u00e1genes<\/a>, contribuyendo a dise\u00f1os m\u00e1s din\u00e1micos y visualmente interesantes y a un estilo de imagen<\/a> m\u00e1s avanzado.<\/p>\nTe permite definir una forma alrededor de la cual debe envolverse el contenido en l\u00ednea. Esto es \u00fatil para envolver texto alrededor de im\u00e1genes de forma no rectangular, creando composiciones m\u00e1s org\u00e1nicas y visualmente m\u00e1s atractivas que la envoltura de texto rectangular est\u00e1ndar.<\/p>\n
\u00bfC\u00f3mo funciona?<\/h3>\n
Puedes definir varias formas como c\u00edrculos, elipses y pol\u00edgonos, o incluso utilizar el canal alfa de una imagen para dictar la forma.<\/p>\n
La propiedad
shape-outside<\/code> se aplica normalmente a elementos flotados. Y cuando haces flotar una imagen y aplicas unshape-outside<\/code>, el texto se envuelve alrededor de ella seg\u00fan la forma definida.<\/p>\nAqu\u00ed tienes un ejemplo b\u00e1sico de uso de forma-exterior con un c\u00edrculo:<\/p>\n
.image {\n\nfloat: left;\n\nshape-outside: circle(50%);\n\nwidth: 200px;\n\nheight: 200px;\n\nmargin-right: 15px;\n\n}<\/code><\/pre>\nEn este ejemplo, la clase
.image<\/code> se aplica a un elemento imagen. Est\u00e1 flotando a la izquierda, y elshape-outside: circle(50%);<\/code> crea una forma circular alrededor de la cual se envolver\u00e1 el texto. Utilizarshape-outside<\/code> de forma eficaz puede abrir nuevas posibilidades en tus dise\u00f1os, ya que permite que el texto fluya alrededor de formas complejas, haciendo posible crear dise\u00f1os tipo revista y p\u00e1ginas web visualmente ricas.<\/p>\nModos de fusi\u00f3n CSS<\/h2>\n
Los modos de fusi\u00f3n CSS ofrecen una potente forma de mezclar colores e im\u00e1genes, creando efectos visuales \u00fanicos que tambi\u00e9n pueden mejorar tus dise\u00f1os. Estos modos de mezcla te permiten crear atractivos efectos de texto, superposiciones de im\u00e1genes e intrincados patrones de fondo. Para utilizar
background-blend-mode<\/code>, hablemos primero de lo que hace. Esta propiedad se utiliza para definir c\u00f3mo deben mezclarse las im\u00e1genes 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\u00eda tener el c\u00f3digo<\/p>\n.element {\n\nbackground-image: url('image.jpg');\n\nbackground-color: blue;\n\nbackground-blend-mode: multiply;\n\n}<\/code><\/pre>\nAhora
mix-blend-mode<\/code> funciona mezclando el contenido de un elemento (incluyendo im\u00e1genes y texto) con su fondo. Esto es especialmente \u00fatil para efectos de texto<\/a> o para superponer una imagen sobre otra. As\u00ed<\/p>\n<\n\n.element {\n\nmix-blend-mode: screen;\n\n}<\/code><\/pre>\nModos de fusi\u00f3n populares<\/h3>\n
Como referencia, aqu\u00ed tienes algunos de los modos de fusi\u00f3n m\u00e1s populares que necesitar\u00e1s conocer para utilizar este efecto correctamente:<\/p>\n
- \n
- Multiplicar<\/strong>: Multiplica los colores de la capa de mezcla y de la capa base, dando como resultado un color m\u00e1s oscuro.<\/li>\n
- Malla<\/strong>: Aclara los colores, al contrario que multiplicar. Es \u00fatil para crear efectos de luz.<\/li>\n
- Superponer<\/strong>: Combina los modos de fusi\u00f3n multiplicar y pantalla. Las partes claras de la imagen se aclaran y las oscuras se oscurecen.<\/li>\n
- Oscurecer<\/strong> y aclarar: Selecciona el color m\u00e1s oscuro o m\u00e1s claro, respectivamente.<\/li>\n
- Esquivar color y quemar color<\/strong>: Aclara u oscurece el color base para reflejar el color de fusi\u00f3n.<\/li>\n
- Diferencia y exclusi\u00f3n<\/strong>: Se utilizan para crear efectos de color m\u00e1s art\u00edsticos e invertidos.<\/li>\n<\/ul>\n
Adaptarse a las preferencias del usuario<\/h2>\n
- Malla<\/strong>: Aclara los colores, al contrario que multiplicar. Es \u00fatil para crear efectos de luz.<\/li>\n
- Tarjetas adaptables:<\/strong> Cambiar el dise\u00f1o o estilo de las tarjetas en un dise\u00f1o de cuadr\u00edcula o flexbox en funci\u00f3n de la anchura del contenedor.<\/li>\n<\/ul>\n
- Escribe tus consultas<\/strong>: Igual que las consultas de medios, pero para contenedores. Escribes una regla que diga: \u00abOye, si mi contenedor tiene al menos este ancho, entonces haz estos cambios de estilo\u00bb<\/li>\n<\/ul>\n
- Animaciones sincronizadas<\/strong>: Tambi\u00e9n puedes alinear distintas propiedades para que se muevan al mismo ritmo, creando un efecto m\u00e1s coordinado.<\/li>\n
- Funciones de temporizaci\u00f3n<\/strong>: Son imprescindibles, ya que controlan la aceleraci\u00f3n y desaceleraci\u00f3n de la transici\u00f3n. Una de las opciones m\u00e1s vers\u00e1tiles es la funci\u00f3n