CSS3, güzel ve benzersiz web sayfaları oluşturmak için yaratıcı olmanızı ve tasarımınızla denemeler yapmanızı sağlar. CSS'nin birlikte çalışmanıza izin verdiği bir tasarım alanı tipografidir.

kullanabilirsiniz font ailesi ve Metin gölgesi basit ama dikkat çekici efektler yaratmak için özellikler. CSS'deki metin gölgesinin temel uygulamalarını zaten biliyor olabilirsiniz. Ancak, bu özelliklerle çok çeşitli stiller oluşturabilirsiniz.

Bu makalede, HTML ve CSS kullanarak farklı metin gölge efektleri oluşturmanın etkili bir yolunu öğreneceksiniz.

HTML ve CSS'ye Başlarken

Tercih ettiğiniz herhangi bir metin gölge efektini elde etmek için bu kod örneklerini kopyalayıp yapıştırabilirsiniz. Oluşturarak başlayın index.html dosya ve bir stil.css dosya. Örnekleri denemek için ihtiyacınız olan dosyalar bunlardır, ancak her örnek için her iki dosyayı da değiştirmeniz gerekecektir.

index.html

 gölge #01 


href=" https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap"
rel="stil sayfası"
/>
 gölge #02 


href=" https://fonts.googleapis.com/css2?family=Monoton&display=swap"
rel="stil sayfası"
/>
 gölge #03 


href=" https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap"
rel="stil sayfası"
/>
 gölge #04 


href=" https://fonts.googleapis.com/css2?family=Rampart+One&display=swap"
rel="stil sayfası"
/>
 gölge #05 


href=" https://fonts.googleapis.com/css2?family=Faster+One&display=swap"
rel="stil sayfası"
/>
 gölge #06 


href=" https://fonts.googleapis.com/css2?family=Eater&display=swap"
rel="stil sayfası"
/>
 gölge #07 


href=" https://fonts.googleapis.com/css2?family=Codystar&display=swap"
rel="stil sayfası"
/>

stil.css

vücut {
metin dönüştürme: büyük harf;
satır yüksekliği: 1;
metin hizalama: merkez;
yazı tipi boyutu: 5rem;
ekran: ızgara;
boşluk: 4rem;
}

Şimdi, denemeniz için 11 metin gölge örneğini inceleyelim.

İlgili: CSS font-family Özelliği ile Web Sitenizin Metni Nasıl Değiştirilir

Mistik

Mystic, camsı bir stildir; dönüştürmek Emlak. Cesur ve büyüme odaklı bir web sitesi için süper basit ama estetik açıdan hoş bir etki.

Çıktı

HTML

 Gölge #01 
Mistik

CSS

vücut {
arka plan rengi: #5e5555;
}
.mistik {
font-family: 'Bowlby One', el yazısı;
renk: rgba (255, 255, 255, 0.596);
metin gölgesi: 20px 0px 10px rgb (0, 0, 0);
}

monoton

Bu, "Monoton" yazı tipini kullanan eğlenceli bir metin efektidir. Web sitenizin ana renklerine uyması için metin ve gölge rengiyle oynayabilirsiniz.

Çıktı

HTML

 Gölge #02 
monoton

CSS

.monoton {
yazı tipi ailesi: 'Monoton', el yazısı;
yazı tipi boyutu: 15rem;
renk: rgb (255, 0, 0);
opaklık: 0,5;
metin gölgesi: 0px -78px rgb (255, 196, 0);
}

Tampon lastiği

Bu, 'Bungee Shade' yazı tipini kullanan harika bir stil. Karanlık bir arka planla birleştiğinde, şüphe duygusuyla ham bir etki yaratır.

Çıktı

HTML

 gölge #03 
Tampon lastiği

CSS

vücut {
arka plan rengi: #222;
}
.tampon lastiği {
yazı tipi ailesi: 'Bungee Shade', el yazısı;
renk: rgb (160, 12, 12);
opaklık: 0.9;
metin gölgesi: -18px 18px 0 rgb (66, 45, 45);
}

Radyoaktif

Bu efekti uyarı veya tehlike işaretleri için kullanabilirsiniz. 'Rampart One' yazı tipini kullanır.

Çıktı

HTML

 gölge #04 
Radyoaktif

CSS

vücut {
arka plan rengi: #27292d;
}
.radyoaktif {
font-family: 'Rampart One', el yazısı;
renk: rgb (97, 214, 43);
opaklık: 0.6;
metin gölgesi: -18px -18px 20px rgb (87, 255, 9);
}

sürat koşusu

Bu çalışan metin efekti, "Daha Hızlı Bir" yazı tipini kullanır. Metin gölgesi mülk ve bir ::sonrasındasözde eleman metinle aynı içeriğe sahip. Bu, bir "ikiye katlama" etkisi yaratır.

Çıktı

HTML

 gölge #05 
sürat koşusu

CSS

