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 :