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!
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.
La función path()
Mediante la función path() puedes crear trayectos SVG utilizando CSS, sin necesidad de utilizar SVG o HTML. En este artículo explicamos la sintaxis para utilizarla y algunos ejemplos.
Reset CSS
Los resets CSS son fragmentos de código predefinidos para resetear los estilos CSS que pone por defecto el navegador.
¿Qué es Browserslist?
Browserslist permite automatizar el grado de compatibilidad de algunas herramientas Javascript/CSS respecto a navegadores antiguos.
Estilos en linea
Aprende todo sobre los estilos en línea de CSS: Cómo aplicarlos, cuando evitarlos, ventajas, desventajas y ejemplos de uso.
Alinear y centrar con Flex CSS
¿Necesitas alinear elementos con CSS? ¿Distribuirlos? ¿Centrarlos? Aquí te explico como hacerlo con CSS para no olvidarte más.
La regla @scope
Mediante la regla @scope podemos crear estilos limitando su ámbito, es decir, delimitando la profundidad HTML donde afecta.
La función ray()
Mediante la función ray() podemos establecer trayectos que sean el radio de un círculo, es decir, una pequeña porción del círculo. Te explico como utilizarlo.
Posicionamiento relativo
El posicionamiento relativo (position: relative) es una forma de mover elementos particulares de forma muy específica. Aquí te explico como funciona.
¿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.
Códigos de colores
Propiedades relacionadas con los colores y los fondos que se pueden aplicar en una página web.
Especificidad CSS
La especificidad CSS es el mecanismo del navegador para detectar a que elementos hay que dar estilo en caso de conflicto o ambigüedad.
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.
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.
¿Qué es CSS-in-JS?
En muchas ocasiones, cuando desarrollamos una aplicación web, trabajar con CSS desde Javascript puede llegar a ser más apropiado. Veamos que formas tenemos a nuestra disposición.
Opciones de las animaciones
Una animación WebAnimation es una animación que se ejecuta en el navegador. Las opciones nos permiten personalizar la animación.
La propiedad display multi-keyword
Mediante la propiedad display moderna de CSS podemos utilizar dos valores para indicar como debe renderizarse un elemento y sus elementos hijos.
La regla @starting-style
Mediante la regla @starting-style puedes crear transiciones iniciales que se aplican antes de que cargue los estilos de la página o al insertar un elemento en la página.
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
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