MyBBDepo - Türkiyenin MyBB Deposu Forumuna Hoşgeldiniz
Eğer sitemize yaptığınız ilk ziyaretiniz ise, lütfen öncelikle Forum Kurallarını okuyunuz. Forumumuzda bilgi alışverişinde bulunabilmeniz için Kayıt olmalısınız. Üye olmayanlar forumumuzdan yararlanamazlar.
Eğer zaten kayıtlı kullanıcı iseniz, lütfen kullanıcı adınız ve şifreniz ile, Giriş yapınız. (Sitemize üyelik ücretsizdir).
usameavci avatar
Konuyu Oyla:
  • Derecelendirme: 5/5 - 2 oy
  • 1
  • 2
  • 3
  • 4
  • 5

Derecelendirme: 5/5 - 2 oy

Mybb Efektli Link Yapımı


Sponsor Reklam
media venus

Çevrimdışı usameavci
 Tarih: 15-04-2014, Saat:22:00
(Son Düzenleme: 18-04-2014, Saat:00:21, Düzenleyen: usameavci.)
#1
Merhaba arkadaşlar. Bayadır efektli link yapımı ile ilgili konular açılıyor. Bu gün boş zamanım vardı ve videolu anlatım yaptım. Mikrofon olmadığı için yazılı olarak anlattım. Mikrofon aldığımda sesli oalrak da anlatımlar yapacağım.

Videoda kullandığım bazı kodları ve site adreslerini buraya ekleyeceğim. Sizlerden ricam hazır kod diye al - kullan - geç yapmamanız. Ben bu videoyu öğrenmeniz için hazırladım. Önce videoyu izleyin ve nasıl yapıldığına bir bakın. Yaptıklarımı anladığınızda kodlara ihtiyaç duyacağınızı sanmıyorum fakat yinede yapamadıysanız kodları kullanın.
Kodlar ve Siteler videonun altındadır.

Efektlerin bulunduğu site:
Kod:
http://tympanus.net/codrops/2013/08/06/creative-link-effects/
Şekillerin bulunduğu site:
Kod:
http://www.nasil.gen.tr/ozel-isaretler-nasil-yapilir.html#bolum12

CSS Kodları:
Kod:
.trow1 a::before,
.trow1 a::after {
    display: inline-block;
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
    -moz-transition: -moz-transform 0.3s, opacity 0.2s;
    transition: transform 0.3s, opacity 0.2s;
}

.trow1 a::before {
    margin-right: 5px;
    content: '◤';
    -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    transform: translateX(20px);
}

.trow1 a::after {
    margin-left: 5px;
    content: '◢';
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    transform: translateX(-20px);
}

.trow1 a:hover::before,
.trow1 a:hover::after,
.trow1 a:focus::before,
.trow1 a:focus::after {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    transform: translateX(0px);
}
.trow2 a::before,
.trow2 a::after {
    display: inline-block;
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
    -moz-transition: -moz-transform 0.3s, opacity 0.2s;
    transition: transform 0.3s, opacity 0.2s;
}

.trow2 a::before {
    margin-right: 10px;
    content: '◤';
    -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    transform: translateX(20px);
}

.trow2 a::after {
    margin-left: 10px;
    content: '◢';
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    transform: translateX(-20px);
}

.trow2 a:hover::before,
.trow2 a:hover::after,
.trow2 a:focus::before,
.trow2 a:focus::after {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    transform: translateX(0px);
}

Kaynak belirtmek şartı ile paylaşım serbesttir. İyi forumlar Melek - Masum
Cevapla
Sponsor Reklam
sponsor reklam sponsor reklam

İzinli Screwy
 Tarih: 15-04-2014, Saat:22:05
(Son Düzenleme: 15-04-2014, Saat:22:12, Düzenleyen: Screwy.)
#2
Eline sağlık hocam. Güzel konu Gülümseme

