Mybb Efektli Link Yapımı

[Ciri]

Anlatım - Video Sahibi - Paylaşan: TShujin
Kaynak:

Kod: Tümünü Seç Tümünü Kopyala

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: Tümünü Seç Tümünü Kopyala

http://tympanus.net/codrops/2013/08/06/creative-link-effects/

Şekillerin bulunduğu site

Kod: Tümünü Seç Tümünü Kopyala

http://www.nasil.gen.tr/ozel-isaretler-nasil-yapilir.html#bolum12

CSS Kodları:

Kod: Tümünü Seç Tümünü Kopyala

.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.

[L34DRi]

Teşekkürler. Güzel bir tasarım ve anlatım.

[zorbaba]

en çok aradığım şeydi çok yaşa

[Novruz]

Derdime Derman :)
Teşekkürler +Rep..

[Ciri]

Yorumlar için teşekkürler..

[kaRanLık-61]

Yapan kişide başka yerden görerek yaptı belli güzel paylaşım oldu.

[Ciri]

İlk izlediğimde direk benim aklıma da o geldi :) Yorumunuz için teşekkürler.