CSS: Lo fabuloso que puede ser y no lo sabias

Este articulo fue encontrado mientras buscábamos hacks para CSS, y realmente fue difícil de darse cuenta de que este lenguaje de diseño había evolucionado tanto.

Hay reglas que nos permiten crear diseños maravillosos, y eso lo podemos demostrar también con un artículo que escribimos hace ya algún tiempo sobre acciones que se podían hacer solo javascript.

1. ¿Qué es CSS?

CSS es un lenguaje informático. No es un lenguaje de programación, sino un lenguaje de estilos. O para explicarlo mejor: un lenguaje para diseñar. Comenzar a aprenderlo es fácil, pero como toda tecnología las partes avanzadas pueden ser muy duras de dominar.

La gente que apenas conoce CSS cree que es así:

body {
  background  : red;
  color       : white;
  margin      : 10px;
  font-family : Arial;
  font-size   : 18px;
}

A eso le llamo, nivel baby. Porque CSS en producción se parece más a esto:

.banner {
  --image        : url(/img/banner-bg.jpg);
  --color        : hsla(200,90%,60%,.9);
  --radius       : 1200px;
  --size         : 100%;
  --padding      : 2em;
  padding        : var(--padding) 0;
  background     : radial-gradient(circle var(--radius) at var(--size) var(--size), transparent calc(var(--size) * 0.5), var(--color) calc(var(--size) * 0.5)), var(--image) no-repeat center right / auto var(--size);
}

2. Condicionales

CSS tiene condicionales, aunque la sintaxis no se parece a un if(condicion). Las condicionales más conocidas son las Media Queries. Estas definen una condición para la pantalla (tamaño, resolución, proporción, etc) y aplica los estilos contenidos en ella solo si esta condición se cumple.

@media screen and (min-width: 64em) {
  body {
    background: red;
  }
}

Ejemplo:

3. Variables

CSS tiene variables (también conocidas como custom properties) y pueden usarse igual que en un lenguaje de programación: para almacenar valores y luego invocarlos y/o utilizarlos. También podemos redefinir las variables, hacer cálculos, etc.

:root {
  --color: red;
}

body {
  color: var(--color);
}

Ejemplo en CodePen:

4. Ciclos

Aunque no pose estructuras como for o while, sí permite recorrer listas de elementos. En realidad un simple selector ya es un ciclo pues selecciona a todos los elementos del DOM que tengan dicho selector. Sin embargo, podemos ir más allá y usar pseudoclases como :nth-child() o :nth-of-type() para recorrer listas de elementos con criterios más personalizados.

// aqui selecciona el segundo elemento 
// o hijo de la clase ITEM
.item:nth-child(2) {
  background: yellow;
}

// aqui selecciona un elemento o hijo 
// dejando uno de la clase ITEM
.item:nth-child(2n + 1) {
  background: yellow;
}

// aqui selecciona el segundo elemento
// o hijo de la clase ITEM, por tipo
.item:nth-of-type(2) {
  background: yellow;
}

// aqui selecciona el elemento o hijo
// especificado de la clase ITEM, por tipo
// pero de manera descendente 
.item:nth-last-of-type(2) {
  background: yellow;
}

Un ejemplo, que pueden modificar y probar lo antes mencionado

5. Recortes

Ya no necesitamos Photoshop para recortar una imagen. Con la propiedad clip-path podemos dibujar figuras que recortan la imagen. Lo mejor es que podemos animar esta propiedad y crear efectos muy vistosos.

.img {
  clip-path: circle(100px at center)
}

6. Dibujos

Si bien los dibujos con CSS no son utilizables en producción (en proyectos reales) es una costumbre de la comunidad retar nuestras capacidades y hacer dibujos lo más detallados posibles.

Ejemplo 01: UN JOYPAD DE SNES

EJEMPLO 02: Cuadro de una Pintura de Francine

7. 3D

CSS es un lenguaje para diseñar. Pero no estamos limitados a diseñar en 2D sino que podemos diseñar también en 3D utilizando los tres ejes x, y y z.

Ejemplo:

8. Contadores

Con CSS podemos crear contadores que crecen o decrecen ya sea en elementos del DOM (para enumerar una lista por ejemplo) o por animaciones.

9. Modos de fusión

Los modos de fusión calculan una imagen resultante a partir de dos imágenes previas. Hasta ahora si querias utilizarlos necesitabas un programa como Photoshop. Pero ya podemos hacerlo con CSS y crear incluso filtros como los de Instagram.

10. Formas

Puedes crear formas alrededor de elementos flotados para que el texto alrededor se acomode a esa forma. Algo que solo podíamos hacer con programas como InDesign.

11. CSS Grid en lugar de position

CSS Grid nos permite dividir un área en filas y columnas y colocar los elementos en cualquier lugar dentro de la rejilla creada. Así que layouts que solo eran posibles con position ahora podemos crearlos con CSS Grid.

Conclusión

CSS es un lenguaje muy amplio y con una complejidad creciente a medida que empiezas a profundizar en él. Y lo más importante, gracias a CSS la web es hermosa. ¿Te imaginas un mundo sin CSS? ¿Páginas y aplicaciones web monócromas, aburridas, feas? Nadie merece un mundo feo, sin alegria. Nadie merece un mundo sin CSS.

Fuente: Edteam Blog