CSS ile Tipografik Baskı Yazı Tipi

Merhabalar. Yukarıda gördüğünüz yazı efektini hem CSS ile hem de Photoshop ile saniyeler içerisinde hazırlayabilirsiniz. Bu yüzden eş zamanlı iki adet makale yazıyorum. Bu okuduğunuz makalede CSS kullanarak efektimizi hazırlayacağız.

Öneri

Bu tarz yazı tiplerinin arka planına noktacıklar içeren (noise) görseller kullanılmakta. Ben kendi yazı efektimin arkasına bu tarz bir background atadım. Siz de isterseniz aşağıdaki görseli kullanabilirsiniz, ya da Photoshop ile türevi bir resim hazırlayabilirsiniz.

Not : CSS an itibariyle Noise efekti oluşturamıyor. Fakat yakın gelecekte bu sorun düzelecektir. O yüzden hazır arka plan görseli kullanıyoruz

Bu efekti Photoshop ile yapmak için burayı tıklayın.

Efekti ve yazıyı oluşturalım

CSS Kodları

div{
background:url(noise-effect-ph.png);
font:bold 60px Helvetica, Arial, sans-serif;
color:#cacaca;
letter-spacing:-1px;
text-shadow: -1px -1px 1px #555555;
padding:50px;
}

HTML Kodları