CSS ile Grunge Yapıda Başlıklar

Vatanay Özbeyli CSS3, Tasarım Unsurları

Grunge birçok anlama gelmekte. Bunlardan en yer etmiş olanı Rock müziğindeki tür. Ama benim anlatmak istediğim kirli ve yıpranmış tasarım türü.

İlk olarak yazılarımızın üzerinde kullanacağımız görüntüyü oluşturuyoruz. Bu yapı için transparan desteğine ihtiyacımız var, bu yüzdendir ki ben PNG formatını tercih ettim.

Bu tekniğin temeli CSS ile Gradient Yazı tekniğiyle aynıdır. Sadece minik bir varyasyon oluşturuyoruz.Bu tekniğin bütün detaylarını incelemek için üstte belirttiğim konuyu inceleyiniz.

Sizin için oluşturduğum örnek Grunge.PNG dosyası aşağıdaki gibidir :

Nasıl yapılır?

İlk olarak aşağıdaki CSS kodlarını ekliyoruz. Arka planı siyah olarak değiştirmemiz gerekiyor. Yani maske ile aynı renkte olmalı.

body{background-color:#000;}

h1 {
position:relative;
color:#2fb2cf;
font-family: Georgia;
text-shadow:#266279 2px 2px 8px;
}

h1 span{
position:absolute;
display:block;
top:0;
left:0;
height:100%;
width:100%;
background:url('grunge-adobewordpress-com.png');
}

Şimdi ise h1 tagımızı HTML alanımıza ekleyelim.

<h1>adobewordpress.com<span></span></h1>

Bu kadar. Şimdi uygulamalı olarak sonucu görelim :

Uygulama

Not : Daha önce belirttiğim gibi, h1 tagları üzerine kullanacağınız stiller çok önemli. Çünkü bu başlık tipleri SEO açısından büyük önem taşımakta.