No hay duda de que CSS3 llegó para quedarse: es moderno, elegante y finalmente entrega control total a los estilos. Cada vez lo utilizo más, y me encanta tener que pensar menos en solucionar problemas y esforzarme más en dar el formato que realmente quiero.
Paralelamente, se siente cada vez más fuerte el fervor por dejar de lado ese infame IE6, el último remanente de la guerra de los browsers. Ese que nos mantiene en la edad media, y no nos deja pasar finalmente a la ilustración… y disfrutar a plenitud de CSS3 (Sí, lo sé. Además están IE7 e IE8, pero algo es algo).
Actualmente existen algunas propiedades que puedes ya utilizar en los browsers modernos, lo que hará que tu diseño se distinga del resto. A continuación, las más atractivas:
Bordes redondos
Ya no más cortar en Photoshop esos bordes y tratar de hacerlos calzar; ahora puedes crearlos directamente con CSS3:
border-radius: 10px;Ahora, para que Firefox y Safari/Chrome lo reconozcan, debes ayudarlos agregando lo siguiente:
-moz-border-radius: 10px; /* para Firefox */
-webkit-border-radius: 10px; /* Para Safari/Chrome */Caja aplicada con border-radius
Soportado por Safari/Chrome y Firefox 3.1+.
Textos con sombra
Con text-shadow puedes darle sombras a tus tipografías, haciendo tus títulos más atractivos:
text-shadow: 2px 2px 5px #000;Caja aplicada con text-shadow
Soportado por Firefox 3.5+, Safari/Chrome y Opera 9.5+.
Cajas con sombras
¡Genial! Además, puedes darle sombras a cualquier elemento HTML en bloque… ¡incluso si ya lo definiste con bordes redondos!
box-shadow: #666 0 0 10px;
-webkit-box-shadow: #666 0 0 10px; /* para Firefox */
-moz-box-shadow: #666 0 0 10px; /* Para Safari/Chrome */Caja aplicada con border-radius y box-shadow
Soportado por Safari/Chrome y Firefox 3.5+.
Transparencias
Las puedes definir de 2 maneras: como color utilizando RGBa o como opacidad del elemento completo, mediante opacity:
background: rgba(0,0,0,0.5);Caja aplicada con background RGBa al 0.5
opacity: 0.5;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); /* para IE8 */
filter: alpha(opacity=50); /* para IE6-7 *Caja aplicada con opacity al 0.5
Soportado por Safari/Chrome, Firefox 3.5+, Opera e IE7+ (parcialmente).
Comentarios
Muy bièn, pero mirà aquì tienes un CSS3 Transition Tutorial – Menu with Slide-Effect ( Apple-Style ).
Bordas, rgba -> r(red)g(green)b(blue)a(alpha) e background com várias imagens são muito úteis.
ahhh como eu sonho em poder usar isso no dia a dia!
Estou em SP faz mais de 1 semana e para minha tristesa tenho(obrigatoriamente) que testar com IE6 tudo q é feito.. mas é bom brincar com o css3 sim
Todo gran poder implica una gran responsabilidad, Peter. 😛
Esta buenísimo todo esto, pero en malas manos puede ser terribleeeeee!!
Yo por ahora me mantengo con el CSS2, como mucho, mis clientes siguen pidiendo que se vea en el IE6 y sus hermanitos.
Webstandard-Blog: danke shon, sehr schön Ihr Menü in CSS3 😀
Leko: adoro RGBa, e estou usando ele bastante! Mais como tenho comentado antes, agora basta com q IE6 degrade o suficiente e sou feliz.
Rauto: concuerdo q puede ser riesgoso, pero porfin los estilos a los estilos!
Grüße / Abraços / Saludos a todos.
mmm que raro no se ven los bordes redondeados en ie XD
@Jorge: Muchas gracìas, que te gustas el menu ;o) saludos de Berlin
Webstandard-Blog: hey, estuve en berlin y me encantó! pretendo volver muy pronto.
Me gusta el resumen.
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); WTF!!!
se que es un hack, pero igualmente!!!
Excelente!!
Entraba aquí a comentar que en Chrome no funciona, aunque en realidad como lo estaba leyendo desde el Google Reader, es exactamente ahí donde no funciona, pero en en esta página están bien.
Saludos!!
Aguante webkit. Los css transitions y animations rockean.
Cuando se pongan de acuerdo los navegadores, trabajaremos menos y como indicas, saldremos de la edad de piedra
Pero el tema es que el CSS3 en algunas sentenicias no validan por lw W3C o aun tenemos que esperar a que se estandarise mas el tema, ojala muera pronto IE6, IE7
Pues… muy bueno esto del CSS3, tengo dos observaciones que hacer, y me gustaria que si alguien tiene la respuesta me lo comunicara.
1. Los atributos CSS3 no se aprecian en IE, solo se ven en otros exploradores, sinembargo e escuchado que existe un plugin que hace compatible estas sintaxis con IE y con otros exploradores, alguien sabe cual es??
2. En esta pagina, tienes un efecto muy bueno para el menu que tienes de “LINKS”, sinembargo nuevamente en IE no se ve, por el contrario, el texto se ve distorcionado y esto es algo que e observado que sucede con cualquier texto que se pone mediante Javascript. Alguna solucion???
Ivan: Sobre tu primera pregunta, si existen librerias q ayudan a q los browsers malitos se comporten mejor en cuanto a los webestandards, por ej el mas utilizado es Modernizr y el nuevo Boilerplate..
Ahora, sobre tu segunda pregunta si efectivamente IE no hace como deberia ser su trabajo con CSS, HTML ni JS. Pero eso no me impide de utilizar tecnologias q degraden graciosamente en IE; es una postura y opcion q tengo desde hace ya un tiempo. Para solucionar, dependiendo del problema:
– utilizar un buen CSS Reseter
– Utilizar librerias q sean crossbrowser (Como jQuery, Mootools, Script.aculo.us).
Exito!
[…] en estas nuevas propiedades que entrega Webkit, sino que además en las que CSS3 trae como box-shadow, rgba y […]