Para insertar imágenes codificadas en base64 en el propio CSS el primer paso es realizar una optimización de dicha imagen. Para ello podemos usar cualquier herramienta de edición gráfica, como por ejemplo GIMP. El siguiente paso es obtener la codificación en base64 de nuestra imagen, para lo que usaremos el comando base64 que viene instalado en la mayoría de distribuciones de Linux. El paso final es insertar el texto obtenido en el CSS usando la función url() de la forma: url("data:image/png;base64,XXXXXXXX").

‘background-clip’ es una de esas propiedades que se conocen durante años pero que raramente se usan más allá de alguna pregunta en Stack Overflow. Hasta el año pasado, cuando empecé a crear mi gran colección de controles deslizantes (sliders). Algunos de mis diseños eran complejos y sólo disponía de un elemento por control (que solía ser un input) incluso sin poder usar pseudoelementos. Así que comencé a usar fondos, sombras y bordes, lo que hace que la propiedad ‘background-clip’ sea especialmente útil.

Hasta hace unos años la tarea de realizar una nueva página web implicaba tener que desarrollar una hoja de estilos CSS completamente nueva o realizar amplias modificaciones en una que ya hubiéramos realizado anteriormente en un sitio web similar. Por suerte empezaron a proliferar los frameworks CSS, que son unas hojas de estilo con unos elementos básicos con los que se puede realizar cualquier página web que se nos pueda ocurrir con el mínimo esfuerzo.

Sin complicarse demasiado con la definición técnica de la W3C, una pseudoclase es básicamente un estado fantasma o característica específica de un elemento que puede ser accedido mediante CSS. Los pseudoelementos son como elementos virtuales que pueden ser tratados como elementos HTML normales. La diferencia es que estos no existen en el DOM. En el resto del artículo veremos cómo funcionan y ejemplos de los mismos.