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
630105706705/02/2009PeruAdministrador de CPortadahttps://i.imgur.com/6szgbCX.jpg
 
 http://www.cportada.forum.st https://www.facebook.com/vBSorel https://twitter.com/cportada
Fancy Hover Effect con CSS3 en Avatar Empty Fancy Hover Effect con CSS3 en Avatar - 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,

Fancy Hover Effect con CSS3 en Avatar UFXmlYjFancy Hover Effect con CSS3 en Avatar ZcHKMjL
(#2)
Old  Principiante
">
AdrianSuarezMeza
Principiante
AdrianSuarezMeza
33019/02/2014Venezuela
 
Fancy Hover Effect con CSS3 en Avatar Empty Re: Fancy Hover Effect con CSS3 en Avatar - 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
 
Fancy Hover Effect con CSS3 en Avatar Empty Re: Fancy Hover Effect con CSS3 en Avatar - 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
 
Fancy Hover Effect con CSS3 en Avatar Empty Re: Fancy Hover Effect con CSS3 en Avatar -

Comentar con facebook:
Fancy Hover Effect con CSS3 en Avatar Imagen11
 » Temas similares en otros foros
» Luigui con HTML + CSS3
» Resplandor al avatar
» Avatar On Sets
» Redimensionar avatar con CSS
» poner Bordes Al Avatar
 
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