JMiur [E]

Este es otro experimento de Nicolas Gallagher. Se trata de crear íconos a diferentes redes sociales pero, usando sólo CSS.

La idea es simple pero claro, las definiciones de cada modelo son muy complejas y sólo tienen como objeto destacar las cualidades de las nuevas propiedades del CSS3.

El HTML es una lista común:
<ul id="typo">
<li id="Trss"><a href="javascript:void(0);" title="Suscribirse via RSS ">RSS</a></li>
<li id="Ttwitter"><a href="javascript:void(0);" title="Compartir en Twitter">Twitter</a></li>
<li id="Tfacebook"><a href="javascript:void(0);" title="Compartir en Facebook">Facebook</a></li>
</ul>
Y ahora, las definciones. Primero que nada, las generales:
ul#typo {
font: 0.875em/1 Arial, sans-serif;
list-style: none;
overflow: hidden;
padding: 0;
margin: 0;
}
ul#typo li {
float: left;
height: 66px;
margin: 20px 20px 0 0;
width:66px;
}
ul#typo li a {
border: 1px solid transparent;
display: block;
height: 64px;
overflow: hidden;
line-height: 64px;
text-decoration: none;
width: 64px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
ul#typo li a:hover, ul#typo li a:focus, ul#typo li a:active {
border-color: #000;
opacity: 0.8;
}
La parte sofisticada es la creación de cada uno de esos íconos y aquí hay tres ejemplos.



#Tfacebook a {
position:relative;
border-color:#3c5a98;
text-transform:lowercase;
text-indent:34px;
letter-spacing:10px;
font-weight:bold;
font-size:64px;
line-height:66px;
color:#fff;
background:#3c5a98;
-moz-box-shadow:0 0 4px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 4px rgba(0,0,0,0.4);
box-shadow:0 0 4px rgba(0,0,0,0.4);
}

#Ttwitter a {
position:relative;
border-color:#a8eaec;
text-transform:lowercase;
text-indent:20px;
letter-spacing:40px;
font:bold 60px/1 Tahoma, sans-serif;
line-height:60px;
color:#76DDF8;
background:#daf6f7;
text-shadow: 3px 3px 1px #fff, -3px -3px 1px #fff, 3px -3px 1px #fff, -3px 3px 1px #fff;
-moz-box-shadow:0 0 4px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 4px rgba(0,0,0,0.4);
box-shadow:0 0 4px rgba(0,0,0,0.4); /* standards version last */
background:-webkit-gradient(linear, left top, left bottom, from(#dbf7f8), to(#88e1e6));
background:-moz-linear-gradient(top, #dbf7f8, #88e1e6);
background:linear-gradient(top, #dbf7f8, #88e1e6);
}

#Trss a {
position:relative;
width:60px;
padding:0 2px;
border-color:#ea6635;
text-transform:lowercase;
text-indent:-186px;
font-size:64px;
font-weight:bold;
color:#fff;
background:#e36443;
-moz-box-shadow:0 0 4px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 4px rgba(0,0,0,0.4);
box-shadow:0 0 4px rgba(0,0,0,0.4); /* standards version last */
background:-webkit-gradient(linear, left top, left bottom, from(#f19242), to(#e36443));
background:-moz-linear-gradient(top, #f19242, #e36443);
background:linear-gradient(top, #f19242, #e36443);
}
#Trss a:before {
content:"\00a0";
position:absolute;
bottom:10px;
left:10px;
width:12px;
height:12px;
background:#fff;
-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
}
#Trss a:after {
content:"\00a0";
position:absolute;
bottom:10px;
left:10px;
width:22px;
height:22px;
border-style:double;
border-width:24px 24px 0 0;
border-color:#fff;
-moz-border-radius:0 50px 0 0;
-webkit-border-radius:0 50px 0 0;
border-radius:0 50px 0 0;
}

10 comentarios:

Felipe Calvo Cepeda  

Bastante monos! :D

Oye Jorge, aprovecho para decirte, no se si te habrás dado cuenta, hace unas semanas hablaste del código que había agregado blogger para los enlaces a las redes sociales.
Hoy estaba haciendo algunos cambiecillos a un blog y desde Elementos de Página ► Entradas de Blog ya aparece la opción para habilitarlos e insertarlos en la plantilla.

Tenemos de donde escojer!
Saludos!

:: Go #arg !! Jajaja

Responder
@rielCastellanos  

Wow, ese man es un genio!

Responder
JMiur  

Felipe: Está la opción pero, al parecer, aún no está habilitada.

Responder
Unknown  

Asombrada :O mira que hay que pensar para lograrlo, excelente :)

Responder
Alfredo  

Blogger los acaba de hacer públicos pero solo en Blogger Draft, así que de esa manera ya los puedes usar creo desde hace dos días. Yo lo acabo de verificar en mi cuenta y funcionó.

Pueden ver toda la entrada completa en esta página, que es donde lo vi yo. Solo que esta en Ingles, pero no importa. http://www.anshuldudeja.com/2010/06/how-add-share-buttons-by-blogger.html

Responder
JMiur  

Graciela: Muy curioso :D

Alfredo: No sólo en Blogger Draft; la opción se encuentra disponible en todos los blogs de Blogger y la forma de usarlo es la misma que publicada acá. En algunos blogs ya está operativo y en otros aún no.

Responder
crystal m  

Hola!!! primero que nada me encanta tu blog por que eres de mucha ayuda, por eso queria saber si me harias el grandismo favor de ayudarme con un problema que tengo con una nueva plantilla que le eh montado a mi blog de prueba, lo que pasa es que esta plantilla tiene 3 iconos sociales twitter,facebook y el icono para subscribirse como el que tienes tu(el naranja "subscribirse a vagabundia") bueno el caso es que no se como ponerles para que den directo ya sea a mi facebook o a mi twitter la verdad lo eh buscado mucho pero no encuentro quien diga exactamente lo que estoy buscando.

De ante mano GRACIAS
TE DEJO EL BLOG PARA QUE VEAS LO QUE TE DIGO http://blogdepruebadecrystal.blogspot.com/

Responder
JMiur  

Crystal MuSo:
El blog es privado así que no puedo acceder a él pero, lo que debes hacer es buscar dónde están esos íconos que, seguramente, son alguna etiqueta con un enlace: <a href='xxxxxxxx' .... >

Allí, en cada uno deberás colocar la dirección URL a esos servicios; no sé:

http://twitter.com/TUNOMBRE
http://www.facebook.com/LADIRECCION

y para los feeds pones algo así:
http://hey-crystal.blogspot.com/feeds/posts/default

Responder
juliana socha  

superrr...pero tengo una prgunta que esun icono social...porfa nasecito algo bien planteado...mi correo es lanenajs@gmail.com....rapido abisenme...gracias

Responder
JMiur  

Lo único que veo erróneo a simple vista es que tienens duplicado el script; conviene que lo coloques al final de la pa´gina, antes de </body>

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR