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 Modos de visualización

  
(#1)
Old  Administrador
">
Administrador
Sorel
56225906705/02/2009PeruAdministrador de CPortadahttp://i.imgur.com/PTSSOex.png
 


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, Invitado a CPortada —
"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.
http://www.cportada.forum.st

  
(#2)
Old  Principiante
">
Principiante
AdrianSuarezMeza
33019/02/2014Venezuela
 

ver

  
(#3)
Old  Principiante
">
Principiante
AdrianSuarezMeza
33019/02/2014Venezuela
 

no me agarra. Ayuda

  
(#4)
Old  
Contenido patrocinado
 

Comentar con facebook:
 
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