Los 5 trucos CSS favoritos que aprendí este año

Este año ha sido muy productivo para mí, ya que desarrollé numerosas aplicaciones y sitios web UI / UX. En el camino he recogido algunos trucos útiles para mejorar mis diseños.

Affiliated Ad

1. Variables CSS

Las variables CSS son útiles cuando queremos aplicar el mismo estilo a elementos comunes. En lugar de agregar una box-shadow compleja, por ejemplo, a elementos comunes, podemos inicializar una variable y usar esa variable cada vez que queramos aplicar ese estilo a un elemento

Inicializamos las variables CSS con :root y la propiedad que queremos establecer así:

Y luego podemos usarlo en cualquier elemento al que queramos aplicar esta
box-shadow :

2. Media queries

Además de los media queries de ancho de pantalla, también podemos aplicar media queries de altura de pantalla, por lo que los dispositivos con una altura de pantalla más pequeña pueden responder. Además, cuando un dispositivo gira su pantalla, la altura de la pantalla cambia y debemos reflejar esos cambios para mantener la adaptabilidad.

Para pantallas de 800 píxeles o menos, cambiará la altura del elemento de cuadrícula (grid).

3. Función Calc

La función Calc de CSS puede ser muy útil al establecer anchos dinámicos. Digamos que queremos que el ancho de un elemento se base en el ancho de otro elemento.

El ancho de nuestro elemento contenedor se basará en el 100% de su contenedor padre menos 300px, por lo que si un contenedor al lado es 300px, nuestro contenedor dinámico responderá en consecuencia.

4. Alineación vertical

Hay muchas formas de alinear un elemento verticalmente, pero a veces puede complicarse y no funcionar debido a complicaciones de posicionamiento del elemento padre. Uno de esos métodos que funciona cada vez es posicionar un elemento que queremos alinear verticalmente, como posición absoluta y aplicar los siguientes estilos.

Esto alineará verticalmente el elemento a su contenedor principal.

5. Propiedad border-box

border-box es una de las propiedades más útiles en CSS. Nos permite crear relleno en los elementos manteniendo las dimensiones del elemento uniformes. Entonces, si tenemos un contenedor con 300px de ancho y 300px de altura y un relleno de 30px, por defecto CSS agregará esos 30px a las dimensiones del contenedor, causando muchos problemas de alineación y otros problemas en nuestro diseño. Al aplicar la propiedad box-sizing: border-box podemos hacer que todos los contenedores tengan un tamaño uniforme.
box-sizing también se puede usar para hacer inputs, textareas y deplegables, del mismo tamaño también, para crear una apariencia uniforme para nuestros elementos.

Sitio web: www.flexrweb.com

Puedes consultar el artículo original en inglés en:
https://dev.to/urielbitton/the-top-5-css-tricks-i-learned-this-year-23ai

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *