La plataforma Futudownloads está en desarrollo.

31 may. 2012

Efectos para imagenes con Jquery Adipoli

A muchas personas les gusta agregar efectos a las imagenes que agregan a su sitio, como bordes que cambian de color, galerias animadas y efectos de imagen insertada.
Jquery y desarrolladores de aplicaciones web le permiten a las personas encontrar una variedad de estos complementos para las imagenes dependiendo de el estilo del sitio y el gusto de la persona.
el siguiente plugin jquery se llama Adipoli jQuery Image Hover Plugin for Blogger.
Estos son efectos animados que se muestran al pasar en mouse (cursor) encima.
Lo malo de este plugin es que si cambias el tamaño de la imagen el efecto saldra mal.
esto es para imagenes en su tamaño real.
  • Ve a Plantilla, luego has click en Edicion de HTML y busca la etiqueta </head>.
  • justo encima de ella agrega lo siguiente.
 <link href='http://dl.dropbox.com/u/53097108/ihojosestudios/example/Adipoli-jquery-img-hover-fx/adipoli.css' rel='stylesheet' type='text/css'/>
<script src='http://dl.dropbox.com/u/53097108/ihojosestudios/example/mfriendlytooltip/jquery-1.7.2.min.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/53097108/ihojosestudios/example/Adipoli-jquery-img-hover-fx/jquery.adipoli.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/53097108/ihojosestudios/example/Adipoli-jquery-img-hover-fx/jquery.adipoli.min.js' type='text/javascript'/>
<script type='text/javascript'>
           // IJ tutorials //<![CDATA[
            $(function(){
                $('.row1').adipoli({
                    'startEffect' : 'normal',
                    'hoverEffect' : 'popout'
                });
                $('.row2').adipoli({
                    'startEffect' : 'overlay',
                    'hoverEffect' : 'sliceDown'
                });
                $('.row3').adipoli({
                    'startEffect' : 'transparent',
                    'hoverEffect' : 'boxRandom'
                });
                $('.row4').adipoli({
                    'startEffect' : 'overlay',
                    'hoverEffect' : 'foldLeft'
                });
            $('.row5').adipoli({
                'startEffect' : 'transparent',
                'hoverEffect' : 'boxRainGrowReverse'
            });
            $('.row6').adipoli({
                'startEffect' : 'grayscale',
                'hoverEffect' : 'normal'
            });
        });
            //]]>
        </script>
  • Guardas los cambios.
  • Ahora cuando vallas a crear una entrada y insertas una imagen puedes hacer cualquiera de estos cinco efectos.
PopOut
Codigo:
<img class='row1' src='URL de la imagen'/>
Ejemplo:


sliceDown
Codigo:
<img class='row2' src='URL de la imagen'/>
Ejemplo:


boxRandom
Codigo:
<img class='row3' src='URL de la imagen'/>
Ejemplo:


FoldLeft
Codigo:
<img class='row4' src='URL de la imagen'/>
Ejemplo:


boxRainGrowReverse
Codigo:
<img class='row5' src='URL de la imagen'/>
Ejemplo:


Fuente | Jobyj.in






Ver mas...

29 may. 2012

Botones con CSS3

El CSS3 ha permitido a los diseñadores web, crear botones personalizados sin necesidad de utilizar un editor de imagenes.
Aunque con funciones aun limitadas en muchos navegadores el CSS3 ha revolucionado el mundo del diseño web junto con el HTML5.
y aqui les traigo varios botobes traidos a ustedes gracias a Chad Mazzola.
  • Ve a Plantilla y das click en edicion de HTML y buscas la etiqueta ]]></b:skin>.
  • Y justo encima de ella puedes agregar cualquiera de los siguientes.
Contenido

