CSS ile Duyarlı Altı Çizgili Yazı

HTML serüvenine başladığımızda kullandığımız bold, underline ve italic gibi tanımlamalar CSS‘in gelişiyle değişime uğradı. Daha önceleri <u></u> elemanı ile yaptığımız altı çizgili yazılar artık CSS’in text-decoration:underline tanımlamasıyla yapılır hale gelmişti. İşlem yapısıyla birlikte yelpazemiz de genişledi. Bu tip yazı elemanlarının CSS’in kontrolü ile gerçekleşir olması, özgünleştirme ayarlarını da beraberinde getirdi.

Bu makalemizde sizlere altı çizgili yazının web üzerindeki son evriminden bahsedeceğiz. Satır çizgisini geçen (kuyruklu, örn: y, ğ, p, j, g) harfleri gizlenmiş bir gölge ile imkansız gibi gözüken tipografik yapıya çevireceğiz.

Nasıl yapılır?

Altı çizgili yazı yapmak için ister HTML kodlarından isterseniz de CSS kodlarından faydalanabilirsiniz. En temel anlamda altı çizgili yazı hazırlamamıza yarayan inline tanımlamalar şu şekilde;

HTML tarafında

<u>Altı çizgili yazı</u>

CSS tarafında

p{text-decoration:underline}

 

<p>Altı çizgili yazı</p>

elemanları ile yapılabilir.

Peki ya kuyruklu harfler?

Kuyruklu harfler için yapacağımız işlem ise biraz farklı. Ancak çeşitli yazı tipleri için farklı çalışmalar yapmamız gerekmekte. Bir örnek ile başlayalım.

span {
 font: 30px Tahoma, sans-serif;
 text-shadow: 0 1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff;
 position: relative;
}

span::before {
 content: '';
 border-bottom: 1px solid #000;
 position: absolute;
 left: 0;
 right: 0;
 bottom: 5%;
 z-index: -1;
}

Üstteki CSS tanımlamalarında dikkatinizi çekmek istediğimiz birkaç satır var. 30px büyüklüğündeki yazı tipimize göre bir gölgelendirme hazırladık, yani hemen altındaki text-shadow veya :before satırındaki bottom değerleri 30 piksellik bir Tahoma yazı tipinde kusursuz sonuç vermektedir. Tipografik olarak yaptığınız değişiklerde sorun yaşamanız halinde değiştireceğiniz tanımlamalar text-shadow ve bottom olmalı.

Şimdi tek satırlık HTML kodumuzu ekleyelim.

<span>adobewordpress.com</span>

Bu kadar.

Kapanış

Adobewordpress ailesi olarak tipografik CSS örneklerine ilk el atışımız değil bu. Tipografiyi web üzerinde kullanmak, özellikle de CSS3’ün büyüttüğü oyun sahamız içerisinde sınırları zorlamak fazlasıyla eğlenceli olabiliyor. Bugün de bu örneklerden biriyle sizlerle olduk.

Bir sonraki makalemizde görüşmek üzere, hoşçakalın.