CSS3 ile Inset Tipografi Oluşturma

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:

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

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: