MyBB Çözümleri & İpuçları ve Modifikasyonları

[Modifikasyon] MyBB Haraketli Avatar Çerçevesi

Scorpion tarafından yazıldı, , Konu ID:512

http://warezzers.net/uploads/avatars/avatar_1.gif?dateline=1629833433
x-notlegal.
Administrators
Seviye:
3
Gönderileri:
112
Beğenileri:
10
Rep Puanı:
4
Kredi:
334
27.08.2021, 18:31
Son Düzenleme: 29.08.2021, 01:12, Düzenleyen: Scorpion.
#1
Herhangi bir css kalıbına Aşağıdaki kodları yapıştırın;
Alıntı:.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:#c10f0c;

  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: progidgülücükXImageTransform.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:#d8100c #c10f0c #a93b3d #b32a28;

  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: #ffffff #120203 #ffffff #180000;

  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);
}



Daha sonra Şablonlar -> Temanız -> Post Bit Şablonlar -> postbit_avatar Gel içerisindekileri Aşağıdaki kodlarla değiştir.
Alıntı:<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>

Çıktı:
[Resim: qqs6ccu.jpg]
  
[Resim: 97vqy7.gif]

Konuyu Okuyanlar: 1 Ziyaretçi