vücut {
arka plan rengi: #27292d;
}
.sprint {
font-family: 'Daha Hızlı Bir', el yazısı;
yazı tipi boyutu: 10rem;
renk: rgba (255, 0, 242, 0.322);
metin gölgesi: -20px -108px 0px rgba (255, 255, 255, 0.445);
harf aralığı: 1rem;
pozisyon: göreceli;
}
.sprint:: sonra {
içerik: 'sprint';
konum: mutlak;
üst: 215 piksel;
sağ: 300 piksel;
}

dikenli

Bu korkunç dikenli metin efekti, 'Eater' yazı tipini kullanır. değiştirmeyi deneyebilirsin Metin gölgesi bunun yerine sağ alta doğru.

Çıktı

HTML

 gölge #06 
dikenli

CSS

.dikenli {
font-family: 'Eater', el yazısı;
metin gölgesi: -18px -18px 2px #777;
}

Codystar

Metin gölgesi, metne bulanık ancak görünür bir anahat görevi görebilir. Bu parlak efekt, 'Codystar' yazı tipiyle harikalar yaratıyor.

Çıktı

HTML

 gölge #06 
Codystar

CSS

.codystar {
yazı tipi ailesi: 'Codystar', el yazısı;
yazı tipi ağırlığı: kalın;
renk: rgb (55, 58, 255);
metin gölgesi: 1px 1px 10px rgb (16, 72, 255), 1px 1px 10px rgb (0, 195, 255);
}

krallık

Bu gölge efekti ile otoriter tipografi elde edebilirsiniz. kullanır ::önce sözde eleman ve dönüştürmek gölgeyi eğme özelliği.

Çıktı

HTML

 gölge #08 
krallık

CSS

vücut {
arka plan rengi: #5e5555;
}
.krallık {
Beyaz renk;
yazı tipi ailesi: Etki, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
yazı tipi boyutu: 10rem;
satır yüksekliği: 1;
metin hizalama: merkez;
}
.kingdom--shadow:: önce {
renk: #000;
içerik: attr(veri metni);
kenar boşluğu: 0.7rem;
konum: mutlak;
dönüştürme: perspektif (205 piksel) döndürmeX(38 derece) ölçek (0.84);
z-endeksi: -1;
}

kodlayıcı

Bu parlak ve olumlu Metin gölgesi etkisi, kendini bilen ve motive olmuş bir web sitesi kişiliğini ifade eder. Basit bir dumanlı görünüm elde etmek için web sitenize ekleyebilirsiniz.

Çıktı

HTML

 gölge #09 


Yemek yemek 

Uyku 

kod 

Tekrarlamak

CSS

vücut {
arka plan rengi: #5e5555;
}
div {
yazı tipi ailesi: Verdana, Geneva, Tahoma, sans-serif;
dolgu: 40 piksel;
kenar boşluğu: 0px otomatik;
yazı tipi ağırlığı: kalın;
satır yüksekliği: 5.8rem;
metin hizalama: sola;
renk: rgb (94, 94, 94);
} 
.coder-life {
metin gölgesi: 5px 5px #ffff00;
filtre: gölge (-10px 10px 20px #fff000);
}

Şık

Minimalizmi seviyorsanız, bu metin gölge efekti mükemmel bir seçimdir. Büyük bir yazı tipi boyutu kullandığından, boyutunu küçülttük. harf boşluğu ve uygulandı Metin gölgesi Bu etkiyi yaratmak için özellik.

Çıktı

HTML

 gölge #10 


s
H
r
a
NS
NS
H
a

CSS

.şık {
yazı tipi ailesi: Etki, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
yazı tipi boyutu: 10rem;
harf aralığı: -1rem;
Beyaz renk;
metin gölgesi: -18px 8px 18px #b4bbbb;
}

oynak

İnce ve kalın dış hat, bu metni çekici ve canlı kılıyor. ile oynayabilirsiniz Metin gölgesi farklı konumlarda bulanıklık yarıçapı olmayan özellik. Metin gölgeleri, aşağıdakiler gibi HTML varlıkları dahil tüm karakterlere uygulanır: ♥. kullanabilirsiniz Karakter Varlık Referans Tablosu daha fazla keşfetmek için.

Çıktı

HTML

 gölge #11 
Kodlama ♥

CSS

.oyuncu {
yazı tipi ailesi: 'Baloo Tamma', el yazısı;
renk: #fff;
harf aralığı: 0.2rem;
metin gölgesi: -2px -2px 0px #888,
4px 4px 0px #888,
7px 7px 0px #888;
}

Gelişmiş Gölge Efektleri ile Denemeye Devam Edin

Metin gölgeleri, web tasarımınızı geliştirmenin ve web sitenizi görsel olarak çekici hale getirmenin kolay ve etkili bir yoludur. Ayrıca farklı gölge efektleriyle denemeler yapabilirsiniz. CSS yolculuğunuza devam etmek için gölge efektleri hakkında daha fazla bilgi edinebilirsiniz.

Naincy Mourya (15 Makale Yayınlandı)

Naincy, son derece duyarlı web siteleri ve web kopyaları ile birlikte verimli içerik stratejisi oluşturma konusunda uzmanlaşmıştır. Trend olan teknolojileri yakından takip eden serbest çalışan bir teknoloji yazarıdır.

Naincy Mourya'dan Daha Fazla