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.
¿...o prefieres un roadmap?
¿Ya sabes la teoría? ¡Es hora de ponerse a practicar!
Mediante la función steps() de CSS podemos crear ritmos en intervalos escalonados con la misma duración. ¡Investiga y aprende a utilizarlos!
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.
Mediante el objeto CSSStyleSheet nativo de Javascript podemos crear algo similar a los estilos locales de CSS Modules, pero sin preprocesar.
Los resets CSS son fragmentos de código predefinidos para resetear los estilos CSS que pone por defecto el navegador.
Mediante la regla @scope podemos crear estilos limitando su ámbito, es decir, delimitando la profundidad HTML donde afecta.
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.
La librería ECSStatic proporciona una forma moderna de gestionar el CSS desde Javascript utilizando la sintaxis de string templates.
Aprende todo sobre los estilos en línea de CSS: Cómo aplicarlos, cuando evitarlos, ventajas, desventajas y ejemplos de uso.
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.
El posicionamiento «pegajoso» (position: sticky) es un clon del posicionamiento fijo (fixed), sólo que permite adherirse a una zona en un momento particular.
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.
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.
Es posible activar o desactivar aspectos avanzados relacionados con la tipografía, como ligaduras, variaciones... directamente desde CSS.
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.
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
Mediante la función radial-gradient() de CSS podemos crear gradientes circulares o elípticos con dos o más colores.
Conoce las ventajas y desventajas de utilizar TailwindCSS en tus proyectos web y cómo empezar a utilizarlo de manera efectiva
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.
Mediante las máscaras de CSS podemos definir formas complejas o establecer recortes irregulares sobre elementos, imágenes u otros.
¿Prefieres contenido de video? ¡Echa un vistazo a mi canal!
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