Konuyu Oyla:
  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
Çerçeveli Renk Değiştiren Avatar Yapımı
#1
Avatarın etrafında renk değiştiren border vardır.
NfOEaXUGQzCZGffxeQpADQ.png
Göremeyenler:
Kod:
https://image.prntscr.com/image/NfOEaXUGQzCZGffxeQpADQ.png
veya
https://i.hizliresim.com/ok3nkb.png

CSS Kodu:
Kod:
#avatarr img {
   background: #fff;
    transition: .25s;
    border-radius: 0px;
}

#avatarr img:hover {
    transition: .25s;
    border-radius: 1000px;
}

@keyframes ani2 {
   25% {
       border: 2px solid #3498db;
}

50% {
       border: 2px solid #8e44ad;
}

75% {
       border: 2px solid #d35400;
}

100% {
       border: 2px solid #16a085;
}
}
div.animation2 img {
    border: 2px solid #f1c40f;
   animation-name: ani2;
   animation-delay: 1s;
   animation-duration: 1s;
   animation-iteration-count: 999999999999;
   animation-direction: reverse;
   animation-timing-function: linear;
}

postbit_avatar gir ve değiştir
Kod:
<div id="avatarr" class="animation2"><center><a href="{$post['profilelink_plain']}"><img src="{$useravatar['image']}" alt="" height="125px" width="125px" /></a></center></div>

Not: height ve width yerinden avatar boyunu ayarlaya bilirsiniz.

Demo:
Kod:
http://weblost.net/konu-renk-degistiren-avatar-yapimi.html

Not: En Uyumlu Default'ta Çalışır.
Not2: Kullanmadan önce kod yedeklerini alınız.
Ara
Cevapla PGM
Teşekkür verenler:
#2
Gayet iyi eline sağlık.
Ara
Cevapla PGM
Teşekkür verenler:
#3
Eline sağlık.
Cevapla PGM
Teşekkür verenler:
#4
Ben yapmıştım böyle bişey gören görmüştür :dd
Ara
Cevapla PGM
Teşekkür verenler:
#5
(25-06-2017 Saat: 15:18)Orion Nickli Kullanıcıdan Alıntı: Ben yapmıştım böyle bişey gören görmüştür :dd

Olabilir hocam sonuçta kodlar bize ait değil :)
(ait değil derken yanlış anlamayın kodu ben yazdım kodları biz oluşturmadık anlamında :D)
Ara
Cevapla PGM
Teşekkür verenler:
#6
Geçiş sert olmuş.Transition`u biraz arttırırsan daha iyi olur.Eline Sağlık.
Ara
Cevapla PGM
Teşekkür verenler:
#7
Eline sağlık.
Ara
Cevapla PGM
Teşekkür verenler:
#8
Razer gibi olmuş Maaşallah :)
- Güzel olmuş hocam elinize sağlık.
& digital artist
sans toi les émotions d’aujourd’hui ne sont que la peau morte des émotions d’autrefois.
Ara
Cevapla PGM
Teşekkür verenler:


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 1 Ziyaretçi



***

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