VUUB.net - Bilim, Teknoloji, Sosyal Medya ve Eğlence
  • Giriş
  • Kayıt Ol
  • EĞLENCE
  • TEKNOLOJİ
  • KÜLTÜR-SANAT
  • SOSYAL MEDYA
  • YAŞAM
  • İŞ DÜNYASI
  • VUUB
    • Hakkımızda
    • Aramıza Katıl
    • Reklam
    • Kullanım Şartları
    • Arşiv
    • İletişim
Sonuç yok
Tüm Sonuçlar
VUUB.net - Bilim, Teknoloji, Sosyal Medya ve Eğlence
  • EĞLENCE
  • TEKNOLOJİ
  • KÜLTÜR-SANAT
  • SOSYAL MEDYA
  • YAŞAM
  • İŞ DÜNYASI
  • VUUB
    • Hakkımızda
    • Aramıza Katıl
    • Reklam
    • Kullanım Şartları
    • Arşiv
    • İletişim
Sonuç yok
Tüm Sonuçlar
VUUB.net - Bilim, Teknoloji, Sosyal Medya ve Eğlence
Sonuç yok
Tüm Sonuçlar
Ana Sayfa Teknoloji Diğer

Google Web Font Efektleri

Murat Tekmen Hazırlayan: Murat Tekmen
17 Şubat 2018
Kategori: Diğer, Teknoloji
Okuma Süresi:2 dakika
A A
1
Google Web Font Efektleri
607
PAYLAŞIM
5.1k
OKUNMA
Facebook ile PaylaşTwitter ile PaylaşWhatsapp ile Paylaş

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

iPhone 13 Tanıtımı

iPhone 13 Tanıtımı Saat 20:00’de Başlıyor

14 Eylül 2021
Apple motosiklet sahiplerini uyardı

Apple, motosiklet titreşimlerinin iPhone kameralarına zarar verebileceğini söylüyor

11 Eylül 2021

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

Etiketler: efektfont efektigooglegoogle web fontsyazı tipi
Paylaş243Tweet152Gönder
Murat Tekmen

Murat Tekmen

1999 yılından bu yana profesyonel olarak tasarım ile uğraşmakta ve kullanıcı arayüzü tasarımı konusunda yoğun çalışmalar yapmakta. Yazılı ve görsel basında bir çok çalışması yayınlanan Tekmen'in en büyük tutkusu okumak, yazmak ve üretmektir.

BenzerYazılar

iPhone 13 Tanıtımı
Sosyal Medya

iPhone 13 Tanıtımı Saat 20:00’de Başlıyor

14 Eylül 2021
Apple motosiklet sahiplerini uyardı
Apple

Apple, motosiklet titreşimlerinin iPhone kameralarına zarar verebileceğini söylüyor

11 Eylül 2021
Xiaomi 11T
Teknoloji

Xiaomi 11T akıllı telefon ailesi ile Android için üç yıl boyunca güncelleme desteği sunacak

9 Eylül 2021
Singapur halka açık alanlara robotlar yerleştirdi!
Teknoloji

Singapur halka açık alanlara robotlar yerleştirdi!

7 Eylül 2021
Mercedes'in yeni araba modeli aklınızı okuyabiliyor!
Teknoloji

Mercedes’in yeni araba modeli aklınızı okuyabiliyor!

6 Eylül 2021
Apple Watch Series 7 Sınırlı Sayıda Satışa Sunulabilir
Teknoloji

Apple Watch Series 7 Sınırlı Sayıda Satışa Sunulabilir

5 Eylül 2021

Popüler İçerikler

  • Okuduktan Sonra Sizi Gastronomide Uzaya Çıkaracak 10 Kitap Önerisi

    Okuduktan Sonra Sizi Gastronomi’de Uzaya Çıkaracak 10 Kitap Önerisi

    1013 paylaşım
    Paylaş 404 Tweet 253
  • Wise Nedir ve Nasıl Kullanır? Para Transferi Nasıl Yapılır?

    745 paylaşım
    Paylaş 836 Tweet 522
  • Edebiyat Tarihindeki En Üzücü 5 Kitap Sonu

    899 paylaşım
    Paylaş 360 Tweet 225
  • Gelmiş Geçmiş En İyi 10 Klasik Film

    855 paylaşım
    Paylaş 341 Tweet 213
  • Mitolojik Canlılar

    852 paylaşım
    Paylaş 341 Tweet 213
  • Hazır Krem Şanti Kullanmayın, Krem Şantinizi Evde Kendiniz Yapın

    846 paylaşım
    Paylaş 336 Tweet 210
  • Günlük Yaşamda Uygulanması Gereken 11 Görgü Kuralı

    740 paylaşım
    Paylaş 296 Tweet 185
  • Eski Mısır Uygarlığının Beslenme Alışkanlıkları Hakkında 10 İlginç Bilgi

    835 paylaşım
    Paylaş 286 Tweet 179
REKLAM
  • Hakkımızda
  • Aramıza Katıl
  • Reklam
  • Kullanım Şartları
  • Arşiv
  • İletişim
Teknoloji, Sosyal Medya ve Eğlence

© 2021 VUUB.net - Tüm Hakları Saklıdır.

Sonuç yok
Tüm Sonuçlar
  • EĞLENCE
  • TEKNOLOJİ
  • KÜLTÜR-SANAT
  • SOSYAL MEDYA
  • YAŞAM
  • İŞ DÜNYASI
  • VUUB
    • Hakkımızda
    • Aramıza Katıl
    • Reklam
    • Kullanım Şartları
    • Arşiv
    • İletişim

© 2021 VUUB.net - Tüm Hakları Saklıdır.

Tekrar Hoşgeldin!

Facebook ile Giriş Yap
Google ile Giriş Yap
VEYA

Hesabınıza giriş yapın

Parolanızı mı unuttunuz? Kayıt Ol

Yeni hesap oluştur!

Facebook ile Kayıt Ol
Google ile Kayıt Ol
VEYA

Lütfen aşağıdaki formu doldurunuz

Tüm alanlar zorunludur. Giriş Yap

Şifremi unuttum

Lütfen kullanıcı adı veya e-posta adresinizi girerek şifrenizi sıfırlayın

Giriş Yap