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.

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

Ş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:

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

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:

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

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:

[php]
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;
[/php]

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:

[php]
#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;
}
[/php]

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

\"css3

PAYLAŞMAK ÖNEMSEMEKTİR!

Emrah

1981 Samsun doğumlu ve Gazi Üniversitesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi mezunu. Bilişim Teknolojileri Öğretmeni, Yazar, WebMaster, Blogger, Web-Grafik Tasarımı ve SEO eğitmeni. Araştırmacı ,macera tutkunu, sinema sever, fitness yapar, farklı doğal güzellikleri keşfetmeye bayılır.

One thought on “CSS3 ile Inset Tipografi Oluşturma

  • 7 Şubat 2011 tarihinde, saat 11:52
    Permalink

    Gayet net ve iyi bir örnek olmuş…

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

Bir cevap yazın

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

escort akdeniz escort mezitli çamlıyayla escort escort toroslar escort tarsus escort gulnar escort erdemli escort silifke escort mut mersin escort mersin escort bayan porno izle porno hikayeler