Álvaro Felipe
https://app.ed.team/cursos/variables-css?46
Variables CSS
¡CSS al fin tiene variables de forma nativa! ¡Y con soporte total de los navegadores!
En este minicurso te enseñaré los trucos y tips que necesitas saber para usar las variables CSS como un pro. Porque no basta declararlas y luego invocarlas. Podemos redefinirlas, aprovechar su herencia o su cascada, manipularlas con JavaScript, crear templates, aprovecharlas en Responsive Web Design, utilizarlas en conjunto con Sass y un largo etcétera.
A través de teoría y ejemplos este minicurso hará que empieces a usar las variables CSS sin miedo y en todos tus proyectos hoy mismo.
1. ¿Qué son las variables CSS?
- Definición
- Invocación
- Cuando usarlas y cuando no
2. Scope
- Scope de bloque vs Scope de DOM
- Redefinir variables con cascada
- Variables CSS desde varios archivos
- Debug desde el navegador
- Variables CSS inline
3. Variables CSS vs variables Sass
- Interpolación
- Scope
- Operaciones y cálculos
- En que casos usar CSS y en qué casos usar Sass
4. Variables CSS en Responsive Web Design
- Aprovechar la cascada en media queries
- Ejercicio: tipografías rwd
- Ejercicio: columnas rwd
5. Obtener y manipular variables CSS con JavaScript
- CSSOM
- Estilos computados en root y en elementos
- Setear variables CSS
6. Ejercicio: Indicador de scroll Ver gratis
- Leer scroll con JavaScript
- Modificar variables según la posición del scroll
7. Ejercicio: selector de color RGB
- Manipular colores con variables CSS
- Setear variables css con inputs de HTML
8. Variables CSS en variaciones de componentes
- Buenas prácticas para variaciones
- Crear variaciones de botones
- Crear variaciones de tarjetas de productos
9. Crear temas con variables CSS
- Buenas prácticas: Separar estilos de layout de estilos de temas
- Crear temas con variables CSS
- Crear objetos javascript para almacenar temas CSS
- Crear selector de tema para que el usuario escoja
¿Por qué estudiar en EDteam?
Profesores reales
Somos la única plataforma con profesores reales con años de experiencia en aulas.
Aprende desde cero
Si quieres aprender algo nuevo, sin conocimientos previos, no hay mejor opción en español que EDteam.
Proyecto de fin de curso
Creamos el concepto de proyecto de fin de curso que se ha puesto de moda en todas las plataformas online.
Sin mensualidades
Líbrate de las ataduras. Paga solo lo que necesites aprender y estudiálo a tu ritmo y con acceso de por vida.
Secuencia de aprendizaje
Cursos desde cero que continuan con cursos avanzados para que aprendas en orden y sin perderte.
Clases bonus gratuitas
Accede a los EDtaller Premium, clases extra de todos los cursos (incluso de los que no hayas comprado) 100% gratis.
asd123
0
15
Variables CSS
Profesor
Comprar $
Acceso de por vida a este curso
Suscribirse $ 30 USD / mes Acceso a todos los cursos de EDteamMedios de pago
Acceso en segundos
Acceso en 24h