Bu arada işletim sistemin nedir? Birde o arkaplanı istiyorum Açık Ağızlı Gülümseme
Cevapla
Bunu Beğenenler:

Çevrimdışı usameavci
 Tarih: 15-04-2014, Saat:22:21
#3
(15-04-2014, Saat:22:05)Screwy Adlı Kullanıcıdan Alıntı: Eline sağlık hocam. Güzel konu Gülümseme

Bu arada işletim sistemin nedir? Birde o arkaplanı istiyorum Açık Ağızlı Gülümseme

İşletim sistemi win 7 arkaplanı videoyu çekmeden Önce yaptım Açık Ağızlı Gülümseme PSD atarım pm'den Melek - Masum

Win7 teası için
Kod:
http://skinpacks.com/
bu siteye bakabilirsin. Baya iyi şeyler var ^^
Cevapla
Bunu Beğenenler: Screwy , Manager

Çevrimdışı MelihAtasever
 Tarih: 15-04-2014, Saat:22:53
#4
elinize emeğinize sağlık hocam gene süpersiniz Gülümseme
Cevapla
Bunu Beğenenler:

Çevrimdışı tsunami
 Tarih: 15-04-2014, Saat:23:20
(Son Düzenleme: 15-04-2014, Saat:23:25, Düzenleyen: tsunami.)
#5
Güzel konu olmuş. Bazı görsel uygulamaları birilerinin tekelinden kurtarmak güzel birşey.. Sanki kendileri kodlamış gibi göstermesi insanı sinir ediyor. Bu arada malum site hemen cezanı kesmiş, demek ki devamlı burayı dikisliyorlarmış..
Cevapla
Bunu Beğenenler:

Çevrimdışı usameavci
 Tarih: 16-04-2014, Saat:00:37
#6
Yorumlarınız için sağolun arkadaşlar. Ben buralarda oldukça o tekellerin hepsini elimden geldikçe dağıtacağım Gülümseme ( Hukuki sınırlar içerisinde Dil Çıkarma ) O forumdan biri daha önce sormuştu pm ile siteyi falan göstermiştim. O ara uyarı seviyem 100% oldu. Dün de zorlarına gitmiş banlamışlar ^^ Eğer sağda solda gördüğünüz kullanışlı şeyler varsa mail yada pm atın boş olduğum zamanlarda butarz anlatımlar yapmayı planlıyorum. Kısmetse 2. Videomda sıfırdan portal yapımını anlatacağım. Fakat php bilgisi olmayanlar için sıkıntılı olabilir Melek - Masum
Cevapla
Bunu Beğenenler:

Çevrimdışı panelink
 Tarih: 16-04-2014, Saat:02:28
#7
elıne saglık guzel anlatım olmus emegının karsılıgnı verırler umarım
Cevapla
Bunu Beğenenler:

Çevrimdışı Emektar
 Tarih: 16-04-2014, Saat:08:56
#8
Hocam çok teşekkürler elinize emeğinize sağlık. Süper
Cevapla
Bunu Beğenenler:

 


Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
Video Mybb Anlık Özel Mesaj Bildirimi Part 1 usameavci 9 2,364 24-11-2016, Saat:21:38
Son Yorum: batuhanbarut
  CSS İle kayan logo yapımı DarkDevilz 1 154 02-09-2016, Saat:12:49
Son Yorum: R34LiTy
Video [1.8] MyBB Kurulumu - Nasıl Kurulur ? Nasıl Türkçe Yapılır ? ebagcuvan 2 579 23-05-2016, Saat:22:41
Son Yorum: ebagcuvan
  MyBB Forum Kurulumu (Bedava Hosting-Free Unlimited) WebCRY 5 644 27-03-2016, Saat:16:46
Son Yorum: WebCRY
  [1.8] Kare Thead Yapımı - MyBB Cixx 4 1,170 10-06-2015, Saat:02:44
Son Yorum: ßyßilæl



Konuyu Okuyanlar: 1 Ziyaretçi