Cargando...
Notificaciones Password  Username

Regresar CPortada - Mas que un foro, tu Comunidad.  » Recursos para Forumotion - Foroactivo » PUNBB
Actualizar esta página Fancy Hover Effect con CSS3 en Avatar
Nombre de Usuario:
Contraseña:
   

Responder al tema
 
Herramientas Fancy Hover Effect con CSS3 en Avatar 2x97uModos de visualización Fancy Hover Effect con CSS3 en Avatar 2x97u

Fancy Hover Effect con CSS3 en Avatar UFXmlYjFancy Hover Effect con CSS3 en Avatar ZcHKMjL
(#1)
Old  Fenix de Plata
">
Sorel
Fenix de Plata
Sorel
605104736705/02/2009PeruAdministrador de CPortadahttps://i.imgur.com/6szgbCX.jpg
 
 http://www.cportada.forum.st Sorel seasandlert@gmail.com https://www.facebook.com/vBSorel https://twitter.com/cportada
icon1 Fancy Hover Effect con CSS3 en Avatar - el 29/9/2013, 6:06 pm


En este tutorial se muestra la forma de crear efectos hover lujo en miniaturas utilizando CSS3 transiciones con CSS: hover pseudo-clase.

1º - Editar plantillas:
En viewtopic_body encontrar:

Código:
{postrow.displayed.POSTER_AVATAR}
Cambiar por:

Código:
<div class="imgholder">
 <div class="outer1 circle"></div>
 <div class="outer2 circle"></div>
 <figure>
 {postrow.displayed.POSTER_AVATAR}
 </figure>
</div>
2º - La edición de hojas de estilo CSS:
En CSS añadir:

Código:
.imgholder{
      position:relative;
      width:120px;
      height:120px;
      border-radius:100px;
      float:left;
      margin:40px 30px;
    }
    /* thumbnails style */
    .imgholder img{
      position:absolute;
      left:0;
      top:0;
      width:120px;
      height:120px;
      z-index:5;
      border-radius:100px;
      -moz-border-radius:100px;
      -webkit-border-radius:100px;
      opacity:0.3;
      filter: alpha(opacity = 30);
      box-shadow:0 0 5px #000;
      -moz-box-shadow:0 0 5px #000;
      -webkit-box-shadow:0 0 5px #000;
    
     transform: scale(0.5,0.5);
      -ms-transform: scale(0.5,0.5);
      -moz-transform: scale(0.5,0.5);
      -webkit-transform: scale(0.5,0.5);
    
     transition:
          opacity 1s,
          transform 1s ease-in-out 0.3s;
      -moz-transition:
          opacity 1s,
          -moz-transform 1s ease-in-out 0.3s;
      -webkit-transition:
          opacity 1s,
          -webkit-transform 1s ease-in-out 0.3s;
    }
    .imgholder:hover img{
      opacity:1;
      filter: alpha(opacity = 100);
      transform: scale(1,1);
      -ms-transform: scale(1,1);
      -moz-transform: scale(1,1);
      -webkit-transform: scale(1,1);
    }

    .imgholder figcaption{
      position:absolute;
      left:-5px;
      top:40%;
      width:130px;
      color:#004E87;
      font-weight:bold;
      text-shadow:-1px -1px 0 #fff;
      z-index:4;
    
     transition:
          top 0.5s ease-out;
      -moz-transition:
          top 0.5s ease-out;
      -webkit-transition:
          top 0.5s ease-out;
    }
    .imgholder:hover figcaption{
      top:120%;
    }
    /* decorations style */
    .imgholder .circle{
      position:absolute;
      border-radius:100px;
      -moz-border-radius:100px;
      -webkit-border-radius:100px;
    }
    .imgholder .outer1{
      top:-8px;
      left:-8px;
      width:120px;
      height:120px;
      z-index:2;
      border:8px solid;
      border-color:#cdf16c;
      box-shadow:0 0 3px #5b8d22;
      -moz-ox-shadow:0 0 3px #5b8d22;
      -webkit-box-shadow:0 0 3px #5b8d22;
      background: #ffffff;
      background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #99cc99 100%);
      background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#99cc99));
      background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#99cc99 100%);
      background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#99cc99 100%);
      background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#99cc99 100%);
      background: radial-gradient(center, ellipse cover, #ffffff 0%,#99cc99f 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#99cc99',GradientType=1 );
      transform:rotate(90deg);
      -ms-transform:rotate(90deg);
      -moz-transform:rotate(90deg);
      -webkit-transform:rotate(90deg);
      transition:
          transform 1.8s ease-in-out,
          box-shadow 1s ease-out,
          border-color 1.5s;
      -moz-transition:
          -moz-transform 1.8s ease-in-out,
          -moz-box-shadow 1s ease-out,
          border-color 1.5s;
      -webkit-transition:
          -webkit-transform 1.8s ease-in-out,
          -webkit-box-shadow 1s ease-out,
          border-color 1.5s;}
    .imgholder:hover .outer1{
      border-color:#5b8d22 #cdf16c #5b8d22 #cdf16c;
      box-shadow:0 0 10px #33cc33;
      -moz-box-shadow:0 0 10px #33cc33;
      -webkit-box-shadow:0 0 10px #33cc33;
      transform:rotate(-10deg);
      -ms-transform:rotate(-10deg);
      -moz-transform:rotate(-10deg);
      -webkit-transform:rotate(-10deg);}
    .imgholder .outer2{
      top:-18px;
      left:-18px;
      width:136px;
      height:136px;
      z-index:1;
      border:10px solid;
      border-color: #cdf16c rgb(141, 177, 62)#cdf16c rgb(141, 177, 62);
      box-shadow:0 0 20px #5b8d22;
      -moz-box-shadow:0 0 20px #5b8d22;
      -webkit-box-shadow:0 0 20px #5b8d22;
      opacity:0;
      filter: alpha(opacity = 0);
      transform: scale(1.3,1.3) rotate(180deg);
      -ms-transform: scale(1.3,1.3) rotate(180deg);
      -moz-transform: scale(1.3,1.3) rotate(180deg);
      -webkit-transform: scale(1.3,1.3) rotate(180deg);
      transition:
          opacity 0.5s,
          transform 0.7s ease-out;
      -moz-transition:
          opacity 0.5s,
          -moz-transform 0.7s ease-out;
      -webkit-transition:
          opacity 0.5s,
          -webkit-transform 0.7s ease-out;}
    .imgholder:hover .outer2{
      opacity:0.9;
      filter: alpha(opacity = 90);
      transform: scale(1,1) rotate(-10deg);
      -ms-transform: scale(1,1) rotate(-10deg);
      -moz-transform: scale(1,1) rotate(-10deg);
      -webkit-transform: scale(1,1) rotate(-10deg);}
P.D.: Es posible que funcione también en PhpBB2, cualquier duda pueden hacerla en este post,



Bienvenido a CPortada, Invitado.

Fancy Hover Effect con CSS3 en Avatar Cxu3K4Z

"Tu edad no define tu madurez, tus notas no definen tu inteligencia y los rumores no definen quien eres..."
"Una mirada fría, no siempre significa un corazón sin amor..."

Ven y transfórmate en leyenda o márchate y permanece en el olvido.

Fancy Hover Effect con CSS3 en Avatar UFXmlYjFancy Hover Effect con CSS3 en Avatar ZcHKMjL
(#2)
Old  Principiante
">
AdrianSuarezMeza
Principiante
AdrianSuarezMeza
33019/02/2014Venezuela
 
icon1 Re: Fancy Hover Effect con CSS3 en Avatar - el 19/2/2014, 10:17 pm

ver

Fancy Hover Effect con CSS3 en Avatar UFXmlYjFancy Hover Effect con CSS3 en Avatar ZcHKMjL
(#3)
Old  Principiante
">
AdrianSuarezMeza
Principiante
AdrianSuarezMeza
33019/02/2014Venezuela
 
icon1 Re: Fancy Hover Effect con CSS3 en Avatar - el 19/2/2014, 10:18 pm

no me agarra. Ayuda

Fancy Hover Effect con CSS3 en Avatar UFXmlYjFancy Hover Effect con CSS3 en Avatar ZcHKMjL
(#4)
Old  
Contenido patrocinado
 
icon1 Re: Fancy Hover Effect con CSS3 en Avatar -

Comentar con facebook:
Fancy Hover Effect con CSS3 en Avatar Imagen11
 » Temas similares en otros foros
» Problema con el hover del avatar
» [PHPBB2] Cambiar de posición el Avatar y el Rango
» Pedido de Firma y Avatar
» No aparece la opcion Avatar
» Como puedos poner el avatar al lado derecho
 
Permisos de este foro:
No puedes responder a temas en este foro.

 Los Códigos BB están Activado
 Los Emoticonos están Activado
 Código [IMG] está Activado
 Código HTML está Activado