Konuyu Oyla:
  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
Mybb Efektli Link Yapımı
#1
Anlatım - Video Sahibi - Paylaşan: TShujin
Kaynak:
Kod:
http://tr.mybbdepo.com/mybb-efektli-link-yapimi-konusu.html
Demo: http://wtplus.10tl.net/index.php
Not: demo sitede forum isimlerinin ve nicklerin üstüne gelin. Öyle anlaşılır. Ayrıca "Arama yaptım sonuç çıkmadı"

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.
Ara
Cevapla PGM
Teşekkür verenler:
#2
Teşekkürler. Güzel bir tasarım ve anlatım.
GÖREVİNİ BIRAKTI
Önce AHLAK ve MANEVİYAT

Hakk’ın tesisi için çalışmamakla Batıl’ın hakimiyeti için çalışmak arasında fark yoktur.



Prof. Dr. Necmettin ERBAKAN


TÜM KONULARIM

Başaɾının içeɾiğindeki en önemli, biɾicik malzeme, insanlaɾla nasıl geçineceğini iyi bilmektiɾ. / Theodore Roosevelt
Ara
Cevapla PGM
Teşekkür verenler:
#3
en çok aradığım şeydi çok yaşa
Ara
Cevapla PGM
Teşekkür verenler:
#4
Derdime Derman :)
Teşekkürler +Rep..
Ara
Cevapla PGM
Teşekkür verenler:
#5
Yorumlar için teşekkürler..
Ara
Cevapla PGM
Teşekkür verenler:
#6
Yapan kişide başka yerden görerek yaptı belli güzel paylaşım oldu.
Tüm Destek Forumun Kuralları
Görevli Kuralları
Ücretli Mybb Tema Tasarım ve Kodlama , Bootstrap(html/css) duyarlı kodlamalar Yapılır.
Prof. Dr. MyBB Öğretmeni kaRanLık-61( Mustafa SEVİM )[ 2010-2024 => 10TL'de 14 Sene ]

İki Tarafta Zifiri kaRanLık




Mutlu Son İstiyorsan Çabalamalısın. Sadece Oturduğu Yerden Başarıya ulaşan varlık tavuktur. Bir Kurt Asla Evcilleşip Köpek Olmaz...
Cevapla PGM
Teşekkür verenler:
#7
İlk izlediğimde direk benim aklıma da o geldi :) Yorumunuz için teşekkürler.
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