Domina estos conceptos en Css
David Hernández Sánchez
Software Engineer Front End | NextJs | React Native | Typescript
Si eres desarrollador frontend estos conceptos de css tienes que dominarlos.
Variables
En realidad su nombre es "custom properties". Las denominamos variables por lo parecido a la programación habitual y para poder comprender mejor su concepto. Pero qué es un variable css? Es un valor que se almacena en un lugar y luego se hace referencia de su contenido en varios otros lugares. Un beneficio adicional son los identificadores semánticos. Por ejemplo --color-blanco es más fácil de entender que #ffffff
Al colocar la variable en :root estamos definiendo que la custom property estará definida dentro del ámbito de esa etiqueta <html> (o cualquier elemento hijo), es decir, a todo el documento.
Media Queries
Son útiles cuando deseas modificar tu página web o aplicación en función del tipo de dispositivo, es decir para trabajar responsive design vamos adaptar nuestro proyecto a la vista en distintos tamaños de pantalla.
Además se pueden redactar queries utilizando operadores lógicos, incluyendo not, and, y only.
El operador and es usado para colocar juntas múltiples funciones multimedia.
Si requiere aplicar ese query solo si la pantalla esta en formato horizontal, usted puede utilizar el operador and y colocar la siguiente cadena:
@media (min-width: 700px) and (orientation: landscape) { ... }
Grid Layout
Es un sistema de maquetación bidimensional basado en cuadrículas.
Como lo uitlizamos_?
Para empezar tienes que definir un elemento contenedor como una rejilla con display: grid, establecer los tamaños de columna y fila con grid-template-columns y grid-template-rows, y luego colocar sus elementos hijos en la rejilla con grid-column y grid-row.
Veamos con un ejemplo:
Flexbox Layout
Flexbox hace que los navegadores muestren los elementos HTML seleccionados como modelos de caja flexibles. También permite redimensionar y reposicionar fácilmente un contenedor flexible y sus elementos unidimensionalmente.
Animation and Transitions
Las animaciones css permiten activar la transición entre un estilo CSS y otro. Las animaciones constan de dos componentes: un estilo que describe la animación CSS y un conjunto de fotogramas que indican su estado inicial y final, así como posibles puntos intermedios en la misma.
Las animaciones CSS tienen tres ventajas principales sobre las técnicas tradicionales de animación basada en scripts:
- Son muy fáciles de usar para animaciones sencillas, puedes hacerlo incluso sin tener conocimientos de Javascript.
- La animación se muestra correctamente, incluso en equipos poco potentes. Animaciones simples realizadas en Javascript pueden verse mal (a menos que estén muy bien hechas). El motor de renderizado puede usar técnicas de optimización como el "frame-skipping" u otras técnicas para que la ejecución de la animación se vea tan suave como sea posible.
- Al ser el navegador quien controle la secuencia de la animación, permitimos que optimice el rendimiento y eficiencia de la misma, por ejemplo, reduciendo la frecuencia de actualización de la animación ejecutándola en pestañas que no estén visibles.
Debemos recalcar que este tema es muy amplio y dependerá de cada desarrollador alcanzar este conocimiento.
Shapes and Clipping
CSS es capaz de hacer todo tipo de formas. Los cuadrados y rectángulos son fáciles, ya que son las formas naturales de la web. También tenemos los pseudoelementos ::before y ::after en CSS, que nos dan la posibilidad de añadir dos formas más al elemento original. Si somos inteligentes con el posicionamiento, la transformación y muchos otros trucos, podemos crear muchas formas en CSS con un solo elemento HTML.
Vamos con un ejemplo de clip path
Blend Modes and Filters
La propiedad CSS mix-blend-mode describe cómo el contenido de un elemento debe mezclarse con el contenido del elemento que está tras él y con el fondo del elemento.
La propiedad filter dota de efectos gráficos como el desenfoque o cambio de color en la representación antes de que se muestre el elemento. Los filtros se utilizan comúnmente para ajustar la representación de imágenes, fondos o bordes.
Te dejo unos links donde puedes amplicar estos temas, recuerda que css es un universo completo en el desarrollo de software y saberlo dominar nos hace construir proyectos increibles.