Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
[TIP] Efecto en Avatar
#1
Bueno el efecto es el siguiente:
[Imagen: khxSM.png]
es muy sencillo pero me gusto y se hace en css comenzemos y demo aqui
Buscan en su Display.template.php esto:
Código:
                                <li class="avatar">
                                    <a href="', $scripturl, '?action=profile;u=', $message['member']['id'], '">
                                        ', $message['member']['avatar']['image'], '
                                    </a>
                                </li>
y remplazan por esto:
Código:
                                <li class="image-avatar">
                                    <a href="', $scripturl, '?action=profile;u=', $message['member']['id'], '">
                                        ', $message['member']['avatar']['image'], '
                                    </a>
                                </li>
y despues agrean esto al final de su index.css del theme que usen:
Código:
.image-avatar img{
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
}


.image-avatar img:hover{
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-o-transform:scale(1.2);
-moz-box-shadow: -1px -1px 6px rgb(132, 132, 132), -1px 1px 6px rgb(132, 132, 132), 1px -1px 6px rgb(132, 132, 132), 1px 1px 6px rgb(132, 132, 132);
box-shadow: -1px -1px 6px rgb(132, 132, 132), -1px 1px 6px rgb(132, 132, 132), 1px -1px 6px rgb(132, 132, 132), 1px 1px 6px rgb(132, 132, 132);
-webkit-box-shadow: -1px -1px 6px rgb(132, 132, 132), -1px 1px 6px rgb(132, 132, 132), 1px -1px 6px rgb(132, 132, 132), 1px 1px 6px rgb(132, 132, 132);
}
FUENTE: TodoSMF
#2
Buen tip azecktr12
gracias por aportarlo,se ve muy chulo el efecto Sonrisa
saludos
#3
los links estan caidos Guiño
WWW
#4
A pesar de lo de los links, está muy wapo el efecto Gran sonrisa
#5
se ve chido jeje si me queo con smf fijo lo uso gran aporte amigo ta chulo xD.
WWW
#6
Perdon, pero no me gusto el Efecto :o .
Cualquier duda, pregunta, comentario... Aquí estoy Guiño
#7
Está genial, pero una duda, siempre se agranda así o es cuando apsas el ratón y otra cosa,la imagen que tengas se pone asi? asque se sobre sale del recuadro
WWW
#8
Yo prefiero el perfil normal el efecto no me gusta mucho, pero seguro que le gustara a alguien.
#9
Esta genial, ya lo puse en mi fprp, pero arriba se ve 
WWW
#10
Gracias por el efecto, se ve interesante...


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  El avatar se queda muy pequeño Oderlods 8 1,719 05-05-2012, 05:30 PM
Último mensaje: light21
  Mouseover sobre botón con efecto fade y jQuery en Sociales SMF azecktR12 2 1,001 21-01-2012, 05:11 AM
Último mensaje: AHRLabs
  Mouseover sobre botón con efecto fade y jQuery en Sociales SMF DeeRz 0 884 18-09-2011, 08:14 PM
Último mensaje: DeeRz



Usuarios navegando en este tema: 1 invitado(s)