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!

css

Transformaciones CSS

CSS ofrece un conjunto de propiedades para realizar transformaciones 2D y 3D, permitiendo realizar modificaciones visuales de diferentes formas.

animaciones

La función steps()

Mediante la función steps() de CSS podemos crear ritmos en intervalos escalonados con la misma duración. ¡Investiga y aprende a utilizarlos!

herramientas css

¿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.

herramientas css

¿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

herramientas css

¿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.

css

Modos de fusión CSS

Los modos de fusión (o blend modes) nos permiten establecer combinaciones de colores entre varios elementos y fusionarlos.

animaciones

Scroll-driven animations

Aprende a crear efectos de animaciones dirigidas por scroll (Scroll Driven Animations) utilizando CSS, sin necesidad de utilizar Javascript.

cascada css

Herencia en CSS

En CSS es muy importante la herencia. Las propiedades CSS se aplican desde arriba hacia abajo, sobreescribiendo las propiedades anteriores.

cascada 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.

herramientas css

Autoprefixer: Prefijos CSS

Plugin de PostCSS que sirve para analizar el código CSS y añadir los vendor prefixes de CSS necesarios para compatibilidad con navegadores antiguos.

css

Scroll suave (Smooth Scroll)

Ciertas propiedades CSS como scroll-behavior y overflow nos permiten modificar el comportamiento de scroll en elementos.

cascada css

Estilos en linea

Aprende todo sobre los estilos en línea de CSS: Cómo aplicarlos, cuando evitarlos, ventajas, desventajas y ejemplos de uso.

cascada css

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.

css

Selectores básicos

CSS es muy potente porque permite seleccionar elementos HTML de una forma muy práctica. Los IDs y las clases son el método más utilizado.

animaciones

¿Qué son las Web Animations?

Las animaciones CSS son muy potentes, pero en ciertos casos nos interesa la flexibilidad de Javascript. Con WebAnimations podemos crear animaciones CSS usando Javascript.

css

Variables de entorno CSS

Las variables de entorno de CSS son un mecanismo mediante el cuál el navegador te proporciona información útil sobre el sistema que utilizas.

animaciones

La función cubic-bezier()

Aprende a utilizar la función cubic-bezier() para darle un toque de personalización a tus transiciones o animaciones, utilizando un ritmo o aceleración suavizada.

herramientas css

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

css

Contorno en tipografías

En ciertas situaciones nos puede interesar añadir un contorno o borde a los textos. Hay formas de hacerlo con CSS, te las explico.

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