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!
Perspectivas CSS
Mediante las opciones de perspectiva es posible establecer un punto de fuga en nuestros elementos 3D de CSS
La función linear()
Aprende a crear ritmos lineales personalizados con la función linear() de CSS, un nuevo método que permite múltiples fragmentos con diferentes ritmos lineales.
La regla @scope
Mediante la regla @scope podemos crear estilos limitando su ámbito, es decir, delimitando la profundidad HTML donde afecta.
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.
¿Qué son las funciones de tiempo?
Mediante las funciones de tiempo se puede suavizar una transición o animación para que no se realice de forma brusca.
Modo de carga de tipografías
Algunas propiedades avanzadas para gestionar el aspecto de una tipografía o el modo de aparición de la misma.
Líneas con nombre en Grid
Es posible darle un nombre a las líneas divisorias de un grid CSS, es lo que se conoce como líneas nombradas. Veamos como se usan.
Reset CSS
Los resets CSS son fragmentos de código predefinidos para resetear los estilos CSS que pone por defecto el navegador.
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.
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.
La palabra clave !important
Descubre cómo usar la palabra clave !important en CSS para sobrescribir estilos. Aprende su función, ejemplos prácticos y cuándo utilizarla correctamente.
¿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.
Crear líneas de tiempo CSS
Las animaciones dirigidas por scroll son ideales para crear experiencias de usuarios fluídas y agradables a la hora de navegar por un sitio web. ¡Te explico como crearlas con sólo CSS!
La regla @keyframes
La regla @keyframes nos permite definir un conjunto de fotogramas clave para crear una animación reutilizable de forma muy sencilla.
Textos con degradados
En este post veremos como crear textos que, en lugar de un color definido, contengan gradientes o imágenes. Te lo explico paso a paso.
¿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.
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.
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
La propiedad shape-outside
Existen unas propiedades para crear formas flotantes, de manera que el texto se adapte a su forma particular. Te explico como funcionan.
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