15-04-2014, Saat:22:00
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
) 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 