Buenas tardes!! Como ven sigo experimentando y haciendo plugins para JQuery.
Hoy se me dio por hacer uno bastante gracioso basado en las explicaciones de lanrat acerca de como construir un cubo usando las nuevas propiedades CSS.
Su utilización es muy sencilla, tan solo necesitamos 3 objetos ( las caras visibles del cubo) dentro de un objeto contenedor. Dichos objetos pueden ser links , imágenes, otros divs, etc
1 2 3 4 5 | <div class="cube"> <div><img src="1.jpg" /></div> <div><img src="2.jpg" /></div> <div><img src="3.jpg" /></div> </div> |
Una vez que tenemos nuestra estructura HTML armada debemos aplicar el plugin de la siguiente forma:
1 2 3 4 5 6 7 8 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.jcubeit.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.cube').JcubeiT(); }); </script> |
Y voila!! Tendremos un cubo perfecto con el cual podremos hacer un poco más original nuestros diseños.
El plugin posee algunos valores por defecto que se pueden cambiar pasando opciones.
Podemos cambiar estos valores pasando las opciones como se suele hacer en JQuery
1 2 3 4 5 | var opciones={ size:'100px' , border: false}; $('.cube').JcubeiT(opciones); //o simplemente $('.cube').JcubeiT({ size:'100px' , border: false}); |
Jugando con las opciones podremos crear por ejemplo una barra de menu más original
Pueden ver el ejemplo online o descargarse el código desde la página oficial de JQuery
Hello!As you see im still experiencing and doing plugins for JQuery
Today I did a pretty funny one based on the explanations of lanrat about how to build a cube using new CSS properties.
Its use is very simple, you only need 3 objects (the visible faces of the cube) inside of a container object. Such objects could be links, images, other divs, etc.
1 2 3 4 5 | <div class="cube"> <div><img src="1.jpg" /></div> <div><img src="2.jpg" /></div> <div><img src="3.jpg" /></div> </div> |
Once we have our HTML structure we have to apply the plugin like this:
1 2 3 4 5 6 7 8 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.jcubeit.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.cube').JcubeiT(); }); </script> |
And voila! We will have a perfect cube to be a little more original in our designs.
The plugin has some defaults values that can be changed via the options var.
We may change these values from the options as is usually done in JQuery
1 2 3 4 5 | var opciones={ size:'100px' , border: false}; $('.cube').JcubeiT(opciones); //or just $('.cube').JcubeiT({ size:'100px' , border: false}); |
Playing with the options we can create for example a more original menu bar
You can check the online demo or download the plugin from JQuery
Hola a todos! Últimamente empieza a sonar más fuerte HTML5 y CSS3 , a medida que los navegadores se hacen más compatibles con estas nuevas tecnologías, así que hoy pensé en traerles un par de «trucos» que pueden realizar con CSS3 y que hasta ahora solo era posible con Javascript o imágenes.
Hace un tiempito largo explique como redondear las esquinas de un DIV con el Plugin de JQuery JQuery.corners.
Hoy les explico lo mismo tan solo usando CSS3.
1 | <div class="rounded"> Este es un ejemplo para http://masquewordpress.com</div> |
Dado un div cualquiera aplicamos la propiedad border-radius
1 2 3 4 5 | .rounded{ border-radius:7px; -moz-border-radius:7px; //Firefox -webkit-border-radius:7px; //Safari y navegadores que usen WebKit } |
Utilizando el ejemplo anterior vamos a aplicarle sombras al DIV y luego un degradado. Aunque en mi ejemplo utilizo DIVS cabe decir que se puede aplicar a otros objetos como botones y crear efectos muy buenos. Pueden ver un ejemplo de botones con degradado y sombras aquí.
Aplicando sombras al DIV y letras
1 2 3 4 5 6 7 8 9 10 | .rounded{ border-radius:7px; -moz-border-radius:7px; //Firefox -webkit-border-radius:7px; //Safari y navegadores que usen WebKit text-shadow: #fff 0px 1px 1px; box-shadow: 1px 1px 2px rgba(0,0,0,.5); -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);//Safari y navegadores que usen WebKit -moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);//Firefox } |
Y por último le aplicamos un degradado
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .rounded{ border-radius:7px; -moz-border-radius:7px; //Firefox -webkit-border-radius:7px; //Safari y navegadores que usen WebKit text-shadow: #fff 0px 1px 1px; box-shadow: 1px 1px 2px rgba(0,0,0,.5); -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);//Safari y navegadores que usen WebKit -moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);//Firefox background: -webkit-gradient(linear, left top, left bottom, from(#D7E9F3), to(#ffffff)); background: -moz-linear-gradient(top, #D7E9F3, #ffffff); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff'); } |
Listo !! con estas simples lineas habremos creado unos lindos efectos. Tengan en cuenta que van a necesitar las últimas actualizaciones de sus navegadores para que esto funcione correctamente.
Últimos Comentarios