Home / código / CSS3 con jQuery

CSS3 con jQuery

anieto2k publicó recientemente un post de Noupe, donde explicaba como manejar las nuevas hojas de estilo CSS3 con jQuery, muy interesante para los que gusten de programar y emepzar a probar estas nuevas reglas para sus páginas web, enseguida un ejemplo de como se representaría el estilo CSS3 y como en jQuery.

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");
  });
CSS3 con jQuery CSS3 con jQuery Reviewed by Marcos Rivas Rojas on martes, febrero 24, 2009 Rating: 5