Güncelleme : 3 Kasım 2016 21:15 Responsive Menü Yapımı (Yeni Yazı) Merhaba Arkadaşlar HTML ve CSS ile basit bir Menü yapımını anlattım, Videoyu izleyebilirsiniz kodlarada videonun altından ulaşabilirsiniz.
Merhaba Arkadaşlar bu dersimde videolu olarak sizlere CSS de Background position Kullanarak Sosyal medya ikonları yapımını gösterdim, Aşağıdan izleyebilirsiniz. İyi Seyirler :) CSS ile Sosyal Medya İkonları Yapımı CSS ile Sosyal Medya İkon Kodları Videoda nasıl yapıldığını tamamen anlattım kodlarına aşağıdan ulaşabilirsiniz. index.html Kodları
|
1 2 3 4 5 |
<div class="center"> <div class="facebook"></div> <div class="twitter"></div> <div class="google-plus"></div> </div> |
style.css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
*{margin:0;padding:0;} .center{ width:250px; margin: 100px auto; } .facebook{ float:left; width:32px; height:32px; background:url("images/facebook.png"); transition:background 0.5s; -moz-transition:background 0.5s; -webkit-transition:background 0.5s; -webkit-border-radius:30px; -moz-border-radius:30px; margin-right:20px; } .facebook:hover{ background-position:0px -32px; cursor:pointer; } .twitter{ float:left; width:32px; height:32px; background:url("images/twitter.png"); transition:background 0.5s; -moz-transition:background 0.5s; -webkit-transition:background 0.5s; -webkit-border-radius:30px; -moz-border-radius:30px; margin-right:20px; } .twitter:hover{ background-position:0px -32px; cursor:pointer; } .google-plus{ float:left; width:32px; height:32px; background:url("images/google-plus.png"); transition:background 0.5s; -moz-transition:background 0.5s; -webkit-transition:background 0.5s; -webkit-border-radius:30px; -moz-border-radius:30px; margin-right:20px; } .google-plus:hover{ background-position:0px -32px; cursor:pointer; } |
Merhaba Arkadaşlar, Bu yazımda sizlere font-face kullanımı nı anlatıcağım.Öncelikle Kısaca font-face`in ne olduğundan bahsedeyim font-face sistemde yüklü olmayan özel fontları kullanmamızı sağlar. Font-Face Kullanımı Öncelikle Font-face tarayıcılar farklı formatlarda desteklediği için fontları dönüştürmemiz gerekicektir.
Merhaba arkadaşlar bu yazımda sizlere CSS ile sitenizdeki Kaydırma Çubuğunu(Scroll Bar) düzenlemeyi anlatıcağım, Başlayalım… CSS3 ile Kaydırma Çubuğunu Düzenlemek