La gente de noupe nos muestra un excelente post en el que podemos ver alguna de las propiedades CSS3 que ya tenemos ganas de tener en nuestras manos y las alternativas jQuery con las que podemos obtenerlas actualmente.
1. border-radius
Quizas es la propiedad más nombrada (despues de opacity) de las que están a punto de llegar. Y me parece lógico ya que las soluciones actuales (sin javascript) son engorrosas y desmesuradas. Con jQuery Canvas Rounded Corner podremos mitigar esas ansias de dispone de esta propiedad.
CSS3
#rounded-box {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}jQuery
$('#rounded-box').corners({ radio: 15, borderSize: 2 });2. border-image
Otra propiedad muy solicitada por la comunidad de diseñadores. Para usarla actualmente, tendremos que recurrir a jQuery borderImage.js.
CSS3
.button{
-moz-border-image: url("media/button1.png") 0 5;
-webkit-border-image: url("media/butto1.png") 0 5;
}jQuery
$('#buttons a, .button a').borderImage('url("media/button0.png") 0 5', 'media/button1.png', 'media/button2.png')3.Multiple Backgrounds
Sin duda una propiedad que dará mucho juego y que ofrecerá la posibilidad de dejar de ver el <body /> como una pizarra en la que pintamos. Por el momento tenemos que conformarnos con jQuery MultipleBackground.
CSS3
#multiple-background-box {
background: url(top-bg.gif) top left no-repeat,
url(bottom-bg.gif) bottom left no-repeat,
url(middle-bg.gif) left repeat-y;
padding: 20px;
}jQuery
$(function(){
$('.marioBox').add_layer("#A4D3FF");
$('.marioBox').add_layer("url('/images/mario_floor.gif') no-repeat bottom");
$('.marioBox').add_layer("url('/images/mario_bush.gif') no-repeat 10px 167px");
$('.marioBox').add_layer("url('/images/mario_pipe.gif') no-repeat 180px 183px");
$('.marioBox').add_layer("url('/images/mario_cloud.gif') no-repeat 90px 93px");
$('.marioBox').add_layer("url('/images/mario_cloud.gif') no-repeat 180px 53px");
$('.marioBox').add_layer("url('/images/mario_cloud.gif') no-repeat 20px 73px");
$('.marioBox').add_layer("url('/images/goomba.gif') no-repeat 70px 214px");
$('.marioBox').add_layer("url('/images/mario.gif') no-repeat 180px 156px");
});4. Box shadow y text-shadow
Se acabó el usar <div /> flotantes colocados debajo de otro para obtener una sombra, con la llegada de CSS3 esto será cosa del pasado… pero por el momento debemos resignarno y usar DropShadow o Text-Shadow para IE para conseguirlo.
CSS3
h3 { text-shadow: 2px 2px 2px #333; }jQuery
$("h3").dropShadow({left: 2, top: 2, blur: 1, color: "#03f", swap: true});5.Opacity
La propiedad CSS3 por excelencia, sin duda es la más mediática de todas las propiedades y con la que se han conseguido maravillas como Lightbox. De ahí que jQuery, sea capaz de usarla nativamente. Aunque plugins como Gradient permite más juego.
CSS3
div.L1 { background:#036; opacity:0.2; width:575px; height:20px; }
div.L2 { background:#036; opacity:0.4; width:575px; height:20px; }
div.L3 { background:#036; opacity:0.6; width:575px; height:20px; }
div.L4 { background:#036; opacity:0.8; width:575px; height:20px; }
div.L5 { background:#036; opacity:1.0; width:575px; height:20px; }jQuery
$('#main').gradient({
from: 'fefefe',
to: 'cddcc3',
direction: 'horizontal'
});
10 comentarios, 1 referencias
+
#