Cuma , 22 Eylül 2017
Anasayfa » WEB » CSS » CSS ile Doğal Etiketler Oluşturma

CSS ile Doğal Etiketler Oluşturma

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.

DEMO

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

 

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.

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;

 

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.

 

Kodlar şu şekilde görünecektir.

etiket1

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.

Kodlar şu şekilde görünecektir.

etiket2

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.

Kodlar şu şekilde görünecektir.

etiket3

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.

 

Kodlar şu şekilde görünecektir.

etiekt4

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.

 

Ekran görüntüsü:

Screenshot_31

 

Örnek Ekran Görüntüsü

etkilicss

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

 

KAYNAK

http://webdesign.tutsplus.com/articles/quick-tip-create-pure-css3-ticket-like-tags–webdesign-3899

Hakkında Hayri

İlginizi Çekebilir

CSS Slider Yapımı

Bu yazımızda CSS ile Basit Slider yapacağız. İlk olarak slidera konulacak resimlerin boyutlarını ayarlıyoruz. Bu örneğimizde …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir