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!
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!
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.
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.
Reset CSS
Los resets CSS son fragmentos de código predefinidos para resetear los estilos CSS que pone por defecto el navegador.
La regla @scope
Mediante la regla @scope podemos crear estilos limitando su ámbito, es decir, delimitando la profundidad HTML donde afecta.
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.
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.
Estilos en linea
Aprende todo sobre los estilos en línea de CSS: Cómo aplicarlos, cuando evitarlos, ventajas, desventajas y ejemplos de uso.
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.
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.
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.
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.
Características personalizadas
Es posible activar o desactivar aspectos avanzados relacionados con la tipografía, como ligaduras, variaciones... directamente desde 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.
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
Gradientes radiales
Mediante la función radial-gradient() de CSS podemos crear gradientes circulares o elípticos con dos o más colores.
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
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.
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