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!

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!

animaciones

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.

herramientas css

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.

cascada css

Reset CSS

Los resets CSS son fragmentos de código predefinidos para resetear los estilos CSS que pone por defecto el navegador.

cascada css

La regla @scope

Mediante la regla @scope podemos crear estilos limitando su ámbito, es decir, delimitando la profundidad HTML donde afecta.

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.

herramientas css

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.

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.

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

Posicionamiento «sticky»

El posicionamiento «pegajoso» (position: sticky) es un clon del posicionamiento fijo (fixed), sólo que permite adherirse a una zona en un momento particular.

cascada css

Capas de cascada: regla @layer

La regla @layer se puede utilizar para crear capas con código CSS de forma independiente. Posteriormente se pueden funcionar, siguiendo un orden específico.

cascada css

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.

css

Características personalizadas

Es posible activar o desactivar aspectos avanzados relacionados con la tipografía, como ligaduras, variaciones... directamente desde CSS.

herramientas css

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.

cascada css

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

css

Gradientes radiales

Mediante la función radial-gradient() de CSS podemos crear gradientes circulares o elípticos con dos o más colores.

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

cascada css

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.

css

Máscaras en CSS

Mediante las máscaras de CSS podemos definir formas complejas o establecer recortes irregulares sobre elementos, imágenes u otros.

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