Lo que no sabes de CSS

En este artículo te mostraré cosas increíbles que jamás imaginaste que CSS era capaz de hacer.

Aunque me gusta y disfruto programar, CSS sigue siendo mi lenguaje favorito. Seguramente porque mi perfil es más ligado al diseño que me gusta trabajar con formas y colores antes que con números y operaciones. Sin embargo me entristece encontrar a gente que menosprecia este lenguaje. Y lo peor ¡sin conocerlo! Así que preparé una charla titulada Lo que no sabes de CSS para el EDcamp Cochabamba 2018 y este artículo es una adaptación en la que incluyo los links a los ejemplos y a los slides.

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 de CSS son las Media Queries. Estas definen una condicion 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:

See the Pen Media Queries CSS by Alvaro Felipe (@AlvaroFelipe) on CodePen.

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. También podemos redefinir las variables, hacer cálculos, etc.

:root {
  --color: red;
}

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

Ejemplo:

See the Pen Variables CSS by Alvaro Felipe (@AlvaroFelipe) on CodePen.

4. Ciclos

Aunque no pose estruturas como for o while CSS 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.

.item:nth-child(2n + 1) {
  background: yellow;
}

Ejemplo:

See the Pen Loops CSS by Alvaro Felipe (@AlvaroFelipe) on CodePen.

5. Recortes

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

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

Ejemplo:

Ejemplo:

See the Pen Clip Path by Alvaro Felipe (@AlvaroFelipe) on CodePen.

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.

Ejemplos:

Francine

See the Pen SNES Joypad by Alvaro Felipe (@AlvaroFelipe) on CodePen.

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:

See the Pen 3D Cube by Alvaro Felipe (@AlvaroFelipe) on CodePen.

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.

Ejemplo:

See the Pen CSS Only Counter by Alvaro Felipe (@AlvaroFelipe) on CodePen.

9. Modos de fusión

Los modos de fusión calculan una imagen resultante a partir de dos imagenes 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.

Ejemplo

See the Pen CSS blend modes by Alvaro Felipe (@AlvaroFelipe) on CodePen.

10. Formas

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

Ejemplo:

See the Pen CSS Shapes by Alvaro Felipe (@AlvaroFelipe) on CodePen.

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.

Ejemplo:

See the Pen CSS Grid Position by Alvaro Felipe (@AlvaroFelipe) on CodePen.

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.

Video de la charla:

Sigue leyendo