Lenguaje CSS
CSS es un lenguaje de estilos para dotar de apariencia y aspecto visual a una página o sitio web (entre otras cosas). También es conocido como el mayor enemigo de los programadores backend. En esta página te ayudo a aprender a dominarlo.
Comienza a aprender
¿...o prefieres un roadmap?
Comienza a practicar
¿Ya sabes la teoría? ¡Es hora de ponerse a practicar!
Estilos con baja especificidad
Podemos utilizar el selector combinador :where() de CSS para crear selectores con baja especificidad que nos permitan definir estilos base sobreescribibles.
Reset CSS
Los resets CSS son fragmentos de código predefinidos para resetear los estilos CSS que pone por defecto el navegador.
Shadow DOM declarativo
Con Shadow DOM declarativo se pueden crear zonas de HTML que estén aisladas del resto del documento y por lo tanto no afecte el CSS externo.
Scroll-driven animations
Aprende a crear efectos de animaciones dirigidas por scroll (Scroll Driven Animations) utilizando CSS, sin necesidad de utilizar Javascript.
La regla @scope
Mediante la regla @scope podemos crear estilos limitando su ámbito, es decir, delimitando la profundidad HTML donde afecta.
¿Qué herramienta escoger?
La regla @keyframes
La regla @keyframes nos permite definir un conjunto de fotogramas clave para crear una animación reutilizable de forma muy sencilla.
¿Qué es el alcance en CSS?
Una característica deseable es poder limitar el alcance de la aplicación de ciertos estilos CSS. En este artículo te explico la problemática y porque es interesante aplicar esta técnica.
Animando spritesheets CSS
Aprende a crear animaciones en CSS utilizando spritesheets y la función steps(). Un ejemplo práctico con el protagonista del juego Monkey Island y The Day of the Tentacle.
Selectores de atributos
Mediante los atributos CSS se permite aplicar estilos a elementos HTML dependiendo del contenido de sus atributos HTML.
¿Qué es Browserslist?
Browserslist permite automatizar el grado de compatibilidad de algunas herramientas Javascript/CSS respecto a navegadores antiguos.
¿Qué es PostCSS?
PostCSS se define como un preprocesador, transformador y postprocesador de CSS construido con Javascript, pero... ¿Qué es realmente? Te lo explico.
Modos de fusión CSS
Los modos de fusión (o blend modes) nos permiten establecer combinaciones de colores entre varios elementos y fusionarlos.
Contenido generado en CSS
Mediante los pseudoelementos ::after y ::before puedes crear y estilar contenido desde CSS, sin que exista en HTML.
CSS Modules: Estilos modulares
Una forma simple y cómoda de trabajar con CSS en aplicaciones web es utilizar módulos CSS preprocesados. Simplemente añadimos la extensión .module.css a nuestros ficheros y nos aseguramos de estar usando PostCSS. Te lo explico.
Posicionamiento absoluto
El posicionamiento absoluto (position: absolute) es una forma de colocar elementos particulares respecto a un contenedor particular. Te explico como funciona
Control de líneas de tiempo
Si ya conoces las animaciones dirigidas por scroll, con estas propiedades podrás ajustar algunos detalles de las mismas para controlarlas mejor. Te las explico con ejemplos.
¿Qué son las transiciones?
Antes de comenzar con las transiciones CSS, es adecuado conocer una serie de conceptos que nos harán entender mejor las animaciones y transiciones.
Scoping en Javascript
En la industria Javascript y en los frameworks JS como React, Vue, Angular o Svelte se han creado formas concretas de aislar el código CSS para que no afecte a ciertas partes. Te explico las más populares.
Videos
¿Prefieres contenido de video? ¡Echa un vistazo a mi canal!
¿Quién soy yo?
Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.
Puedes encontrar más sobre mi en Manz.dev