Ir al contenido principal

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

    Entradas populares de este blog

    Paquetes de Idioma Windows 7 MUI (64bits / x64)

    Paquete de idiomas para windows 7 para aquellos que nacesitan tener varios idiomas en su pc. Es compatible con la mayoria de versiones de Windows 7 Hay que tomar nota de que si se instalan demasiados paquetes de idioma adicionales, el espacio de disco y el rendimiento del sistema puede verse afectados. En particular, el espacio de disco y el rendimiento del sistema se ven afectados durante las operaciones de servicios, tales como las instalaciones de Service Pack (KB972813). Por lo tanto, se recomienda sólo añadir un paquete de idioma, el que necesitares exclusivamente. Paquete de idiomas Windows 7 RTM MUI 64-bit (x64) Arabe Descargas Bulgaro Descargas Chino (Simplifi...) Descargas Chino (Tradicio...) Descargas Croata Descargas Checo Descargas Danés Descargas Holandés Descargas Inglés Descargas Estonio Descargas Finlandés Descargas Francés Descargas Alemán Descargas Griego Descargas Hebreo Descargas Húngaro Descargas Italiano

    Blogger:Usar @font-face en tu Blog de Blogger

    Muchos sitios están usando @font-face y es porque les permite usar fuentes en sus sitios web que son muy creativas y dan más estilo al sitio. Lo malo que tiene esta funcion es que solo se pueden usar fuentes si están en el mismo servidor de el sitio, lo que quiere decir que en blogs como los de Blogger no funcionaría. Pero eso se ha estado solucionando con el tiempo. Un dia me puse a buscar como hacerlo y no encontraba la manera hasta que un día pude hacerlo cuando puse una fuente codificada, funcionó instantaneamente, lo unico que sé es que funciona en Firefox, Firefox Aurora, RockMelt y Google Chrome y no se si funcione en los demás navegadores pues no tengo los demás y IE9 no me funciona bien . "Si es compatible en los otros navegadores lo comentan para agregarlo a la lista de compatibles" Sigue los siguientes pasos y podrás cualquier fuente y poner con @font-fae en tu Blog. Se usarán imagenes de ilustracion para que sea más entendible, has click en donde diga (ve

    Manual:Codigos y plantillas Aegisub

    Aegisub es un programa que le permite a las personas añadir subtitulos y karaoke a sus videos, actualmente Aegisub para dar esos estilos y animaciones a los subtitulos y karaokes usa una serie de codigos que activan dichas animaciones en un tiempo y colores determinados, como un script en HTML. Los que más utilizan este programa son los Fansubs y empresas de karaoke. Los codigos son dificiles de aprender pero no imposibles si mantienes practica. REGLAS DE LOS CÓDIGOS. Debes saber unas reglas para los codigos y es que cada coigo está entre parentesis {} . El codigo inicia con una diagonal inversa (invert slash) \ . El indicador de la accion biene negreado . El codigo numerico saldrá normal. El codigo viene antes del texto. Cada codigo se divide con una diagonal inversa \ . BÁSICO. _________________________________________________________________________ Lo basico son esos codigos que son los más utilizados y faciles, además de que el mismo programa te da las opciones