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ı

<div>adobewordpress.com</div>

Sonuç ve Kıyaslama

Bu efekti bahsettiğim gibi Photoshop ile de yapabiliyoruz. İkisi arasındaki fark ise şöyle gözükmekte :



  • aerakman

    CSS ile oluşturulmuş olan daha iyi gibi geldi. – Arda Erakman

  • insan

    site güncelliğini kaybetti, dağılabiliriz.

  • CSS ile oluşturulmuş olan performans açısından da avantaj sağlamakta.