Etiketler bir çok web sitesi için gerekli özelliklerin başında gelir. Bu yazıda hiç resim kullanmadan CSS3 kullanarak web 2.0 etiketleri oluşturacağız.
Yapılacak işlem süreci şu şekilde olacaktır.
- HTML etiketilerinin oluşturulması
- Temel etiketlerin biçimlendirilmesi
- Etiketlerin köşelerinin biçimlendirilmesi
- Linklerin biçimlendirilmesi
- Etiketlere deliklerin eklenmesi ve biçimlendirilemesi
Adım 1: Head Etiketinin Hazırlanması
Hadi ile head etiketini ekleyerek uygulamaya başlayalım. Head etiketine iki tane style dosyalarının yollarını tanımlayarak başlayalım. tasarim.css ve etiket.css dosyalarını link etiketi kullanarak bağladık. Kendi sitenizi yaparken bu dosyaları ayırmanıza gerek yok. Lafı uzatmadan head etiketi şu şekilde oluşacaktır.
|
1 2 3 4 5 6 7 8 |
<head> <meta charset="utf-8"> <title>CSS3 ETİKET</title> <link rel="stylesheet" href="style/tasarim.css" /> <link rel="stylesheet" href="style/etiket.css" /> </head> |
Adım 2: HTML Etiketlerinin Tanımlanması
Şimdi biçimlendirilecek etiketlerin ekliyoruz. Sayfa etiketi olarak kullanacağımız her etiketi etiket stili kullanarak biçimlendireceğiz. Sonra da span etiketlerinin class özelliğini daire olarak belirliyoruz. En sonunda da link olarak görmek istediğimiz etikerleri yazıyoruz. İşte yazmamız gereken kodlar;
|
1 2 3 4 5 6 7 |
<div class="etiket"><span class="daire"></span><a href="#">CSS3</a></div> <div class="etiket"><span class="daire"></span><a href="#">HTML5</a></div> <div class="etiket"><span class="daire"></span><a href="#">TAasarım</a></div> <div class="etiket"><span class="daire"></span><a href="#">JavaScript</a></div> <div class="etiket"><span class="daire"></span><a href="#">PHP</a></div> |
Adım 3: Temel Etiketlerin Biçimlendirilmesi
Şimdi sıra geldi temel etiketlerin biçimlendirilmesine. class özelliği etiket olan div etiketlerinin yazılarını biçimlendreceğiz. Position özelliğini relative yapacağız. Çünkü içerideki span etiketini absolute yapmak için dışarıdaki etiketi postion yapmak zorundayız. (Bazı durumlarda istediğimiz sonucu almak için !important kullanacağız.) Bunların dışında arkaplan rengi ve yerleşim(float) değerlerini de aşağıdaki gibi düzenliyoruz.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.etiket { font-family: Arial; font-size: 12px; font-weight: bold; position: relative !important; background: #83D6DE; float: left; padding: 7px 3px; margin: 0 5px 5px 0; } |
Kodlar şu şekilde görünecektir.
Adım 4: CSS ile Üst Köşelerin Biçimlendirilmesi
Şimdi sıra geldi. Üst köşelerin kesik çeyrek daire gibi görünmesini sağlamaya. Bu şekli oluşturmak için CSS pseudo elements(sözde etiketler) özelliğini kullanmaya. ticket classının after ve before sözde etiket seçicisi ile köşeleri oluşturacağız. Pseudo elements after ve before özelliği ilgili etiketin önünde ve sonunda bir etiket varmış gibi davranmasını sağlamaktadır.(Bu özellik ile fazldan etiket yazmadan etiketi biçimlendirme avantajı sağlamaktadır.) after olan seçiciyi sol üst köşe before olan seçiciyi sağ üst köşe olarak biçimlendireceğiz.
Tanımlama yaparken content özelliğine boş bırakıyoruz. position absolute ve ekranda etiketlerin altında kalmaması için z-index özelliğini de 100 olarak ayarlıyoruz. Sol üst köşe için left top border değerlerini ayarlayıp border-radius(köşeleri ovalleştir) değerini çerçeve değerinde biraz büyük yapıyoruz. Aynı uygulamayı sağ üst köşe içinde gerçekleştiriyoruz.
Unutmadan bu tasarımda beyaz arkaplan olduğu düşünülerek kenarlıkların rengi beyaz yapılmıştır.
|
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 |
.etiket:after { content: ""; position: absolute !important; z-index: 100; top: 0; left: 0; border-right: #fff 7px solid; border-bottom: #fff 7px solid; -moz-border-radius: 0 0 20px 0; -webkit-border-radius: 0 0 20px 0; border-radius: 0 0 20px 0; } .etiket:before { content: ""; position: absolute !important; z-index: 100; top: 0; right: 0; border-left: #fff 7px solid; border-bottom: #fff 7px solid; -moz-border-radius: 0 0 0 20px; -webkit-border-radius: 0 0 0 20px; border-radius: 0 0 0 20px; } |
Kodlar şu şekilde görünecektir.
Adım 5: Linklerin CSS Biçimlendirmesi
Linkkerin trafındaki kesikli çizgileri oluşturmak için border ve aoutline özelliklerini birlikte kullanacağız. Çerçevedeki dış kısmı(dış kısım gibi görünmesi için outline kullanıyoruz) oluşturan görüntüyü 50% oranında daha şeffaf(transparent) yapıp kenarlarını kesikli ve 1 px olarak ayarladık(dashed 1px). Aynı şekide border içinde benzer şekilde 30% şeffaflık verdik. Daha güzel bir görüntü için padding, color ve text-decoration özelliklerini de isteğimize göre şekillendirdik. Unutmadan kelimelerin parçalanmaması için (boş alanların bölünmemesi) white-space özelliğini nowrap olarak düzenledik. Son olarak üzerine gelince yazının renginin için hover sözde seçicisine yazı rengi 50% ve siyah görünecek şekilde şeffaflık verdik. Lafı daha fazla uzatmadan kodlarımız ve görüntümüz aşağıdaki gibi olacaktır.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.etiket a { outline: 1px rgba(255,255,255,0.4) dashed; border: 1px rgba(0,0,0,0.3) dashed; padding: 4px 10px 4px 20px; text-decoration: none; color: rgba(255,255,255,0.5); white-space: nowrap; } .etiket a:hover {color: rgba(0,0,0,0.5);} |
Kodlar şu şekilde görünecektir.
Adım 6: CSS ile Alt Köşelerin Biçimlendirilmesi
Üst kısımların biçimlendirilmesi için yapılanların benzerlerini içerideki link (a) etiketine uygulayarak aynı görüntüyü alt köşeler için uygulayacağız. Üst kısımlar için gerekli olan kodu kopyalayıp position özelliklerini değiştirerek alt kısımlara uyguladık.
|
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 |
.etiket a:after { content: ""; position: absolute !important; z-index: 100; bottom: 0; left: 0; border-right: #fff 7px solid; border-top: #fff 7px solid; -moz-border-radius: 0 20px 0 0; -webkit-border-radius: 0 20px 0 0; border-radius: 0 20px 0 0; } .etiket a:before { content: ""; position: absolute !important; z-index: 1000; bottom: 0; right: 0; border-left: #fff 7px solid; border-top: #fff 7px solid; -moz-border-radius: 20px 0 0 0; -webkit-border-radius: 20px 0 0 0; border-radius: 20px 0 0 0; } |
Kodlar şu şekilde görünecektir.
Adım 7: Daire Alanlarının Eklenmesi
Daire için span etiketi eklemiştik. Eklediğimiz span etiketini kullanarak sadece border değeri(genişlik ve yüksekli değerini 0 girerek) ekleyip ovallik vereceğiz. Daha önce söylemiştim. Sol Köşede konumlandırabilmek için postion değerini absolute yaptık. 5px border için 10px toplam genişlik ve yükseklik değeri kullandığını düşünürsek. ovallik değeri için 5px kullanmak yeterli olacaktır. Bununla birlikte solda ortalı durabilmesi için top değerini 50% yapıp, -5px margin vermemiz yeterli olacaktır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.etiket .daire { position: absolute !important; z-index: 100; border: 5px #fff solid; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; margin-top: -5px; width: 0; height: 0; top: 50%; left: 8px; -moz-box-shadow: 0 -1px 0 rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.3); -webkit-box-shadow: 0 -1px 0 rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.3); box-shadow: 0 -1px 0 rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.3); } |
Ekran görüntüsü:
Örnek Ekran Görüntüsü
Sonuç olarak sayfada kibar etiket görüntüsü oluşturmak için kullanılabilecek güzel ve etkili bir yöntem. Bu yazıda da aşağıda sayfa içi hazırlanan etiketleri görüyorsunuz. Bu şekilde sayfalarınız arama motorları tarafından daha fazla indexlenecek ve siteniz daha fazla öne çıkacaktır.
KODLARIN TAMAMI
|
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 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS3 ETİKET</title> <style> .etiket { font-family: Arial; font-size: 12px; font-weight: bold; position: relative !important; background: #83D6DE; float: left; padding: 7px 3px; margin: 0 5px 5px 0; } .etiket:after { content: ""; position: absolute !important; z-index: 100; top: 0; left: 0; border-right: #fff 7px solid; border-bottom: #fff 7px solid; -moz-border-radius: 0 0 20px 0; -webkit-border-radius: 0 0 20px 0; border-radius: 0 0 20px 0; } .etiket:before { content: ""; position: absolute !important; z-index: 100; top: 0; right: 0; border-left: #fff 7px solid; border-bottom: #fff 7px solid; -moz-border-radius: 0 0 0 20px; -webkit-border-radius: 0 0 0 20px; border-radius: 0 0 0 20px; } .etiket a { outline: 1px rgba(255,255,255,0.4) dashed; border: 1px rgba(0,0,0,0.3) dashed; padding: 4px 10px 4px 20px; text-decoration: none; color: rgba(255,255,255,0.5); white-space: nowrap; } .etiket a:hover {color: rgba(0,0,0,0.5);} .etiket a:after { content: ""; position: absolute !important; z-index: 100; bottom: 0; left: 0; border-right: #fff 7px solid; border-top: #fff 7px solid; -moz-border-radius: 0 20px 0 0; -webkit-border-radius: 0 20px 0 0; border-radius: 0 20px 0 0; } .etiket a:before { content: ""; position: absolute !important; z-index: 1000; bottom: 0; right: 0; border-left: #fff 7px solid; border-top: #fff 7px solid; -moz-border-radius: 20px 0 0 0; -webkit-border-radius: 20px 0 0 0; border-radius: 20px 0 0 0; } .etiket .daire { position: absolute !important; z-index: 100; border: 5px #fff solid; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; margin-top: -5px; width: 0; height: 0; top: 50%; left: 8px; -moz-box-shadow: 0 -1px 0 rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.3); -webkit-box-shadow: 0 -1px 0 rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.3); box-shadow: 0 -1px 0 rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.3); } </style> </head> <body> <div class="etiket"><span class="daire"></span><a href="#">CSS3</a></div> <div class="etiket"><span class="daire"></span><a href="#">HTML5</a></div> <div class="etiket"><span class="daire"></span><a href="#">TAasarım</a></div> <div class="etiket"><span class="daire"></span><a href="#">JavaScript</a></div> <div class="etiket"><span class="daire"></span><a href="#">PHP</a></div> </body> </html> |
KAYNAK
http://webdesign.tutsplus.com/articles/quick-tip-create-pure-css3-ticket-like-tags–webdesign-3899
[…] CSS ile Doğal Etiketler Oluşturma […]