CSS3 kullanılmaya başlandığından bu yana sade yazı tipleri yerine sadece css düzenlemesi yaparak yazı tipine çeşitli stiller ekleyebiliyoruz. Google’ın ücretsiz olarak sunduğu web yazı tipleri aracılığı ile bunu nasıl yapabileceğimize göz atacağız.
İLGİNİZİ ÇEKEBİLECEK HABERLER
Google Web Font – Çarpıcı Efektler
Google tarafından gelen güzel bir açıklama sonucunda Google Web Fonts dahilindeki yazı tiplerine birbirinden farklı 25 yazı tipi efektini uygulamamız mümkün.
Bunu gerçekleştirebilmek için basit bir ek kod uygulaması yapıyoruz, bu uygulamayı google tarafından bize verilen yazı tipi kodu üzerinde gerçekleştiriyoruz. Aşağıdaki örnek durumu daha net açıklayacaktır.
Daha sonrasında basitçe efekti kullanacağımız alandaki class’a verdiğimiz ismi tanımlıyoruz.
VUUB.net!
Bu efekti nasıl oluşturduğunuzu merak ederseniz aşağıdaki kodu inceleyebilirsiniz.
.font-effect-shadow-multiple {
text-shadow: .04em .04em 0 #fff,.08em .08em 0 #aaa;
-webkit-text-shadow: .04em .04em 0 #fff, .08em .08em 0 #aaa;
}
Google Web Font – Çoklu Efekt Uygulaması
Birden fazla efekt hazırlayabilmemiz mümkün, bu efektleri sayacak olursak; Multiple Shadow, Emboss ve 3D. Aşağıdaki örnekte olduğu gibi kullanıldığında sorunsuzca çalışmakta.
Ortaya çıkan sonuç şu şekilde oluşmakta;
Örnekteki kod yapısını görmek için buraya, bilgisayarınıza indirmek için aşağıdaki alanı doldurmanızı rica ediyoruz.
İndir
