Bu yazıda, Sprites Görüntü Arka Planı, Sayı Daire Arka Planlı Liste Stili ve Ok Görüntüsü ile Liste Stili gibi farklı türde liste stillerine sahip güzel css liste stilini nasıl oluşturacağınızı göstereceğiz.
Aslında, örnek css listesi stilleri, web tasarımcısının web tasarım arayüzünü (UI) iyileştirmeye yardımcı olacak örnek liste stili bulması için gerçekten yararlıdır.
Sıralı listelerin stilini kullanmak her zaman kolay olmuştur, önemli makaleleri işaret eder ve okuyucuya açık hale getirir. Numaraları biçimlendirmek için varsayılan tarayıcı stillerini kaldırmanız ve bunları hedeflemek ve buna göre stil oluşturmak için liste öğelerinize kancalar eklemeniz gerekir.
CSS Sprites Dosyası Oluşturma
CSS Sprites, web sitenizin daha hızlı yüklenmesini sağlamak için görüntüleri tek bir dosyada birleştiren bir tekniktir, sınırsız sayıda görüntüyü tek bir görüntüde birleştirebilir ve css stilini kullanarak bu görüntüleri kullanmak için çağırabilirsiniz.
1- Sprite tasarımı ile HTML Kaynak Kodu Oluşturma
|
1 2 3 4 5 6 7 8 9 10 11 |
<div id="liste1"> <ul> <li class="facebook"><a href="#">Wordpress</a></li> <li class="twitter"><a href="#">Joomla</a></li> <li class="rss"><a href="#">Drupal</a></li> <li class="digg"><a href="#">Magento</a></li> <li class="youtube"><a href="#">Youtube</a></li> </ul> </div> |
|
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 |
/* css list sprites background ------------- */ #liste1 {float:left; margin:0px; font:14px/16px 'lucida grande', tahoma, verdana, arial, sans-serif;} #liste1 a {border:0; color:#3B5998; text-decoration:none; line-height:30px;} #liste1 a:hover, #liste1 a:focus, #liste1 a:active {text-decoration:underline; background:transparent;} #liste1 .user {overflow:hidden; margin:0 0 10px;} #liste1 .user img {float:left; margin:0 8px 0 0;} #liste1 .user a {display:block;} #liste1 .fn {padding:3px 0; font-weight:bold;} #liste1 ul {width:290px; padding:0; margin:0; list-style:none;} #liste1 li a {display:block; padding:3px 8px 4px 6px;} #liste1 li a:hover, #liste1 li a:focus, #liste1 li a:active { text-decoration:underline; -moz-box-shadow: 0px 0px 3px #403f40; -webkit-box-shadow: 0px 0px 3px #403f40; box-shadow: 0px 0px 3px #403f40; } #liste1 li.current a {font-weight:bold; color:#333; background:#D8DFEA;} #liste1 li a:before { content:""; float:left; width:28px; height:30px; margin:0 6px 0 0; background:url(sprite.png); } #liste1 .facebook a:before {background-position:0 -0px;} #liste1 .twitter a:before {background-position:0 -35px;} #liste1 .rss a:before {background-position:0 -70px;} #liste1 .digg a:before {background-position:0 -108px;} #liste1 .youtube a:before {background-position:0 -148px;} /* Eng css list sprites background -------------- */ |
2- Sayı Çemberi Arka Planıyla Liste Stili Oluşturma
Bu liste stili, güzel çember arka plan rengiyle istediğiniz seviyeye göre numara sırasını gösterebilecek sıralı tip kullandık.
Numara Çember Arkaplanı ile birlikte öğretici kodlama listesi stilime geçelim:
|
1 2 3 4 5 6 7 8 9 10 11 |
<div id="liste2"> <ol> <li ><a href="#">Wordpress</a></li> <li ><a href="#">Joomla</a></li> <li ><a href="#">Drupal</a></li> <li ><a href="#">Magento</a></li> <li ><a href="#">Youtube</a></li> </ol> </div> |
CSS kaynak koduna geçelim:
|
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 |
/* css list sayılı circle background -------------- */ .liste2{ width:450px; } .liste2 ol{ counter-reset: li; list-style: none; *list-style: decimal; font: 15px 'trebuchet MS', 'lucida sans'; padding: 0; margin-bottom: 4em; } .liste2 ol ol{ margin: 0 0 0 2em; } .liste2 a{ position: relative; display: block; padding: .4em .4em .4em 2em; *padding: .4em; margin: 1em 0; background: #FFF; color: #444; text-decoration: none; -moz-border-radius: .3em; -webkit-border-radius: .3em; border-radius: .3em; } .liste2 a:hover{ background: #cbe7f8; text-decoration:underline; } .liste2 a:before{ content: counter(li); counter-increment: li; position: absolute; left: -1.3em; top: 50%; margin-top: -1.3em; background: #87ceeb; height: 2em; width: 2em; line-height: 2em; border: .3em solid #fff; text-align: center; font-weight: bold; -moz-border-radius: 2em; -webkit-border-radius: 2em; border-radius: 2em; color:#FFF; } /* SON css list sayılı circle background -------------- */ |
Çıktı:
3- Ok Görüntüsü ile Liste Stili Oluşturma
Bu, basit ve kullanımı kolay olan ok resimli sırasız liste stili kullandık.
Aşağıdaki Ok Resmi ile Liste Stilimi kodlamamla başlayalım:
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="liste3"> <ul> <li ><a href="#">Wordpress</a></li> <li ><a href="#">Joomla</a></li> <li ><a href="#">Drupal</a></li> <li ><a href="#">Magento</a></li> <li ><a href="#">Youtube</a></li> </ul> </div> |
CSS kodlarını yapalım:
|
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 |
/* css list with arrow images -------------- */ .liste3 ul{ margin:0px; } .liste3 li{ font-size:24px; margin-left:25px; padding:0px; list-style:url(arrow.png); line-height:30px; } .liste3 li a:link, .imglist li a:visited{ color:#1e598e; text-decoration:none; } .liste3 li a:hover{ color:#0A7CAF; padding:2px; -moz-box-shadow: 0px 0px 12px #9e9ea3; -webkit-box-shadow: 0px 0px 12px #9e9ea3; box-shadow: 0px 0px 12px #9e9ea3; border:none 0px #000000; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } /* End css list with arrow images -------------- */ |
Ekran çıktısı:
Yorum Yap