Ocho consejos CSS para diseños y efectos avanzados
Publicado: 2022-03-11El ámbito del desarrollo web front-end ha progresado considerablemente en los últimos años. Sin embargo, el front-end web, como lo ven los usuarios, sigue siendo el mismo: marcado HTML con estilo CSS.
Muchos problemas de diseño pueden parecer simples al principio, pero a menudo resultan complicados. Sin un amplio conocimiento 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á ocho consejos y trucos de CSS de expertos que aprovechan las funciones de CSS menos conocidas para implementar algunos de estos diseños y efectos avanzados.
1. Maximizar los selectores hermanos de CSS
El problema: está perdiendo oportunidades de optimización al no utilizar selectores hermanos.
La solución: use selectores de hermanos siempre que tenga sentido. Siempre que esté trabajando con una lista de elementos, y necesite tratar el primero o el último elemento de manera diferente, su primer instinto puede ser usar los selectores pseudo CSS :first-child y :last-child .
Por ejemplo, al crear un ícono de menú de hamburguesas solo con CSS:
Vea los selectores de hermanos de CSS para maximizar el lápiz 1 de Rico Mossesgeld (@ricotheque) en CodePen.
Esto tiene sentido: cada barra tiene un margen inferior, excepto la última.
Sin embargo, el mismo efecto también es posible a través del selector de hermanos adyacente (+):
Vea el Pen Maximizing CSS Sibling Selectors 2 de Rico Mossesgeld (@ricotheque) en CodePen.
Esto también tiene sentido: todo lo que está después de la primera barra tiene un margen superior. Este truco CSS no solo ahorra unos pocos bytes adicionales (que pueden sumar fácilmente para cualquier proyecto de tamaño mediano), sino que también abre un mundo de posibilidades.
Considere esta lista de tarjetas:
Vea el Pen Maximizing CSS Sibling Selectors 3 de Rico Mossesgeld (@ricotheque) en CodePen.
Cada uno tiene un título y texto, el último de los cuales 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:
Vea los selectores de hermanos 4 de maximización de CSS por lápiz de Rico Mossesgeld (@ricotheque) en CodePen.
Con un poco de JavaScript, esto también puede ser interactivo.
Confiar solo en JavaScript para todo eso, sin embargo, daría como resultado un script como este:
Vea el Pen Maximizing CSS Sibling Selectors 5 de Rico Mossesgeld (@ricotheque) en CodePen.
donde incluir jQuery como una dependencia le permite tener un código algo corto.
2. Tamaño de elementos HTML consistente
El problema: los elementos HTML tienen tamaños inconsistentes en diferentes navegadores.
La solución: establezca box-sizing para todos los elementos en border-box . Una pesadilla para los desarrolladores web desde hace mucho tiempo, Internet Explorer hizo una cosa bien: clasificó las cajas correctamente.
Otros navegadores solo miran el contenido cuando calculan el ancho de un elemento HTML, y todo lo demás se trata como excedente. Un width: 200px , con un 20px de 20 px y un 2px de 2 px, se representa con un ancho de 242 píxeles.
Internet Explorer considera el relleno y el borde como parte del ancho. Aquí, el div de arriba tendría 200 píxeles de ancho.
Vea la demostración 1 del modelo Pen CSS Box de Rico Mossesgeld (@ricotheque) en CodePen.
Una vez que lo domine, encontrará que el último enfoque es más lógico, incluso si no sigue los estándares.
Si digo que el ancho es de 200 px, maldita sea, será un cuadro de 200 px de ancho incluso si tengo 20 px de relleno.
En cualquier caso, el siguiente CSS mantiene los tamaños de los elementos (y por lo tanto los diseños) consistentes en todos los navegadores:
Vea la demostración 2 del modelo Pen CSS Box de Rico Mossesgeld (@ricotheque) en CodePen.
El segundo conjunto de selectores de CSS protege los elementos HTML con estilo sin tener en cuenta el cuadro de borde de la interrupción del diseño.
box-sizing: border-box es tan útil que es parte de un framework CSS relativamente popular llamado sanitize.css.
3. Elementos de altura dinámica
El problema: mantener la altura de un elemento HTML proporcional a su ancho.
La solución: use un acolchado vertical como reemplazo de la altura.
Supongamos que desea que la altura de un elemento HTML siempre coincida con su ancho CSS. height: 100% no cambia el comportamiento predeterminado de los elementos que coinciden con la altura de su contenido.
Vea Pen Dynamic Height Elements 1 de Rico Mossesgeld (@ricotheque) en CodePen.
La respuesta es establecer la altura en 0 y usar padding-top o padding-bottom para establecer la altura real de .container en su lugar. Cualquiera de las propiedades puede ser un porcentaje del ancho del elemento:
Vea Pen Dynamic Height Elements 2 de Rico Mossesgeld (@ricotheque) en CodePen.
Ahora .container seguirá siendo un cuadrado sin importar cuán ancho se vuelva. overflow: hidden evita que el contenido largo rompa esta proporción.
Esta técnica, con algunas modificaciones, es excelente para crear incrustaciones de video que conservan su relación de aspecto en cualquier tamaño. Simplemente alinee la inserción con la posición superior e izquierda de .container position: absolute , configure ambas dimensiones de la inserción al 100% para que "llene" .container y cambie el padding-bottom de .container para que coincida con el aspecto del video. proporción.
Vea Pen Dynamic Height Elements 3 de Rico Mossesgeld (@ricotheque) en CodePen.
position: relative para .container asegura que el posicionamiento absoluto de iframe funcione correctamente. El nuevo padding-bottom es solo la altura de la relación de aspecto dividida por su ancho, multiplicada por 100. Por ejemplo, si la relación de aspecto del video incrustado es 16:9, el porcentaje de padding-bottom debe ser 9 dividido por 16 (.5625) y multiplicado por 100 (56,25).
4. Elementos de ancho dinámico
El problema: mantener el ancho de un elemento HTML proporcional a su altura.
La solución: utilice el tamaño de fuente como base para las dimensiones del elemento.
Ahora, ¿qué pasa con el reverso, o los contenedores que cambian de ancho a medida que lo hace su altura? Esta vez, es el font-size al rescate. Recuerda que el ancho y el alto pueden estar en em s, lo que significa que pueden ser una proporción del font-size del elemento.
Un elemento con un font-size de 40 px, un ancho de 2em y una altura de 1 1em tendría 80 píxeles (40 x 2) de ancho y 40 píxeles (40 x 1) de alto.
Vea los elementos de ancho dinámico del lápiz por Rico Mossesgeld (@ricotheque) en CodePen.
¿Quieres cambiar la altura de .container ? Cambia tamaño de fuente.
La única advertencia es que es imposible hacer que el tamaño de fuente de un elemento coincida con la altura de su padre automáticamente solo con CSS. Sin embargo, esta técnica permite reducir un script de cambio de tamaño de Javascript de:
var container = document.querySelector( '.container' ); container.style.height = yourDesiredHeight + 'px'; container.style.width = yourDesiredHeight * yourDesiredRatio + 'px';para:
document.querySelector( '.container' ).style.fontSize = yourDesiredHeight + 'px';5. Centrado vertical de contenido dinámico
El problema: mantener un elemento HTML (con altura desconocida) centrado verticalmente dentro de otro.
La solución: configure el elemento externo para display: table , luego convierta el elemento interno en una table-cell CSS. O simplemente use CSS Flexbox.
Es posible centrar verticalmente una línea de texto con line-height :
Vea el centrado vertical del lápiz de contenido dinámico 1 de Rico Mossesgeld (@ricotheque) en CodePen.
Para múltiples líneas de texto o contenido sin texto, las tablas CSS son la respuesta. Establezca la visualización de .container en table , luego use display: table-cell y vertical-align: middle para .text :
Vea el Centrado vertical del lápiz de Dynamic Content 2 de Rico Mossesgeld (@ricotheque) en CodePen.
Piensa en este truco de CSS como el equivalente vertical de margin: 0 auto . Flexbox de CSS3 es una excelente alternativa para esta técnica si la compatibilidad con errores de Internet Explorer es aceptable:
Vea el Centrado vertical del lápiz de Dynamic Content 3 de Rico Mossesgeld (@ricotheque) en CodePen.
6. Columnas de la misma altura
El problema: mantener las columnas a la misma altura.
La solución: para cada columna, use un valor margin-bottom negativo grande y cancélelo con un padding-bottom igualmente grande. Las tablas CSS y Flexbox también funcionan.
Usando float o display: inline-block , es posible crear columnas una al lado de la otra a través de CSS.
Consulte Columnas de la misma altura del lápiz 1 de Rico Mossesgeld (@ricotheque) en CodePen.
Tenga en cuenta el uso de box-sizing: border-box para dimensionar correctamente los .cols . Consulte Tamaño de elemento HTML uniforme más arriba.
Los bordes de la primera y la última columna no llegan hasta el final; no coinciden con la altura de la segunda columna más alta. Para solucionar esto, simplemente agregue overflow: hidden a .row . Luego establezca el margin-bottom de cada .col en 99999px y su padding-bottom en 100009px (99999px + el relleno de .col aplicado a los otros lados de .col).
Vea Columnas de la misma altura del lápiz 2 de Rico Mossesgeld (@ricotheque) en CodePen.
Una alternativa más sencilla es Flexbox. Nuevamente, solo use esto si la compatibilidad con Internet Explorer no es imprescindible.
Consulte Columnas de la misma altura del lápiz 3 de Rico Mossesgeld (@ricotheque) en CodePen.
Una alternativa más con mejor soporte de navegador: tablas CSS (sin vertical-align: middle ).
Vea Columnas de la misma altura del lápiz 4 de Rico Mossesgeld (@ricotheque) en CodePen.
7. Ir más allá de la caja
El problema: las cajas y las líneas rectas son un cliché.
La solución: use transform: rotate(x) o border-radius .
Tome una serie típica 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 así:
Vea Pen Going Beyond the Box 1 de Rico Mossesgeld (@ricotheque) en CodePen.
A costa de hacer que el marcado sea mucho más complicado, estos paneles cuadrados podrían convertirse en una pila de paralelogramos.
Vea Pen Going Beyond the Box 2 de Rico Mossesgeld (@ricotheque) en CodePen.
Están pasando muchas cosas aquí:
La altura de cada panel está controlada por .pane-container. El margen inferior negativo asegura que los paneles se apilen cómodamente.
-
.pane-background, su hijo.mask-boxy su nieto.imageestán todos configurados enposition: absolute. Cada elemento tiene diferentes valorestop,left,bottomyright. Esto elimina cualquier espacio creado por las rotaciones que se detallan a continuación. -
.mask-boxse gira 2 grados (en sentido contrario a las agujas del reloj). -
.imagese gira -2 grados para contrarrestar la.mask-box. - El
.mask-boxestá oculto para que sus lados superior e inferior rotados recorten el elemento.image.
En una nota relacionada, convertir una imagen en un círculo o un óvalo es muy simple. Simplemente aplique border-radius: 100% al elemento img .
Vea Pen Going Beyond the Box 3 de Rico Mossesgeld (@ricotheque) en CodePen.
Las modificaciones de CSS en tiempo real como estas reducen la necesidad de preparar el 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 simplemente aplicar el mismo efecto a través de CSS sin cambiar la foto original.
La ventaja adicional es que al dejar el contenido intacto y no depender del diseño actual del sitio web, se facilitan rediseños o renovaciones futuras.
8. Modo nocturno
El problema: implementar un modo nocturno sin crear una nueva hoja de estilo.
La solución: Usa filtros CSS.
Algunas aplicaciones cuentan con un modo nocturno, donde la interfaz se oscurece para una mejor legibilidad con 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 (no es de extrañar) invierte los colores de todo lo que hay dentro de un elemento. Esto hace que sea innecesario crear y aplicar un nuevo conjunto de estilos.
Vea Pen Night Mode 1 de Rico Mossesgeld (@ricotheque) en CodePen.
El uso de este filtro en texto negro y un fondo blanco simula el modo nocturno. !important asegura que estos nuevos colores anulen cualquier estilo existente.
Vea Pen Night Mode 2 de Rico Mossesgeld (@ricotheque) en CodePen.
Desafortunadamente, la imagen se ve rara, porque sus colores estaban invertidos con todo lo demás. La buena noticia es que se pueden aplicar varios filtros al mismo tiempo. Al agregar el filtro de rotación de tono, las imágenes y otro contenido visual vuelven a la normalidad:
Vea Pen Night Mode 3 de Rico Mossesgeld (@ricotheque) en CodePen.
¿Por qué funciona esto? hue-rotate(180deg) simplemente crea el mismo efecto que invert(1) . Aquí hay una demostración de cómo funcionaría el CSS en modo nocturno cuando se alterna a través de un botón activado por JavaScript.
Aproveche al máximo el CSS
A menos que el navegador o la forma en que se construyen los sitios web cambie drásticamente en el futuro, un buen conocimiento de CSS seguirá siendo una habilidad fundamental en el espacio de desarrollo web.
Todos estos consejos de CSS comparten algo en común: maximizan el uso de CSS como lenguaje de estilo, permitiendo que el navegador haga el trabajo pesado. Y, cuando se hace bien, esto siempre producirá mejores resultados, mejor rendimiento y, por lo tanto, una mejor experiencia de usuario.
Háganos saber si tiene algún truco de CSS que encuentre interesante y útil en la sección de comentarios a continuación.