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.
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í:
|
1 2 3 |
:root { --shadow: 0 1px 3px rgba(0,0,0,0.1); } |
Y luego podemos usarlo en cualquier elemento al que queramos aplicar esta
box-shadow :
|
1 2 3 |
.container { box-shadow: var(--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.
|
1 2 3 4 5 |
@media only screen and (max-height: 800px) { .container { height: 95%; } } |
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.
|
1 2 3 |
.container { width: calc(100%-300px); } |
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.
|
1 2 3 4 5 6 |
.container { position:absolute; top: -50%; transform: translateY(50%); margin: auto; } |
Esto alineará verticalmente el elemento a su contenedor principal.
5. Propiedad border-box
|
1 2 3 |
.container { box-sizing: 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