Hallo...
Semangat Pagi !
Hari ini cerah
dengan kehadiran kalian *eaaaa....
Trimakasih telah
berkunjung di web saya :)
Kali ini saya akan
membahas tentang effek text shadow, nah di postingan ini, saya share
bagaimana cara membuat text shadow menggunakan
html dengan css.
Pengertian
Shadow merupakan efek bayangan yang dihasilkan dari tulisan maupun box atau awal box. Seluruh pengaturan untuk membuat efek text shadow dengan berbagai model dan warna, kita cukup mengatur nilai value dari kode text shadow. Sehingga offset sumbu (y) dan (x) dapat kita bentuk dan kita sesuaikan dengan keinginan.
Latar Belakang
Membuat efek teks bayangan dapat menjadikan ciri khas suatu web, untuk menciptakan efeknya, kita hanya membutuhkan CSS Text Shadow.
Tujuan
Untuk memberikan wawasan ataupun referensi kepada teman-teman.
Alat dan Bahan
1. Komputer atau Laptop.
2. Sublime text atau text editor lainnya.
Tahap Pelaksanaan
Berikut tampilan text shadow dan kodenya, yang dapat menjadi referensi untuk anda.
1. Tampilan pertama.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-weight:700px;
font-size:35px;
color:#064475;
text-shadow:
1px 2px 1px #9ad2fe,
-1px -2px 1px #3498DB;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
2. Tampilan kedua.
h1 {
font-weight:680px;
color:#9a9d0b;
text-shadow:
1px 1px #404206,
2px 2px #727415,
3px 3px #727415,
4px 4px #727415,
5px 5px #727415,
6px 6px #727415,
7px 7px #404206,
8px 8px 7px #000;
}
3. Tampilan ketiga, efek terbakar.
font-weight:600px;
color:black;
text-shadow:
0px 0px 4px #ccc,
-1px -5px 4px #ff3,
2px -10px 6px #fd3,
-3px -15px 11px #f80,
3px -18px 18px #f20;
}
4. Tampilan keempat, efek warna-warni.
h1 {
font-weight:900px;
color:#fff;
text-shadow:
-1px -1px 0px #ddd,
2px 1px 0px #2ECC71,
4px 2px 0px #f59b0f,
6px 3px 0px #f5dc0f,
8px 4px 0px #19a305,
10px 5px 0px #F9690E,
12px 6px 0px #052aa3,
14px 7px 0px #19B5FE,
14px 8px 2px #000,
14px 5px 10px #000,
14px 5px 25px #000;
}
Referensi
w3.schools.com
http://sahabatblogger77.blogspot.co.id
Penutup
Trimakasih telah menyimak postingan saya hari ini, silahkan share
apabila postingan ini membantu anda. Dan join blog saya, saya doakan
anda mendapat rizky yang lancar dan barokah.
Apabila ada kritik dan saran, atau pertanyaan seputar blog dan
postingan saya, silahkan kirim melalui email ke kulosyafa@gmail.com
