Mar
7

Técnicas CSS3 que podemos conseguir con jQuery

By Pirata21  //  jquery, utils  //  No Comments

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'
	});

Author: Martin Prado

Martin Prado has written 54 articles for us.

Leave a comment