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!
¿Qué son las clases de utilidad?
Aprovecha las clases de utilidad para definir mejor tu CSS y escribir código mucho más mantenible y reutilizable
La funcion attr()
Aprende a utilizar la función CSS attr() que permite obtener valores de atributos de etiquetas HTML y reutilizarlas en una página.
Redondeos y módulos en CSS
Las funciones escalonadas de CSS permiten redondear números, calcular módulo o resto, sin necesidad de utilizar Javascript.
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.
¿Qué es Browserslist?
Browserslist permite automatizar el grado de compatibilidad de algunas herramientas Javascript/CSS respecto a navegadores antiguos.
Pseudoelementos: ¿Qué son?
Los pseudoelementos CSS permiten aplicar estilos que añaden elementos (o estilos) que realmente no existen originalmente en el documento HTML.
CSS Nesting nativo
El anidamiento CSS o CSS Nesting de forma nativa está comenzando a llegar a los navegadores. Descubre como funciona.
Transiciones CSS
Mediante las transiciones CSS podemos suavizar cambios repentinos de estilo para que se realicen de forma gradual y suave.
La regla @scope
Mediante la regla @scope podemos crear estilos limitando su ámbito, es decir, delimitando la profundidad HTML donde afecta.
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.
Gradientes radiales
Mediante la función radial-gradient() de CSS podemos crear gradientes circulares o elípticos con dos o más colores.
Herencia en CSS
En CSS es muy importante la herencia. Las propiedades CSS se aplican desde arriba hacia abajo, sobreescribiendo las propiedades anteriores.
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.
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.
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.
¿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é es Lightning CSS?
Lightning CSS es una herramienta ultrarápida (hecha en Rust) para realizar transformaciones de código CSS. Una alternativa a PostCSS.
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
CSS Nesting: CSS anidado
Una característica futura de CSS es la posibilidad de anidar bloques de CSS uno dentro de otro. Con PostCSS podemos utilizarlo hoy mismo.
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