fraNNNta-Design

Bine a-ti venit pe fraNNNta-Design
conectarecreaza cont



Efect avatar[punbb]

Distribuiţi
Lucian OnlineOffline
avatar
Rank: Membru
Respect : 100%
Mesaje : 251
Inscris : 30/08/2013

biggri Efect avatar[punbb]

Mesaj Scris de Lucian la data de Sam Apr 25, 2015 9:05 am

Intrati in viewtopic_body,apoi cautati {postrow.displayed.POSTER_AVATAR} dupa care il inlocuiti cu:

Cod:
       <div class="imgholder"><div class="outer1
circle"></div><div class="outer2
circle"></div><figure>{postrow.displayed.POSTER_AVATAR}</figure></div>

Apoi adaugati acest script in CSS:

Cod:
        .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:#DEEBFC;
              box-shadow:0 0 3px #AFD3FF;
              -moz-ox-shadow:0 0 3px #AFD3FF;
              -webkit-box-shadow:0 0 3px #AFD3FF;
              background: #ffffff;
              background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e2efff 100%);
             
 background: -webkit-gradient(radial, center center, 0px, center center,
 100%, color-stop(0%,#ffffff), color-stop(100%,#e2efff));
              background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
              background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
              background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
              background: radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
             
 filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#ffffff', endColorstr='#e2efff',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:#0088EA #7FC9FF #0088EA #7FC9FF;
              box-shadow:0 0 10px #0285E2;
              -moz-box-shadow:0 0 10px #0285E2;
              -webkit-box-shadow:0 0 10px #0285E2;
              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: #D6E5FC #9BC8FF #D6E5FC #9BC8FF;
              box-shadow:0 0 20px #8EB9FF;
              -moz-box-shadow:0 0 20px #8EB9FF;
              -webkit-box-shadow:0 0 20px #8EB9FF;
              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);}

Si uite ce a iesit:


Sus
Vezi profilul utilizatorului Vizualizeaza profilul
Anthalius OnlineOffline
avatar
Rank: Membru
Respect : 100%
Mesaje : 300
Inscris : 13/07/2016

biggri Re: Efect avatar[punbb]

Mesaj Scris de Anthalius la data de Joi Iul 21, 2016 2:17 am

Multumesc frumos. Felicitaari


Sus
Vezi profilul utilizatorului Vizualizeaza profilul

    Acum este: Joi Dec 13, 2018 8:27 pm