Konuyu Oyla:
  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
MyBB Hareketli Dönen Avatar
#1
http://baglanforum.10tl.net/showthread.php?tid=759&pid=1918#pid1918

postbit_avatar şablonunu boşaltın alttakileri yapıştırın;
Kod:
<div align="center" class="imgholder">
        <div class="outer1 circle"/></div>
        <div class="outer2 circle"/></div>
        <figure>
<div class="postuseravatar1" href="{$post['profilelink_plain']}" title="{vb:rawphrase {vb:raw post['onlinestatusphrase']}, {vb:raw post.username}}">
<center>
<img src="{$post['avatar']}" alt="{$post['avatar']}" title="{$post['avatar']}"/>
</center>
</div>
<figcaption class="caption">
            <span class="username">
             <div class="username_container">
            
            </span>
    </figcaption>        
        </figure>
    </div>


Temanızın css alanına ekleyin;

Kod:
.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);
}



Yapımcı ; DieseL
Ara
Cevapla PGM
Teşekkür verenler:
#2
Oha süper :D
Güzel üslupla söz söyleyenleriz;
Mesih’in talebesiyiz; nice ölülere tuttuk da can üfürdük biz.

Hz.Mevlana


 Türk çocuğu ecdadını tanıdıkça daha büyük işler yapmak için kendinde kuvvet bulacaktır.
Mustafa Kemal Atatürk


Saint


Ara
Cevapla PGM
Teşekkür verenler:
#3
O kadarda iyi değil canım :)
Ara
Cevapla PGM
Teşekkür verenler:
#4
(11-04-2014 Saat: 15:19)DieseL Nickli Kullanıcıdan Alıntı: O kadarda iyi değil canım :)

Abi çok iyi diyorum şimdiye kadar çıkanlara taş çıkartır bu D:
Güzel üslupla söz söyleyenleriz;
Mesih’in talebesiyiz; nice ölülere tuttuk da can üfürdük biz.

Hz.Mevlana


 Türk çocuğu ecdadını tanıdıkça daha büyük işler yapmak için kendinde kuvvet bulacaktır.
Mustafa Kemal Atatürk


Saint


Ara
Cevapla PGM
Teşekkür verenler:
#5
Aynen Süper +Rep
Ara
Cevapla PGM
Teşekkür verenler:
#6
Thumbs Up 
Güzelmiş.
Ara
Cevapla PGM
Teşekkür verenler:
#7
hangi css nin içine kopyalıcaz bunları global mı ne ?
Ara
Cevapla PGM
Teşekkür verenler:
#8
evt global
Ara
Cevapla PGM
Teşekkür verenler:
#9
Çok Güzel :)
Senmi Yaptın?
Ara
Cevapla PGM
Teşekkür verenler:
#10
Evet O Yapmış

Alıntı:Yapımcı ; DieseL
Ara
Cevapla PGM
Teşekkür verenler:
#11
Ben yapmasam ben yapmadım veya alıntı derim değil mi ?
hangi hakla yapmadığım şeye benim kullanıcı adımı ekleyim ?

Rica ederim avatara uygun postbit'de ekleyeceğim.
Ara
Cevapla PGM
Teşekkür verenler:
#12
Süper olmuş +rep ...
Ara
Cevapla PGM
Teşekkür verenler:
#13
(12-04-2014 Saat: 03:35)DieseL Nickli Kullanıcıdan Alıntı: Ben yapmasam ben yapmadım veya alıntı derim değil mi ?
hangi hakla yapmadığım şeye benim kullanıcı adımı ekleyim ?

Rica ederim avatara uygun postbit'de ekleyeceğim.


Mesela Mesaj Sayısının Üzerinde Gelince İçinden Çıksın Mavi Çizgiler
Ara
Cevapla PGM
Teşekkür verenler:


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 1 Ziyaretçi



500000 -

Online Shopping App
Online Shopping - E-Commerce Platform
Online Shopping - E-Commerce Platform
Feinunze Schmuck Jewelery Online Shopping