Google Web Font Efektleri

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.

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!


Google Web Font Efektleri

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;

Google Web Font Efektleri

Ö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