Minimal button
CSS:
button.minimal {
  background: #e3e3e3; /* fondo del boton */
  border: 1px solid #bbb; /* ancho del borde */
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
  -moz-box-shadow: inset 0 0 1px 1px #f6f6f6;
  box-shadow: inset 0 0 1px 1px #f6f6f6;
  color: #333;
  font: bold 12px "helvetica neue", helvetica, arial, sans-serif;
  line-height: 1;
  padding: 8px 0 9px;
  text-align: center;
  text-shadow: 0 1px 0 #fff;
  width: 150px; }
  button.minimal:hover {
    background: #d9d9d9;
    -webkit-box-shadow: inset 0 0 1px 1px #eaeaea;
    -moz-box-shadow: inset 0 0 1px 1px #eaeaea;
    box-shadow: inset 0 0 1px 1px #eaeaea;
    color: #222;
    cursor: pointer; }
  button.minimal:active {
    background: #d0d0d0;
    -webkit-box-shadow: inset 0 0 1px 1px #e3e3e3;
    -moz-box-shadow: inset 0 0 1px 1px #e3e3e3;
    box-shadow: inset 0 0 1px 1px #e3e3e3;
    color: #000; }
CODIGO:
<button class="minimal">Texto del boton</button>
EJEMPLO:

Clean Gray
CSS:
button.clean-gray {
  background-color: #eeeeee; /* fondo del boton */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
  background-image: linear-gradient(top, #eeeeee, #cccccc);
  border: 1px solid #ccc; /* ancho del borde */
  border-bottom: 1px solid #bbb; /* ancho del borde debajo */
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: #333;
  font: bold 11px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  line-height: 1;
  padding: 8px 0;
  text-align: center;
  text-shadow: 0 1px 0 #eee;
  width: 150px; }
  button.clean-gray:hover {
    background-color: #dddddd;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dddddd), color-stop(100%, #bbbbbb));
    background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: linear-gradient(top, #dddddd, #bbbbbb);
    border: 1px solid #bbb;
    border-bottom: 1px solid #999;
    cursor: pointer;
    text-shadow: 0 1px 0 #ddd; }
  button.clean-gray:active {
    border: 1px solid #aaa;
    border-bottom: 1px solid #888;
    -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; }
CODIGO:
<button class="clean-gray">Texto del boton</button>
EJEMPLO:

Cupid Green
CSS:
button.cupid-green {
  background-color: #7fbf4d; /* fondo del boton */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7fbf4d), color-stop(100%, #63a62f));
  background-image: -webkit-linear-gradient(top, #7fbf4d, #63a62f);
  background-image: -moz-linear-gradient(top, #7fbf4d, #63a62f);
  background-image: -ms-linear-gradient(top, #7fbf4d, #63a62f);
  background-image: -o-linear-gradient(top, #7fbf4d, #63a62f);
  background-image: linear-gradient(top, #7fbf4d, #63a62f);
  border: 1px solid #63a62f; /* ancho del borde */
  border-bottom: 1px solid #5b992b;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 0 0 #96ca6d;
  -moz-box-shadow: inset 0 1px 0 0 #96ca6d;
  box-shadow: inset 0 1px 0 0 #96ca6d;
  color: #fff;
  font: bold 11px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  line-height: 1;
  padding: 7px 0 8px 0;
  text-align: center;
  text-shadow: 0 -1px 0 #4c9021;
  width: 150px; }
  button.cupid-green:hover {
    background-color: #76b347;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #76b347), color-stop(100%, #5e9e2e));
    background-image: -webkit-linear-gradient(top, #76b347, #5e9e2e);
    background-image: -moz-linear-gradient(top, #76b347, #5e9e2e);
    background-image: -ms-linear-gradient(top, #76b347, #5e9e2e);
    background-image: -o-linear-gradient(top, #76b347, #5e9e2e);
    background-image: linear-gradient(top, #76b347, #5e9e2e);
    -webkit-box-shadow: inset 0 1px 0 0 #8dbf67;
    -moz-box-shadow: inset 0 1px 0 0 #8dbf67;
    box-shadow: inset 0 1px 0 0 #8dbf67;
    cursor: pointer; }
  button.cupid-green:active {
    border: 1px solid #5b992b;
    border-bottom: 1px solid #538c27;
    -webkit-box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee;
    -moz-box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee;
    box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee; }
CODIGO:
<button class="cupid-green">Texto del boton</button>
EJEMPLO:

Cupid Blue
CSS:
button.cupid-blue {
  background-color: #d7e5f5; /* fondo del boton */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d7e5f5), color-stop(100%, #cbe0f5));
  background-image: -webkit-linear-gradient(top, #d7e5f5, #cbe0f5);
  background-image: -moz-linear-gradient(top, #d7e5f5, #cbe0f5);
  background-image: -ms-linear-gradient(top, #d7e5f5, #cbe0f5);
  background-image: -o-linear-gradient(top, #d7e5f5, #cbe0f5);
  background-image: linear-gradient(top, #d7e5f5, #cbe0f5);
  border-top: 1px solid #abbbcc; /* ancho del borde arriba */
  border-left: 1px solid #a7b6c7; /* ancho del borde izquierda */
  border-bottom: 1px solid #a1afbf; /* ancho del borde debajo */
  border-right: 1px solid #a7b6c7; /* ancho del borde derecha*/
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -webkit-box-shadow: inset 0 1px 0 0 white;
  -moz-box-shadow: inset 0 1px 0 0 white;
  box-shadow: inset 0 1px 0 0 white;
  color: #1a3e66;
  font: normal 11px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  line-height: 1;
  padding: 6px 0 7px 0;
  text-align: center;
  text-shadow: 0 1px 1px #fff;
  width: 150px; }
  button.cupid-blue:hover {
    background-color: #ccd9e8;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ccd9e8), color-stop(100%, #c1d4e8));
    background-image: -webkit-linear-gradient(top, #ccd9e8, #c1d4e8);
    background-image: -moz-linear-gradient(top, #ccd9e8, #c1d4e8);
    background-image: -ms-linear-gradient(top, #ccd9e8, #c1d4e8);
    background-image: -o-linear-gradient(top, #ccd9e8, #c1d4e8);
    background-image: linear-gradient(top, #ccd9e8, #c1d4e8);
    border-top: 1px solid #a1afbf;
    border-left: 1px solid #9caaba;
    border-bottom: 1px solid #96a3b3;
    border-right: 1px solid #9caaba;
    -webkit-box-shadow: inset 0 1px 0 0 #f2f2f2;
    -moz-box-shadow: inset 0 1px 0 0 #f2f2f2;
    box-shadow: inset 0 1px 0 0 #f2f2f2;
    color: #163659;
    cursor: pointer; }
  button.cupid-blue:active {
    border: 1px solid #8c98a7;
    -webkit-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eeeeee;
    -moz-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eeeeee;
    box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eeeeee; }
CODIGO:
<button class="cupid-blue">Texto del boton</button>
EJEMPLO:

Blue Pill
CSS:
button.blue-pill {
  background-color: #a5b8da; /* fondo del boton */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a5b8da), color-stop(100%, #7089b3));
  background-image: -webkit-linear-gradient(top, #a5b8da, #7089b3);
  background-image: -moz-linear-gradient(top, #a5b8da, #7089b3);
  background-image: -ms-linear-gradient(top, #a5b8da, #7089b3);
  background-image: -o-linear-gradient(top, #a5b8da, #7089b3);
  background-image: linear-gradient(top, #a5b8da, #7089b3);
  border-top: 1px solid #758fba; /* ancho del borde arriba */
  border-right: 1px solid #6c84ab; /* ancho del borde derecha */
  border-bottom: 1px solid #5c6f91; /* ancho del borde debajo */
  border-left: 1px solid #6c84ab; /* ancho del borde izquierda */
  -webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  border-radius: 18px;
  -webkit-box-shadow: inset 0 1px 0 0 #aec3e5;
  -moz-box-shadow: inset 0 1px 0 0 #aec3e5;
  box-shadow: inset 0 1px 0 0 #aec3e5;
  color: #fff;
  font: bold 11px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  line-height: 1;
  padding: 8px 0;
  text-align: center;
  text-shadow: 0 -1px 1px #64799e;
  text-transform: uppercase;
  width: 150px; }
  button.blue-pill:hover {
    background-color: #9badcc;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9badcc), color-stop(100%, #687fa6));
    background-image: -webkit-linear-gradient(top, #9badcc, #687fa6);
    background-image: -moz-linear-gradient(top, #9badcc, #687fa6);
    background-image: -ms-linear-gradient(top, #9badcc, #687fa6);
    background-image: -o-linear-gradient(top, #9badcc, #687fa6);
    background-image: linear-gradient(top, #9badcc, #687fa6);
    border-top: 1px solid #6d86ad;
    border-right: 1px solid #647a9e;
    border-bottom: 1px solid #546685;
    border-left: 1px solid #647a9e;
    -webkit-box-shadow: inset 0 1px 0 0 #a5b9d9;
    -moz-box-shadow: inset 0 1px 0 0 #a5b9d9;
    box-shadow: inset 0 1px 0 0 #a5b9d9;
    cursor: pointer; }
  button.blue-pill:active {
    border: 1px solid #546685;
    -webkit-box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eeeeee;
    -moz-box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eeeeee;
    box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eeeeee; }
CODIGO:
<button class="blue-pill">Texto del boton</button>
EJEMPLO:

thoughtbot
CSS:
button.thoughtbot {
  background-color: #ee432e; /* fondo del boton */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee432e), color-stop(50%, #c63929), color-stop(50%, #b51700), color-stop(100%, #891100));
  background-image: -webkit-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  background-image: -moz-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  background-image: -ms-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  background-image: -o-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  background-image: linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  border: 1px solid #951100; /* ancho del borde */
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333;
  -moz-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333;
  box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333;
  color: #fff;
  font: bold 20px "helvetica neue", helvetica, arial, sans-serif;
  line-height: 1;
  padding: 12px 0 14px 0;
  text-align: center;
  text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8);
  width: 150px; }
  button.thoughtbot:hover {
    background-color: #f37873;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f37873), color-stop(50%, #db504d), color-stop(50%, #cb0500), color-stop(100%, #a20601));
    background-image: -webkit-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    background-image: -moz-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    background-image: -ms-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    background-image: -o-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    background-image: linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    cursor: pointer; }
  button.thoughtbot:active {
    background-color: #d43c28;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d43c28), color-stop(50%, #ad3224), color-stop(50%, #9c1500), color-stop(100%, #700d00));
    background-image: -webkit-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
    background-image: -moz-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
    background-image: -ms-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
    background-image: -o-linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
    background-image: linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
    -webkit-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4);
    -moz-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4);
    box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4); }
CODIGO:
<button class="thoughtbot">Texto del boton</button>
EJEMPLO:

Punch
CSS:
button.punch {
  background: #4162a8; /* fondo del boton */
  border-top: 1px solid #38538c; /* ancho del borde arriba */
  border-right: 1px solid #1f2d4d; /* ancho del borde derecha */
  border-bottom: 1px solid #151e33; /* ancho del borde debajo */
  border-left: 1px solid #1f2d4d; /* ancho del borde izquierda */
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
  -moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
  box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
  color: #fff;
  font: bold 20px "helvetica neue", helvetica, arial, sans-serif;
  line-height: 1;
  margin-bottom: 10px;
  padding: 10px 0 12px 0;
  text-align: center;
  text-shadow: 0px -1px 1px #1e2d4d;
  width: 150px;
  -webkit-background-clip: padding-box; }
  button.punch:hover {
    -webkit-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
    -moz-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
    box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
    cursor: pointer; }
  button.punch:active {
    -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
    -moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
    box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
    margin-top: 58px; }
CODIGO:
<button class="punch">Texto del boton</button>
EJEMPLO:

Purple Candy
CSS:
button.purple-candy {
  background-color: #9e76e8; /* fondo del boton */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9e76e8), color-stop(50%, #7038e0), color-stop(50%, #6021de), color-stop(100%, #6224de));
  background-image: -webkit-linear-gradient(top, #9e76e8 0%, #7038e0 50%, #6021de 50%, #6224de 100%);
  background-image: -moz-linear-gradient(top, #9e76e8 0%, #7038e0 50%, #6021de 50%, #6224de 100%);
  background-image: -ms-linear-gradient(top, #9e76e8 0%, #7038e0 50%, #6021de 50%, #6224de 100%);
  background-image: -o-linear-gradient(top, #9e76e8 0%, #7038e0 50%, #6021de 50%, #6224de 100%);
  background-image: linear-gradient(top, #9e76e8 0%, #7038e0 50%, #6021de 50%, #6224de 100%);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: #fff;
  font: bold 12px "helvetica neue", helvetica, arial, sans-serif;
  line-height: 1;
  padding: 10px 0 12px 0;
  text-align: center;
  text-shadow: 0px -1px 1px #473569;
  width: 150px;
  -webkit-background-clip: padding-box; }
  button.purple-candy:hover {
    background-color: #8d69cf;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8d69cf), color-stop(50%, #6332c7), color-stop(50%, #551dc4), color-stop(100%, #561fc4));
    background-image: -webkit-linear-gradient(top, #8d69cf 0%, #6332c7 50%, #551dc4 50%, #561fc4 100%);
    background-image: -moz-linear-gradient(top, #8d69cf 0%, #6332c7 50%, #551dc4 50%, #561fc4 100%);
    background-image: -ms-linear-gradient(top, #8d69cf 0%, #6332c7 50%, #551dc4 50%, #561fc4 100%);
    background-image: -o-linear-gradient(top, #8d69cf 0%, #6332c7 50%, #551dc4 50%, #561fc4 100%);
    background-image: linear-gradient(top, #8d69cf 0%, #6332c7 50%, #551dc4 50%, #561fc4 100%);
    -webkit-background-clip: padding-box;
    cursor: pointer; }
  button.purple-candy:active {
    background: #4a1aab;
    background: -moz-radial-gradient(50% 31% 0deg, circle cover, rgba(38, 76, 153, 0.4), rgba(11, 23, 46, 0.4)), -moz-linear-gradient(top, #7b5cb5 0%, #572bad 50%, #4a1aab 50%, #4b1bab 100%);
    background: -webkit-gradient(radial, 50% 20%, 75, 50% 50%, 0, from(rgba(38, 76, 153, 0.4)), to(rgba(11, 23, 46, 0.4))), -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #7b5cb5), color-stop(0.5, #572bad), color-stop(0.5, #4a1aab), color-stop(1, #4b1bab));
    color: #ddd;
    -webkit-background-clip: padding-box; }
CODIGO:
<button class="purple-candy">Texto del boton</button>
EJEMPLO:

Shiny Blue
CSS:
button.shiny-blue {
  background-color: #759ae9; /* fondo del boton */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #759ae9), color-stop(50%, #376fe0), color-stop(50%, #1a5ad9), color-stop(100%, #2463de));
  background-image: -webkit-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
  background-image: -moz-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
  background-image: -ms-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
  background-image: -o-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
  background-image: linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
  border-top: 1px solid #1f58cc; /* ancho del borde arriba */
  border-right: 1px solid #1b4db3; /* ancho del borde derecha */
  border-bottom: 1px solid #174299; /* ancho del borde debajo */
  border-left: 1px solid #1b4db3; /* ancho del borde izquierda */
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
  -moz-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
  box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
  color: #fff;
  font: bold 12px "helvetica neue", helvetica, arial, sans-serif;
  padding: 7px 0;
  text-shadow: 0 -1px 1px #1a5ad9;
  width: 150px; }
  button.shiny-blue:hover {
    background-color: #5d89e8;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5d89e8), color-stop(50%, #2261e0), color-stop(50%, #044bd9), color-stop(100%, #0d53de));
    background-image: -webkit-linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%);
    background-image: -moz-linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%);
    background-image: -ms-linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%);
    background-image: -o-linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%);
    background-image: linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%);
    cursor: pointer; }
  button.shiny-blue:active {
    border-top: 1px solid #1b4db3;
    border-right: 1px solid #174299;
    border-bottom: 1px solid #133780;
    border-left: 1px solid #174299;
    -webkit-box-shadow: inset 0 0 5px 2px #1a47a0, 0 1px 0 #eeeeee;
    -moz-box-shadow: inset 0 0 5px 2px #1a47a0, 0 1px 0 #eeeeee;
    box-shadow: inset 0 0 5px 2px #1a47a0, 0 1px 0 #eeeeee; }
CODIGO:
<button class="shiny-blue">Texto del boton</button>
EJEMPLO:

Download iTunes
CSS:
button.download-itunes {
  background-color: #52a8e8; /* fondo del boton */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #52a8e8), color-stop(100%, #377ad0));
  background-image: -webkit-linear-gradient(top, #52a8e8, #377ad0);
  background-image: -moz-linear-gradient(top, #52a8e8, #377ad0);
  background-image: -ms-linear-gradient(top, #52a8e8, #377ad0);
  background-image: -o-linear-gradient(top, #52a8e8, #377ad0);
  background-image: linear-gradient(top, #52a8e8, #377ad0);
  border-top: 1px solid #4081af; /* ancho del borde arriba */
  border-right: 1px solid #2e69a3; /* ancho del borde derecha */
  border-bottom: 1px solid #20559a; /* ancho del borde debajo */
  border-left: 1px solid #2e69a3; /* ancho del borde izquierda */
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  -webkit-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
  -moz-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
  box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
  color: #fff;
  font: normal 11px "lucida grande", sans-serif;
  line-height: 1;
  padding: 3px 5px;
  text-align: center;
  text-shadow: 0 -1px 1px #3275bc;
  width: 112px;
  -webkit-background-clip: padding-box; }
  button.download-itunes:hover {
    background-color: #3e9ee5;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3e9ee5), color-stop(100%, #206bcb));
    background-image: -webkit-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
    background-image: -moz-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
    background-image: -ms-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
    background-image: -o-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
    background-image: linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
    border-top: 1px solid #2a73a6;
    border-right: 1px solid #165899;
    border-bottom: 1px solid #07428f;
    border-left: 1px solid #165899;
    -webkit-box-shadow: inset 0 1px 0 0 #62b1e9;
    -moz-box-shadow: inset 0 1px 0 0 #62b1e9;
    box-shadow: inset 0 1px 0 0 #62b1e9;
    cursor: pointer;
    text-shadow: 0 -1px 1px #1d62ab;
    -webkit-background-clip: padding-box; }
  button.download-itunes:active {
    background: #3282d3;
    border: 1px solid #154c8c;
    border-bottom: 1px solid #0e408e;
    -webkit-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 white;
    -moz-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 white;
    box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 white;
    text-shadow: 0 -1px 1px #2361a4;
    -webkit-background-clip: padding-box; }

button[disabled].download-itunes,
button[disabled].download-itunes:hover,
button[disabled].download-itunes:active {
  background-color: #dadada;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dadada), color-stop(100%, #f3f3f3));
  background-image: -webkit-linear-gradient(top, #dadada, #f3f3f3);
  background-image: -moz-linear-gradient(top, #dadada, #f3f3f3);
  background-image: -ms-linear-gradient(top, #dadada, #f3f3f3);
  background-image: -o-linear-gradient(top, #dadada, #f3f3f3);
  background-image: linear-gradient(top, #dadada, #f3f3f3);
  border-top: 1px solid #c5c5c5;
  border-right: 1px solid #cecece;
  border-bottom: 1px solid #d9d9d9;
  border-left: 1px solid #cecece;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  color: #8f8f8f;
  cursor: not-allowed;
  text-shadow: 0 -1px 1px #ebebeb; }

button.download-itunes::-moz-focus-inner {
  border: 0;
  padding: 0; }
CODIGO:
<button class="download-itunes">Texto del boton</button>
EJEMPLO:

Skip
CSS:
button.skip {
  background-color: #8c9cbf; /* fondo del boton */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8c9cbf), color-stop(50%, #546a9e), color-stop(50%, #36518f), color-stop(100%, #3d5691));
  background-image: -webkit-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
  background-image: -moz-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
  background-image: -ms-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
  background-image: -o-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
  background-image: linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
  border: 1px solid #172d6e; /* ancho del borde */
  border-bottom: 1px solid #0e1d45; /* ancho del borde debajo */
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: inset 0 1px 0 0 #b1b9cb;
  -moz-box-shadow: inset 0 1px 0 0 #b1b9cb;
  box-shadow: inset 0 1px 0 0 #b1b9cb;
  color: #fff;
  font: bold 16px "helvetica neue", helvetica, arial, sans-serif;
  padding: 7px 0 8px 0;
  text-decoration: none;
  text-align: center;
  text-shadow: 0 -1px 1px #000f4d;
  width: 150px; }
  button.skip:hover {
    background-color: #7f8dad;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7f8dad), color-stop(50%, #4a5e8c), color-stop(50%, #2f477d), color-stop(100%, #364c80));
    background-image: -webkit-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
    background-image: -moz-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
    background-image: -ms-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
    background-image: -o-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
    background-image: linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
    cursor: pointer; }
  button.skip:active {
    -webkit-box-shadow: inset 0 0 20px 0 #1d2845, 0 1px 0 white;
    -moz-box-shadow: inset 0 0 20px 0 #1d2845, 0 1px 0 white;
    box-shadow: inset 0 0 20px 0 #1d2845, 0 1px 0 white; }
CODIGO:
<button class="skip">Texto del boton</button>
EJEMPLO:

Fuente | Hellohappy.org
Ver mas...

27 may. 2012

AE.001: LuzShine

May 27, 2012 | 8mins.
- Efecto de luz usando videocopilot plugins.
- Efecto de texto luminoso con Trapcode Shine.

Requerido: Optical Flares, Trapcode Shine
Ver
Proyecto
Visto Veces Descargas



Ver mas...

25 may. 2012

Plantillas: Aegisub

  • Agigantar silabas (n)
    Tipo: Plantilla Karaoke.
    Dificultad: ★★★★★ (Simple)
    Agregado por: iho_jose
    Ejemplo: VER IMAGEN
    Plantilla:
    {\r\k$kdur\t($start,$end,\&HCD88EB&)\t($start,$mid,\fscy180)\t($mid,$end,\fscy200)}
  • Desaparecer letras (n)
    Tipo: Plantilla Karaoke.
    Dificultad: ★★★★★ (moderada)
    Agregado por: iho_jose
    Ejemplo: VER IMAGEN
    Plantilla:
    {\r\k$kdur\fs40\t($start,$mid,\fs35\c&HFF0000)\t($mid,$end,\fs55)\t($end,!$end+100!,\alpha&HEF&)}
  • Aplastar silabas (n)
    Tipo: Plantilla Karaoke.
    Dificultad: ★★★★★ (Simple)
    Agregado por: iho_jose
    Ejemplo: VER IMAGEN
    Plantilla:
    {\r\k$kdur\t($start,$end,\1c&H00FF00&)\t($start,!$start+$dur*0.3!,\fscy0)\2c&HD7D7D7&\fs26}
Puedes enviar tu plantilla dando click en "Enviar archivo" que veras en la parte superior del sitio.













Ver mas...

16 may. 2012

Gadget:Simple Media Buttons con CSS3


Las redes sociales tienen controlada la internet, además de que son sitios donde la gente confia su privasidad y estado tambien son utiles para compartir y mantenerse al tanto de las noticias.
Por eso ahora los sitios usan botones de esas redes para que las personas puedan compartir su contenido con sus amigos y seguidores en las redes sociales.

Todo avanza incluso la manera de diseñar en internet con el lenguage HTML5 y CSS3 que están controlando los diseños del momento.
  • Ve a Plantilla, has click en Edicion de HTML
  • Luego has click en Expandir plantilla de artilugios y buscas la etiqueta ]]></b:skin> y encima de ella pegas cualquiera de los siguientes dos codigos..
  • PRIMER ESTILO "ESTILO GRAY".
 .inset {
    font-family: Helvetica, Verdana, Arial, sans-serif;
    font-size: 14px;
    list-style-type: none;
    margin: 10px 0 0 10px;
}

.inset ul { list-style-type: none; display: block; }

.inset li {
    float: left;
    height: 30px;
    margin: 0 8px 7px 0;
}

.inset li a {
    background-color: gray;
    color: #424242;
    float: left;
    font-size: 16px;
    font-weight: bold;
    height: 24px;
    padding-left: 27px;
    padding-top: 6px;
    position: relative;
    text-decoration: none;
    border: 1px solid #bfc1c6;
    /* Mozilla browsers that use Gecko layout engine */
    -moz-border-radius: 5px;
    /* Safari and Chrome that use WebKit layout engine */
    -webkit-borer-radius: 5px;
    /* W3C CSS Level 3.0 specifications. For Opera and IE9 */
    border-radius: 5px;
    /* Mozilla browsers that use Gecko layout engine */
background: -moz-linear-gradient(#a5a7aa, #bec1c5 1%, #d8dbdf 10%, #d8dbdf);
/* Safari and Chrome that use WebKit layout engine */
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #a5a7aa),color-stop(.01, #bec1c5),color-stop(.10, #d8dbdf),color-stop(1, #d8dbdf));
}

.inset li a:hover {
    border: 1px solid #b4b7bb;
    background: -moz-linear-gradient(#9c9fa2, #b4b7bb 1%, #cdd0d5 10%, #cdd0d5);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #9c9fa2),color-stop(.01, #b4b7bb),color-stop(.10, #cdd0d5),color-stop(1, #cdd0d5));
}

.inset li a img {
    height: 16px;
    left: 7px;
    margin-right: 7px;
    position: absolute;
    top: 7px;
    width: 16px;
    border:none;
}

.inset li a span {
    display: block;
    height: 22px;
    padding-right: 7px;
    overflow: hidden;
    /* width: 70px; Uncomment this to add a fixed width */
}
  
span.site { font-size: 14px; line-height: 20px; }
  • SEGUNDO ESTILO "ESTILO COLOR".
.outset-colored {
    font-family: Helvetica, Verdana, Arial, sans-serif;
    font-size: 14px;
    list-style-type: none;
    margin: 10px 0 0 10px;
}

.outset-colored ul { list-style-type: none; display: block; }

.outset-colored li {
    float: left;
    height: 30px;
    margin: 0 8px 7px 0;
}

.outset-colored li a {
    color: #424242;
    float: left;
    font-size: 16px;
    font-weight: bold;
    height: 24px;
    padding-left: 27px;
    padding-top: 6px;
    position: relative;
    text-decoration: none;
    border: 1px solid #bfc1c6;
    border-radius: 5px;
    background-color: #D8D9DD;
    -moz-border-radius: 5px;
    -webkit-borer-radius: 5px;   
}

/* EMAIL */
.outset-colored li a.email {
    background: -moz-linear-gradient(#ff6666, #cc0000 10%, #c40202);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ff6666),color-stop(.10, #cc0000),color-stop(1, #c40202));
    color: #f3f3f3;
    border: 1px solid #c40202;
}

.outset-colored li a:hover.email {
    background: -moz-linear-gradient(#c40202, #cc0000 1%, #e03434 10%, #e03434);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #c40202),color-stop(.01, #cc0000),color-stop(.10, #e03434),color-stop(1, #e03434));
}

/* LINKEDIN */
.outset-colored li a.linkedin {
    background: -moz-linear-gradient(#7cd0fb, #38a5dc 10%, #2c83ae);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #7cd0fb),color-stop(.10, #38a5dc),color-stop(1, #2c83ae));
    color: #f3f3f3;
    border: 1px solid #2c83ae;
}

.outset-colored li a:hover.linkedin {
    background: -moz-linear-gradient(#2c83ae, #38a5dc 1%, #41b9f6 10%, #41b9f6);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #2c83ae),color-stop(.01, #38a5dc),color-stop(.10, #41b9f6),color-stop(1, #41b9f6));
}

/* FACEBOOK */
.outset-colored li a.facebook {
    background: -moz-linear-gradient(#7aa3f7, #4c72c3 10%, #3b5998);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #7aa3f7),color-stop(.10, #4c72c3),color-stop(1, #3b5998));
    color: #f3f3f3;
    border: 1px solid #3b5998;
}

.outset-colored li a:hover.facebook {
    background: -moz-linear-gradient(#3b5998, #4c72c3 1%, #5c8aea 10%, #5c8aea);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #3b5998),color-stop(.01, #4c72c3),color-stop(.10, #5c8aea),color-stop(1, #5c8aea));
}

/* TWITTER */
.outset-colored li a.twitter {
    background: -moz-linear-gradient(#8ae0fd, #24bce6 10%, #1e9ec1);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #8ae0fd),color-stop(.10, #24bce6),color-stop(1, #1e9ec1));
    color: #f3f3f3;
    border: 1px solid #1e9ec1;
}

.outset-colored li a:hover.twitter {
    background: -moz-linear-gradient(#1e9ec1, #24bce6 1%, #33ccff 10%, #33ccff);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #24bce6),color-stop(.01, #33ccff),color-stop(.10, #33ccff),color-stop(1, #33ccff));
}

/* FLICKR */
.outset-colored li a.flickr {
    background: -moz-linear-gradient(#fc75ba, #e10374 10%, #c10263);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #fc75ba),color-stop(.10, #e10374),color-stop(1, #c10263));
    color: #f3f3f3;
    border: 1px solid #c10263;
}

.outset-colored li a:hover.flickr {
    background: -moz-linear-gradient(#c10263, #e10374 1%, #ff0283 10%, #ff0283);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #c10263),color-stop(.01, #e10374),color-stop(.10, #ff0283),color-stop(1, #ff0283));
}

.outset-colored li a img {
    height: 16px;
    left: 7px;
    margin-right: 7px;
    position: absolute;
    top: 7px;
    width: 16px;
   border: none;
}

.outset-colored li a span {
    display: block;
    height: 22px;
    padding-right: 7px;
    overflow: hidden;
    /*width: 70px; Add a width here if you want all the buttons to be the same size.*/
}

span.site { font-size: 14px; line-height: 20px; }
  •  Y guardas cambios.
  • Ahora el codigo de insercion de los botones es simple y tu puedes elegir donde ponerlos y que enlaces agregarles.
  • PRIMER ESTILO "ESTILO GRAY"
<div class="inset">
<ul>

<li>
<a href="#">
<img src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/simple-demo/gmail_16.png" alt="gmail icon" />
<span class="site">E-Mail</span></a>
</li>

<li>
<a href="http://linkedin.com" title="My LinkedIn Page">
<img src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/simple-demo/linkedin_16.png" alt="LinkedIn icon" />
<span class="site">LinkedIn</span>
</a>
</li>

<li>
<a href="http://facebook.com" title="My Facebook Page">
<img src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/simple-demo/facebook_16.png" alt="Facebook icon" />
<span class="site">Facebook</span>
</a>
</li>

<li>
<a href="http://twitter.com" title="My Twitter Page">
<img src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/simple-demo/twitter_16.png" alt="Twitter icon" />
<span class="site">Twitter</span>
</a>
</li>

<li>
<a href="http://flickr.com" title="My Flickr Page">
<img src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/simple-demo/flickr_16.png" alt="Flickr icon" />
<span class="site">Flickr</span>
</a>
</li>

</ul>
</div>
  • SEGUNDO ESTILO "ESTILO COLOR" 

<div class="outset-colored">
<ul>

<li>
<a href="http://mail.google.com" class="email">
<img src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/simple-demo/gmail_white.png" alt="gmail icon" />
<span class="site">E-Mail</span></a>
</li>

<li>
<a href="http://linkedin.com" title="My LinkedIn Page" class="linkedin">
<img src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/simple-demo/linkedin_white.png" alt="LinkedIn icon" />
<span class="site">LinkedIn</span>
</a>
</li>

<li>
<a href="http://facebook.com" title="My Facebook Page" class="facebook">
<img src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/simple-demo/facebook_white.png" alt="Facebook icon" />
<span class="site">Facebook</span>
</a>
</li>

<li>
<a href="http://twitter.com" title="My Twitter Page" class="twitter">
<img src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/simple-demo/twitter_white.png" alt="Twitter icon" />
<span class="site">Twitter</span>
</a>
</li>

<li>
<a href="http://flickr.com" title="My Flickr Page" class="flickr">
<img src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/simple-demo/flickr_white.png" alt="Flickr icon" />
<span class="site">Flickr</span>
</a>
</li>

</ul>
</div>
  • Lo que aparece de color verde son los enlaces de las imagenes.
  • Lo que aparece de color azul es donde pondrás el enlace del boton (cada enlace dice de que pagina es el boton).
  • lo aparece de color naranja es donde dice el titulo del boton.
  • Lo que aparece de color rojo es el nombre del boton, el cual cada uno tiene el nombre de a que red social pertenece.
  • Lo que aparece de <li> a </li> es un boton.
  • Para añadir uno que has diseñado para otra red agregalo antes de </ul>.
  • cuando hallas termanado une todas etiquetas dejando el codigo así
<div class="outset-colored" style='margin-left:-5px;'><ul><li><a href="http://mail.google.com" class="email"><img src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/simple-demo/gmail_white.png" alt="gmail icon" /><span class="site">E-Mail</span></a></li><li><a href="http://linkedin.com" title="My LinkedIn Page" class="linkedin"><img src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/simple-demo/linkedin_white.png" alt="LinkedIn icon" /><span class="site">LinkedIn</span></a></li><li><a href="http://facebook.com/futudownloads" title="My Facebook Page" class="facebook"><img src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/simple-demo/facebook_white.png" alt="Facebook icon" /><span class="site">Facebook</span></a></li><li><a href="http://twitter.com/iho_jose" title="My Twitter Page" class="twitter"><img src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/simple-demo/twitter_white.png" alt="Twitter icon" /><span class="site">Twitter</span></a></li><li><a href="http://flickr.com" title="My Flickr Page" class="flickr"><img src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/simple-demo/flickr_white.png" alt="Flickr icon" /><span class="site">Flickr</span></a></li></ul></div>
    • Los resultados serán los siguientes:
    • PRIMER ESTILO "ESTILO GRAY".


    • SEGUNGO ESTILO "ESTILO COLOR"

    Fuente | Sixrevisions.com
    Ver mas...