CSS 28 Ekim 2010

CSS3 ile Inset Tipografi Oluşturma

\"tipografi\"Web sitelerinde popüler metin biçimlendirmeleri kullanmak oldukça çekici olabilir. Bunun için bu yazıda, inset tipografi için örnek bir çalışmayı CSS kullanarak yapacağız.

Bir arkaplan üstünde metin biçimlendirmesi yapacağız. Tamamen CSS kullanarak yapacağız. Bu uygulamayı H1 etiketine uygulayacağız.

Öncelikle HTML biçimlendirmemizi yapıyoruz. H1 etiketi ve yazının arkasına bir arkaplan ilavesi için DIV etiketini kullanacağız.

<div id="arkaplan">
<h1 class="inset">Inset Typography</h1>
</div>

Şimdi arkaplan yapmak istiyoruz. Bunun için 550px genişlik ve 100px yüksekliğinde bir çerçeve kullanacağız. Sonra, CSS3 renk geçişlerini kullanacağız. Arkaplanımız, üstten altta doğru #003471 renginden #448CCB renk değerine geçiş yapan bir gradient değeri olacak. Bunun için yazmamız gereken kod aşağıdaki gibi olacak:

#arkaplan {
width: 550px;
height: 100px;
background: -moz-linear-gradient(-90deg, #003471, #448CCB);
background: -webkit-gradient(linear, left top, left bottom, from(#003471), to(#448CCB));
}

Yukarıdaki kod ile arkaplanımız şu şekilde görünecektir:

\"css_background\"

Şimdi sıra yazı türünü tanımlamada. Bunun için normal Rockwell kullanacağız. Fakat Rockwell bulunmaması halinde, onun yerine işlemek için birkaç yazı türü daha tanımlayacağız. Örnek olarak aşağıdaki kodlamayı kullanıyoruz:

h1.inset {
font-family: Rockwell, Georgia, "Times New Roman", Times, serif;
font-size: 50px;
color: #0D4383;
}

Elde edilen görüntü aşağıdaki gibi olacaktır:

\"css

Bir sonraki ve son adım, işin en önemli parçasıdır. Yazıya \”inset\” stili yani iç gölge vermek için text-shadow özelliğini kullanacağız. Text-shadow, bir inset değerine sahip değildir. Peki ne yapacağız? RGBA ile farklı vasvasyonlar kullanacağız. Bunun için aşağıdaki kodu kullanacağız:

text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px;

Böylece text-shadow stilini h1.inset sınıfına eklemiş olduk. İşte CSS kodunun son hali aşağıdaki gibi görünüyor:

#arkaplan {
width: 550px;
height: 100px;
background: -moz-linear-gradient(-90deg,#003471,#448CCB);
background: -webkit-gradient(linear, left top, left bottom, from(#003471), to(#448CCB));
}
h1.inset {
padding-left: 50px;
padding-top: 17px;
font-family: Rockwell, Georgia, "Times New Roman", Times, serif;
font-size: 50px;
color: #0D4383;
text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px;
}

Aşağıda, nihai sonucu görüyorsunuz:

Bunu da Oku:  CSS Border Örnekleri

\"css3

Yazar Bilgileri

Emrah emrah19may@hotmail.com
1981 Samsun doğumlu ve Gazi Üniversitesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi mezunu. Bilişim Teknolojileri Öğretmeni olarak görev yapmakta olup DMOZ Editörü, Web-Grafik Tasarımı ve SEO eğitmeni.

BUNLARI DA OKUYUN

Yapılan Yorumlar (1)

  1. Gayet net ve iyi bir örnek olmuş…

    Paylaşım için teşekkürler.

Yorum Yap