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.
Efektlerin bulunduğu site:
Şekillerin bulunduğu site:
CSS Kodları:
Kaynak belirtmek şartı ile paylaşım serbesttir. İyi forumlar
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/Kod:
http://www.nasil.gen.tr/ozel-isaretler-nasil-yapilir.html#bolum12CSS 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
