Foto de perfil con efecto hover y botones a redes sociales


¿Cómo va la semana? Espero que bien. Bueno, pues hoy vengo con un nuevo tutorial para nuestros blogs. Visitando diversos blogs, he notado que muchos colocan su foto en la sidebar (barra lateral) del blog. Así que hoy traigo un tutorial para darle un efecto muy bonito a las fotos de perfil que colocamos en la sidebar.

HTML, CSS, tutorial, blogger, efecto hover, effect, foto, perfil, redes sociales

Ahora, ¿de qué trata el efecto?. Es muy simple y útil. Al pasar el cursor sobre la foto, se hará un efecto como si alguien volteara la foto y viera el reverso. En ese reverso podemos colocar información extra ( como nuestro nombre, alguna información sobre nosotros, nuestro país, edad, etc.) y también podemos colocar enlaces a nuestras redes sociales. Yo he colocado cuatro íconos a redes, pero pueden cambiar los íconos por otros y/o agregar más redes.

Aquí pueden ver la demo:

DEMO
(Pasar el cursor sobre la imagen)


Ahora a empezar con el tutorial:

1.§ Vamos a Plantilla - Editar HTML.

2.§ Damos un clic dentro del código, luego CTRL+F y en la casilla search buscaremos ]]></b:skin> y justo debajo pegaremos los siguientes estilos CSS:
<style type='text/css'>
.ch-item {
border-radius: 50% 50% 50% 50%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
cursor: default;
height: 100%;
position: relative;
width: 100%;
}
.ch-info-wrap {
background: transparent url(/URL/index.html) repeat scroll 0 0 ;
border-radius: 50% 50% 50% 50%;
box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 3px rgba(115, 114, 23, 0.8) inset;
height: 180px;
left: 20px;
perspective: 800px;
position: absolute;
top: 20px;
transition: all 0.4s ease-in-out 0s;
width: 180px;
}
.ch-info {
border-radius: 50% 50% 50% 50%;
height: 180px;
position: absolute;
transform-style: preserve-3d;
transition: all 0.4s ease-in-out 0s;
width: 180px;
}
.ch-info > div {
backface-visibility: hidden;
background-position: center center;
border-radius: 50% 50% 50% 50%;
display: block;
height: 100%;
position: absolute;
width: 100%;
}
.ch-info .ch-info-back {
background: none repeat scroll 0 0 #ffffff;
transform: rotate3d(0, 1, 0, 180deg);
}
.ch-img-1 {
background-image: url("AQUI-URL-FOTO-PERFIL");
}
.ch-info h3 {
color: #000000;
font-family: 'Open Sans',Arial,sans-serif;
font-size: 14px;
height: 22px;
letter-spacing: 2px;
margin: 0 15px;
padding: 30px 0 0;
text-shadow: 0 0 1px #ffffff, 0 1px 2px rgba(0, 0, 0, 0.3);
text-transform: uppercase;
}
.ch-info p {
border-top: 1px solid rgba(0, 0, 0, 0.5);
color: #000000;
font-size: 12px;
font-style: italic;
margin: 0 30px;
padding: 5px 3px 10px 3px;
}

.ch-item:hover .ch-info-wrap {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8), 0 0 3px rgba(115, 114, 23, 0.8) inset;
}
.ch-item:hover .ch-info {
transform: rotate3d(0, 1, 0, -180deg);
}
.ch-grid {
display: block;
list-style: none outside none;
margin: 20px 0 0;
padding: 0;
text-align: center;
width: 100%;
}
.ch-grid:after, .ch-item:before {
content: "";
display: table;
}
.ch-grid:after {
clear: both;
}
.ch-grid li {
display: inline-block;
height: 220px;
margin: 20px;
width: 220px;
}
</style>
» Donde dice AQUI-URL-FOTO-PERFIL colocaremos la url de nuestra foto, previamente alojada. Debemos tener en consideración que la foto debe tener como mínimo un tamaño de 220x220px.

3.§ Damos a Guardar.

4.§ Ahora vamos a Diseño - Añadir un gadget - HTML/Javascript. Pegaremos el siguiente código HTML:
<ul class='ch-grid'>
<li>
<div class='ch-item ch-img-1'>
<div class='ch-info-wrap'>
<div class='ch-info'>
<div class='ch-info-front ch-img-1'></div>
<div class='ch-info-back'>
<h3>NOMBRE-AUTOR-BLOG</h3>
<p>DESCRIPCIÓN</p><a href="AQUI-ENLACE-TWITTER" target="_blank"><img title="Sígueme en Twitter" widht="28" height="28" src="http://2.bp.blogspot.com/-iAH8FsMtVCk/U8RVrr7CsYI/AAAAAAAACBQ/iGLizY3Tpek/s1600/Twitter-diyvapng.png" /></a><a href="AQUI-ENLACE-YOUTUBE" target="_blank"><img title="Estoy en YouTube" widht="28" height="28" src="http://2.bp.blogspot.com/-VhSq7QxB6dw/U8RV2e4t01I/AAAAAAAACBY/VF1SnbM4KhA/s1600/Youtube-diyva.png" /></a><a href="AQUI-ENLACE-FACEBOOK" target="_blank"><img title="Sígueme en Facebook" widht="28" height="28" src="http://2.bp.blogspot.com/-l8uzNOzVdIg/U8RVIp4fw_I/AAAAAAAACA4/4vMym8X36Dk/s1600/Facebook-diyva.png" /></a><a href="AQUI-ENLACE-PINTEREST" target="_blank"><img title="Sígueme en Pinterest" widht="28" height="28" src="http://4.bp.blogspot.com/-FyXzh2ZZOlg/U8RVcYC16pI/AAAAAAAACA8/-7UpxAuZjHk/s1600/Pinterest-diyva.png" /></a>
</div>
</div>
</div>
</div>
</li>
</ul>
» Reemplazamos las URL por las distintas URL de nuestras redes sociales. Podemos agregar más o quitar algunas. Damos a Guardar.
Si tienes alguna duda, puedes hacerla en los comentarios.

¿Te gustó el efecto?

Visto en : Tympanus

4 opinaron:

Nuria Ferreras

Esto me lo guardo para hacerlo más adelante en el blog. ¡Me encanta el efecto!

Jéssica YK

» Nuria Ferreras:
Qué bueno que te haya gustado el efecto y espero que prontito lo vea en tu blog.

Saludos !

Responder
Obed Calva

Muy bueno, estoy pensando seríamente en ponerlo en mi blog de plantillas responsive gratis para blogger.

Jéssica YK

» Obed Calva:
Me alegra que el tutorial te haya sido útil y ya me avisas cuando lo implementes en tu blog.

S@lu2

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio