CSS3 memungkinkan Anda untuk berkreasi dan bereksperimen dengan desain Anda untuk membangun halaman web yang indah dan unik. Salah satu bidang desain yang memungkinkan Anda untuk bekerja dengan CSS adalah tipografi.

Anda dapat menggunakan font-family dan bayangan teks properti untuk membuat efek sederhana namun luar biasa. Anda mungkin sudah tahu tentang aplikasi dasar text shadow di CSS. Namun, Anda dapat membuat berbagai gaya dengan properti ini.

Dalam artikel ini, Anda akan mempelajari cara efektif untuk membuat berbagai efek bayangan teks menggunakan HTML dan CSS.

Memulai Dengan HTML dan CSS

Anda dapat menyalin dan menempelkan contoh kode ini untuk mendapatkan efek bayangan teks mana pun yang Anda inginkan. Mulailah dengan membuat

index.html

 bayangan #01 


href=" https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap"
rel="stylesheet"
/>
 bayangan #02 


href=" https://fonts.googleapis.com/css2?family=Monoton&display=swap"
rel="stylesheet"
/>
 bayangan #03 


href=" https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap"
rel="stylesheet"
/>
 bayangan #04 


href=" https://fonts.googleapis.com/css2?family=Rampart+One&display=swap"
rel="stylesheet"
/>
 bayangan #05 


href=" https://fonts.googleapis.com/css2?family=Faster+One&display=swap"
rel="stylesheet"
/>
 bayangan #06 


href=" https://fonts.googleapis.com/css2?family=Eater&display=swap"
rel="stylesheet"
/>
 bayangan #07 


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

style.css

tubuh {
transformasi teks: huruf besar;
tinggi garis: 1;
perataan teks: tengah;
ukuran font: 5rem;
tampilan: kisi;
celah: 4rem;
}

Sekarang, mari kita lihat 11 contoh bayangan teks untuk Anda coba.

Terkait: Cara Mengubah Teks Situs Web Anda Dengan Properti font-family CSS

Mistik

Mystic adalah gaya kaca yang memberikan efek seperti transisi yang keren tanpa menggunakan mengubah Properti. Ini adalah efek super sederhana, namun estetis, untuk situs web yang berani dan berorientasi pada pertumbuhan.

Keluaran

HTML

 Bayangan #01 
Mistik

CSS

tubuh {
warna-latar belakang: #5e5555;
}
.mistis {
font-family: 'Bowlby One', kursif;
warna: rgba (255, 255, 255, 0,596);
text-shadow: 20px 0px 10px rgb (0, 0, 0);
}

monoton

Ini adalah efek teks yang menyenangkan menggunakan font 'Monoton'. Anda dapat bermain-main dengan teks dan warna bayangan agar sesuai dengan warna utama situs web Anda.

Keluaran

HTML

 Bayangan #02 
monoton

CSS

.monoton {
font-family: 'Monoton', kursif;
ukuran font: 15rem;
warna: rgb (255, 0, 0);
opasitas: 0,5;
text-shadow: 0px -78px rgb (255, 196, 0);
}

Bungee

Ini adalah gaya keren menggunakan font 'Bungee Shade'. Dikombinasikan dengan latar belakang gelap, menghasilkan efek mentah dengan rasa curiga.

Keluaran

HTML

 bayangan #03 
Bungee

CSS

tubuh {
warna latar: #222;
}
.bungee {
font-family: 'Bungee Shade', kursif;
warna: rgb (160, 12, 12);
opasitas: 0,9;
text-shadow: -18px 18px 0 rgb (66, 45, 45);
}

Radioaktif

Anda dapat menggunakan efek ini untuk tanda peringatan atau bahaya. Ini menggunakan font 'Rampart One'.

Keluaran

HTML

 bayangan #04 
Radioaktif

CSS

tubuh {
warna latar belakang: #27292d;
}
.radioaktif {
font-family: 'Rampart One', kursif;
warna: rgb (97, 214, 43);
opasitas: 0,6;
text-shadow: -18px -18px 20px rgb (87, 255, 9);
}

lari cepat

Efek teks berjalan ini menggunakan font 'Lebih Cepat', the bayangan teks properti, dan ::setelahelemen semu dengan isi yang sama dengan teks. Ini menciptakan efek 'penggandaan'.

Keluaran

HTML

 bayangan #05 
lari cepat

CSS

tubuh {
warna latar belakang: #27292d;
}
.sprint {
font-family: 'Lebih Cepat', kursif;
ukuran font: 10rem;
warna: rgba (255, 0, 242, 0,322);
text-shadow: -20px -108px 0px rgba (255, 255, 255, 0.445);
spasi huruf: 1rem;
posisi: relatif;
}
.sprint:: setelah {
isi: 'sprint';
posisi: mutlak;
atas: 215 piksel;
kanan: 300 piksel;
}

