El desarrollo de front-end web ha hecho grandes progresos en los últimos años. Sin embargo, lo que los usuarios ven sigue siendo lo mismo: un marcado HTML estilizado con CSS.
Muchos problemas de maquetación pueden parecer simples al principio, pero a menudo resultan complicados. Sin un conocimiento profundo de cómo funcionan ciertas características de CSS, estos diseños avanzados pueden parecer imposibles de lograr solo con CSS.
En este artículo, encontrarás ocho consejos y trucos avanzados de CSS que aprovechan características menos conocidas para implementar diseños y efectos avanzados, optimizando tanto el rendimiento como la experiencia de usuario.
1. Maximizar los Selectores Hermanos en CSS
El problema: Estás perdiendo oportunidades de optimización al no utilizar selectores hermanos.
La solución: Utiliza los selectores hermanos siempre que sea posible. Cada vez que trabajes con una lista de elementos y necesites tratar el primero o el último elemento de manera diferente, tu primer instinto podría ser usar los pseudo selectores :first-child y :last-child.
Por ejemplo, al crear un ícono de menú tipo hamburguesa solo con CSS:
Esto tiene sentido: cada barra tiene un margin-bottom, excepto la última.Sin embargo, el mismo efecto se puede lograr usando el selector hermano adyacente (+):
Este truco de CSS no solo ahorra algunos bytes adicionales (que pueden acumularse en un proyecto mediano), sino que también abre un mundo de posibilidades.
Considera esta lista de cards:
Cada una tiene un título y texto, el cual está oculto por defecto. Si quieres hacer visible solo el texto de la tarjeta activa (con la clase .active) y las que le siguen, puedes hacerlo rápidamente usando solo CSS:
Con un poco de JavaScript, también puede ser interactivo.
Confiar únicamente en JavaScript para controlar interacciones complejas puede llevar a un código redundante. Sin embargo, al basarte en selectores CSS, tu código será más ligero y fácil de mantener. El uso eficaz de los selectores hermanos abre muchas posibilidades sin necesidad de manipular continuamente el DOM con JavaScript.
Además, este enfoque mejora el rendimiento, especialmente cuando trabajas con listas grandes o estructuras de menús que requieren múltiples niveles de interacción.
2. Tamaños Consistentes de los Elementos HTML
El problema: Los elementos HTML tienen tamaños inconsistentes en diferentes navegadores.
La solución: Configura box-sizing para todos los elementos como border-box.
Una vieja molestia para los desarrolladores web ha sido la forma en que algunos navegadores calculan el tamaño de los cuadros. Internet Explorer, a pesar de sus múltiples defectos, tenía un aspecto positivo: calculaba el tamaño de los elementos de manera correcta.
En la mayoría de los navegadores, solo se tiene en cuenta el contenido al calcular el ancho de un elemento HTML, con todo lo demás tratado como excedente. Un div con un ancho de 200px, un padding de 20px y un borde de 2px se representa con 242 píxeles de ancho.
Internet Explorer consideraba el padding y el borde como parte del ancho. En este caso, el mismo div tendría 200 píxeles de ancho.
En cualquier caso, el siguiente CSS mantiene los tamaños de los elementos (y, por tanto, los diseños) consistentes en todos los navegadores:
*, *::before, *::after {
box-sizing: border-box;
}
Este ajuste asegura que los elementos mantengan un tamaño predecible sin importar el borde o el padding que tengan, facilitando mucho la creación de diseños complejos.
Esta técnica es tan útil que incluso se ha incluido en frameworks de CSS populares como sanitize.css.
3. Elementos de Altura Dinámica
El problema: Mantener la altura de un elemento HTML proporcional a su ancho.
La solución: Usa padding vertical como reemplazo para la altura.
Supongamos que quieres que la altura de un elemento HTML coincida siempre con su ancho en CSS. El uso de height: 100% no cambia el comportamiento predeterminado de los elementos, que es ajustarse a la altura de su contenido.
La respuesta es establecer la altura en 0 y usar padding-top o padding-bottom para definir la altura real de .container. Estas propiedades pueden ser un porcentaje del ancho del elemento:
Ahora, .container seguirá siendo un cuadrado sin importar cuán ancho se haga. overflow: hidden evita que el contenido largo rompa esta proporción.
Esta técnica, con algunas modificaciones, es ideal para crear videos embebidos que mantengan su relación de aspecto en cualquier tamaño. Solo tienes que alinear el embed con el borde superior e izquierdo de .container a través de position: absolute, configurar ambas dimensiones del embed al 100% para que «llene» .container, y cambiar el padding-bottom de .container para que coincida con la relación de aspecto del video:
position: relative para .container asegura que la posición absolute del iframe funcione correctamente.
4. Elementos de Anchura Dinámica
El problema: Mantener el ancho de un elemento HTML proporcional a su altura.
La solución: Usa font-size como base para las dimensiones del elemento.
Hasta ahora hemos hablado de cómo mantener la altura proporcional al ancho, pero ¿qué pasa con el caso contrario? Para aquellos contenedores que deben cambiar de ancho dependiendo de su altura, podemos utilizar el font-size como referencia.
Recuerda que tanto el ancho como la altura pueden definirse en ems, lo que significa que pueden ser una proporción del font-size del elemento.
Por ejemplo, un elemento con un font-size de 40px, un ancho de 2em y una altura de 1em sería de 80 píxeles (40 x 2) de ancho y 40 píxeles (40 x 1) de alto:
Si necesitas cambiar la altura de .container, solo cambia su font-size.La única limitación es que es imposible hacer que el font-size de un elemento coincida automáticamente con la altura de su padre solo con CSS. Sin embargo, esta técnica permite reducir el script de redimensionado de JavaScript de la siguiente manera:
var container = document.querySelector('.container');
container.style.height = yourDesiredHeight + 'px';
container.style.width = yourDesiredHeight * yourDesiredRatio + 'px';
a:
document.querySelector('.container').style.fontSize = yourDesiredHeight + 'px';
Este método no solo hace que el código sea más manejable, sino que también facilita el mantenimiento a largo plazo.
5. Centrado Vertical de Contenido Dinámico
El problema: Mantener un elemento HTML (con altura desconocida) centrado verticalmente dentro de otro.
La solución: Configura el elemento exterior con display: table y convierte el elemento interior en una table-cell de CSS. O simplemente usa CSS Flex.
Es posible centrar verticalmente una línea de texto con line-height:
Para varias líneas de texto o contenido que no sea texto, las tablas CSS son la respuesta. Configura el .container con display: table y usa display: table-cell y vertical-align: middle para .text:
Puedes pensar en esta técnica de CSS como el equivalente vertical de margin: 0 auto para centrar horizontalmente. El display: table y el table-cell son útiles para diseños donde la compatibilidad con versiones anteriores de navegadores (como IE 9 o anteriores) es importante.
Por otro lado, Flex está dejando de ser una excelente alternativa para ser la principal opcion de centrar verticalmente (y horizontalmente), además de que es mucho más simple de implementar:
6. Columnas de Misma Altura
El problema: Mantener columnas de la misma altura en un diseño de varias columnas.
La solución: Usa un gran valor negativo de margin-bottom para cada columna y cancélalo con un padding-bottom igualmente grande. Las tablas CSS y Flex también funcionan bien para esto.
El uso de float o display: inline-block hace posible crear columnas en paralelo solo con CSS.
El borde de la primera y última columna no llega hasta el fondo, lo que no coincide con la altura de la segunda columna, que es más alta. Para solucionar esto, solo agrega overflow: hidden a .row y luego establece el margin-bottom de cada .col en 99999px y su padding-bottom en 100009px (99999px + los 10px de padding aplicados a los otros lados de .col).
Otra alternativa más sencilla es Flex.
¿Quieres rizar el rizo? Recupera el tamaño de la ventana con sólo CSS – Escalares con tan(atan2())
7. Más Allá de la Caja
El problema: Las cajas y líneas rectas son tan comunes que aburren.
La solución: Usa transform: rotate(x) o border-radius.
https://recursosfrontend.com/
Tomemos un típico conjunto de paneles de un sitio web de marketing o folleto: una pila vertical de diapositivas con un punto singular. Su marcado y CSS podrían verse algo así:
A pesar de hacer el marcado más complicado, estos paneles cuadrados pueden convertirse en una pila de paralelogramos.
Te contamos lo que está ocurriendo aqui:
.pane-background, su hijo.mask-boxy su nieto.imageestán configurados comoposition: absolute. Cada elemento tiene diferentes valores detop,left,bottomyright. Esto elimina cualquier espacio creado por las rotaciones detalladas a continuación..mask-boxestá rotado 2 grados en sentido contrario a las agujas del reloj..imageestá rotado -2 grados para contrarrestar la rotación de.mask-box..mask-boxtieneoverflow: hiddenpara que sus lados rotados recorten el elemento.image.
Añadiendo al respecto, convertir una imagen en un círculo o un óvalo es extremadamente sencillo. Solo tienes que aplicar border-radius: 100% al elemento img.
Las modificaciones en tiempo real de CSS como estas reducen la necesidad de preparar contenido antes de publicarlo en un sitio web. En lugar de aplicar una máscara circular a una foto en Photoshop, el desarrollador web puede aplicar el mismo efecto a través de CSS sin cambiar la foto original.
La ventaja adicional es que, al no modificar el contenido y no depender del diseño actual del sitio web, se facilita cualquier rediseño o renovación futura.
8. Modo Nocturno
El problema: Implementar un modo nocturno sin crear una nueva hoja de estilos.
La solución: Usa filtros CSS.
Algunas aplicaciones tienen un modo nocturno, donde la interfaz se oscurece para mejorar la legibilidad en condiciones de poca luz. En los navegadores más nuevos, los filtros CSS pueden crear el mismo efecto, aplicando efectos similares a los de Photoshop.
Un filtro CSS útil es invert, que (sin sorpresas) invierte los colores de todo lo que está dentro de un elemento. Esto hace innecesario crear y aplicar un nuevo conjunto de estilos.
Usar este filtro en texto negro sobre un fondo blanco simula el modo nocturno. !important asegura que estos nuevos colores sobrescriban cualquier estilo existente.
Desafortunadamente, la imagen se ve extraña, ya que sus colores fueron invertidos con todo lo demás. La buena noticia es que se pueden aplicar varios filtros al mismo tiempo. Al añadir el filtro hue-rotate, las imágenes y otros contenidos visuales vuelven a la normalidad:
¿Por qué funciona esto? hue-rotate(180deg) simplemente crea el mismo efecto que invert(1).
Aquí tienes una demo de cómo funcionaría el CSS de modo nocturno al activarlo mediante un botón controlado por JavaScript.
–