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!
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.
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.
View Transition básica
Descubre cómo hacer que tus páginas cambien de forma suave y atractiva al navegar entre páginas con View Transitions
Forzar herencia en CSS
En CSS, existen una serie de valores que se pueden utilizar en prácticamente cualquier propiedad para forzar a utilizar la herencia. Te explico de cuales se trata.
¿Qué es Browserslist?
Browserslist permite automatizar el grado de compatibilidad de algunas herramientas Javascript/CSS respecto a navegadores antiguos.
Origen y prioridad CSS
Los orígenes de CSS juegan un papel esencial a la hora de establecer la importancia de ese código y la prioridad respecto a otros códigos CSS
Scroll-driven animations
Aprende a crear efectos de animaciones dirigidas por scroll (Scroll Driven Animations) utilizando CSS, sin necesidad de utilizar Javascript.
¿Qué es Lightning CSS?
Lightning CSS es una herramienta ultrarápida (hecha en Rust) para realizar transformaciones de código CSS. Una alternativa a PostCSS.
Open Props: Tokens de diseño
Descubre cómo utilizar Open Props para crear diseños coherentes y escalables con variables CSS como tokens de utilidad.
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.
Elementos flexibles en CSS
Es posible que necesites adaptar o animar elementos flex en CSS. Te explico como hacerlo utilizando flex-grow o flex-shrink.
Vanilla Extract: CSS-in-JS en objetos
La librería Vanilla Extract es una excelente solución para usuarios de Typescript que quieren la misma seguridad de tipos y ventajas de autocompletado en temas relacionados con CSS.
Optimizar animaciones
En este artículo encontrarás algunos consejos para optimizar animaciones CSS de modo que sean más eficientes.
TailwindCSS: Clases de utilidad
Conoce las ventajas y desventajas de utilizar TailwindCSS en tus proyectos web y cómo empezar a utilizarlo de manera efectiva
¿Qué es el modelo de cajas?
Para dominar CSS primero hay que comprender a la perfección el modelo de cajas de CSS. Bordes (border), relleno (padding) y márgenes (margin).
Tipos de animaciones
Antes de comenzar a crear animaciones debemos comprender que tipos de animaciones existen y cuales son sus diferencias. De esa forma sabremos cuál es la que más nos interesa crear.
¿Qué es Sass?
Sass es un preprocesador CSS, es decir, un lenguaje que añade características a CSS, ampliándolo con bucles, funciones y otras funcionalidades.
Perspectivas CSS
Mediante las opciones de perspectiva es posible establecer un punto de fuga en nuestros elementos 3D de CSS
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