Berduri

Efek teks berduri yang mengerikan ini menggunakan font 'Eater'. Anda dapat mencoba menggeser bayangan teks menuju kanan bawah sebagai gantinya.

Keluaran

HTML

 bayangan #06 
Berduri

CSS

.berduri {
font-family: 'Eater', kursif;
text-shadow: -18px -18px 2px #777;
}

Codystar

Teks-bayangan dapat bertindak sebagai garis buram namun terlihat pada teks. Efek cerah ini bekerja sangat baik dengan font 'Codystar'.

Keluaran

HTML

 bayangan #06 
Codystar

CSS

.codystar {
font-family: 'Codystar', kursif;
font-berat: tebal;
warna: rgb (55, 58, 255);
text-shadow: 1px 1px 10px rgb (16, 72, 255), 1px 1px 10px rgb (0, 195, 255);
}

Kerajaan

Anda dapat mencapai tipografi otoritatif dengan efek bayangan ini. Ini menggunakan ::sebelum elemen semu dan mengubah properti untuk memiringkan bayangan.

Keluaran

HTML

 bayangan #08 
Kerajaan

CSS

tubuh {
warna-latar belakang: #5e5555;
}
.kerajaan {
warna putih;
font-family: Dampak, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
ukuran font: 10rem;
tinggi garis: 1;
perataan teks: tengah;
}
.kingdom--shadow:: sebelum {
warna: #000;
isi: attr(data-teks);
margin-atas: 0,7rem;
posisi: mutlak;
transformasi: perspektif (205px) skala rotateX(38deg) (0,84);
indeks-z: -1;
}

pembuat kode

Ini cerah dan positif bayangan teks efek menyampaikan kepribadian situs web yang sadar diri dan termotivasi. Anda dapat menambahkannya ke situs web Anda untuk menghasilkan tampilan smokey yang sederhana.

Keluaran

HTML

 bayangan #09 


Makan 

Tidur 

Kode 

Mengulang

CSS

tubuh {
warna-latar belakang: #5e5555;
}
div {
font-family: Verdana, Jenewa, Tahoma, sans-serif;
bantalan: 40px;
margin: 0px otomatis;
font-berat: tebal;
tinggi garis: 5.8rem;
perataan teks: kiri;
warna: rgb (94, 94, 94);
} 
.coder-life {
text-shadow: 5px 5px #ffff00;
filter: drop-shadow(-10px 10px 20px #fff000);
}

Anggun

Jika Anda menyukai minimalis, maka efek bayangan teks ini sangat cocok. Karena menggunakan ukuran font yang besar, kami mengurangi spasi huruf dan menerapkan bayangan teks properti untuk menciptakan efek ini.

Keluaran

HTML

 bayangan #10 


S
H
R
A
D
D
H
A

CSS

.elegan {
font-family: Dampak, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
ukuran font: 10rem;
spasi huruf: -1rem;
warna putih;
text-shadow: -18px 8px 18px #b4bbbb;
}

Ceria

Garis tipis dan tebal membuat teks ini menarik dan hidup. Anda dapat bermain-main dengan bayangan teks properti tanpa radius blur pada posisi yang berbeda. Bayangan teks berlaku untuk semua karakter, termasuk entitas HTML seperti ♥. Anda dapat menggunakan Bagan Referensi Entitas Karakter untuk mengeksplorasi lebih jauh.

Keluaran

HTML

 bayangan #11 
Pengkodean adalah

CSS

.ceria {
font-family: 'Baloo Tamma', kursif;
warna: #ff;
spasi huruf: 0.2rem;
teks-bayangan: -2px -2px 0px #888,
4px 4px 0px #888,
7px 7px 0px #888;
}

Terus Bereksperimen Dengan Efek Bayangan Tingkat Lanjut

Bayangan teks adalah cara mudah dan efektif untuk menyempurnakan desain web Anda dan membuat situs web Anda menarik secara visual. Anda juga dapat bereksperimen dengan efek bayangan yang berbeda. Anda dapat mempelajari lebih lanjut tentang efek drop shadow untuk melanjutkan perjalanan CSS Anda.

Naincy Mourya (15 Artikel Diterbitkan)

Naincy mengkhususkan diri dalam membangun situs web yang sangat responsif dan strategi konten yang efisien bersama dengan salinan web. Dia adalah seorang penulis teknologi lepas yang mengawasi dengan tajam teknologi yang sedang tren.

More From Naincy Mourya