Mar 6, 2010
Variables en CSS3
Como sabrán, hace un tiempo los mejores browsers (firefox, safari…etc) todos menos IE8 (que tampoco forma parte de los mejores browsers) ya dan soporte a css3, lo cual significa que aunque un 70% use explorer, ya se pueden empezar a hacer pruebas con css3, que realmente nos van a simplificar la vida a la hora de maquetar, o codear xhtml + css.
En esta oportunidad, voy a hablar de declarar las variables en css3.
Bueno, esto es algo muy sencillo de hacer, y realmente para todos los diseñadores que se dan maña con el código va a ser de mucha utilidad, como por ejemplo, definir colores corporativos de entrada, y despues usarlos siempre invocando a la variable.
Ni bien arrancamos el código CSS declaramos las siguientes variables:
@variables {
colorPrincipal: #3366cc;
colorSecundario: #cc6600;
}
Luego, para invocarlas, es muy simple:
.header {
background-color: var(colorPrincipal);
}
h1,h2,h3{
color: var(colorSecundario);
}
Si hacen esta prueba en un simple html veran que en los browsers mas modernos ya esta funcionando.
Tips relacionados:
Bueno, sin duda un gran tip y que ya habia visto.
Si bien no soy maquetador, si me interesa mucho la web “nueva”, es decir html5 y todo lo que lo rodea.
Estube viendo mucho sobre JavaScript y html5 (se me hace agua la boca con los canvas…. cannnnvasssss).
Espero poder dar algun aporte al site, y obviamente voy a poner el link en algunos de mis sites para darle un poco de PR.
Saludos
Gracias Lortmorris, la idea es ir aportando cosas, pequeños tips para una web mejor! el próximo post, voy a hablar de animaciones / transiciones en css. algo muy loco y que mejora notablemente la experiencia de usuario.
Twitter: demianr85
says:
en webkit hay que usar -webkit-variables() y -webkit-var() asi que hay que de declararlas 2 veces, una para cada browser, una boludez total por el momento.
Twitter: exos
says:
Y bueno todavía es un draft, aunque si es una boludez realmente