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!
Herencia en CSS
En CSS es muy importante la herencia. Las propiedades CSS se aplican desde arriba hacia abajo, sobreescribiendo las propiedades anteriores.
¿Qué es la cascada CSS?
La cascada CSS es el conjunto de características que hacen funcionar a CSS en un navegador. Conocer como funcionan es aprender el funcionamiento de CSS.
¿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.
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.
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.
¿Qué es CSS-in-JS?
En muchas ocasiones, cuando desarrollamos una aplicación web, trabajar con CSS desde Javascript puede llegar a ser más apropiado. Veamos que formas tenemos a nuestra disposición.
CSSStyleSheet: Módulos CSS nativos
Mediante el objeto CSSStyleSheet nativo de Javascript podemos crear algo similar a los estilos locales de CSS Modules, pero sin preprocesar.
Combinadores
Los selectores CSS avanzados (combinadores CSS) permiten realizar tareas más específicas e incluso contabilizar o seleccionar elementos por su posición.
View Transition personalizada
Descubre cómo personalizar tus View Transitions con Javascript y CSS para mejorar la experiencia del usuario.
ECSStatic: CSS-in-JS en templates
La librería ECSStatic proporciona una forma moderna de gestionar el CSS desde Javascript utilizando la sintaxis de string templates.
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
La función view() y view-timeline
Mediante view() y view-timeline podemos crear animaciones dirigidas por scroll que actúan sólo en la región visible del navegador, ideal para crear vistosos efectos.
¿Qué son las View Transition?
Las View Transition son un nuevo sistema de transición animada entre páginas que hace que el cambio de una a otra sea mucho más suave, sútil y agradable visualmente.
¿Qué son los trayectos animados?
Mediante una combinación de HTML, CSS y detalles opcionales de SVG, podemos crear trayectos animados. Te explico como funcionan.
Importaciones: regla @import
La regla CSS @import permite incluir el código CSS de otro fichero externo, realizando una petición para descargarlo desde el cliente.
Cursor del ratón
Es posible modificar ciertos detalles del ratón del usuario y su interacción con una página web mediante CSS.
Multi-columnas CSS
Las multicolumnas son una forma de dividir el contenido de un elemento en el número de columnas que desees, distribuyendo en grupos el contenido.
La función ray()
Mediante la función ray() podemos establecer trayectos que sean el radio de un círculo, es decir, una pequeña porción del círculo. Te explico como utilizarlo.
Composición de animaciones
Aprende a combinar múltiples animaciones utilizando la propiedad animation-composition en CSS, modificando la forma en que se mezclan diferentes animaciones.
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