Pada tutorial sebelumnya, kita sudah belajar tentang Tutorial Belajar CSS Bagian 53 : Cara Menggunakan Property Zoom di CSS. Pada tutorial ini kita akan belajar tentang cara menggunakan property text shadow di CSS.
Sesuai dengan namanya, property CSS ini menambahkan bayangan pada teks. Property ini menerima nilai bayangan yang dipisahkan koma yang diterapkan pada teks.
Property defaultnya adalah none. Ini menerapkan satu atau lebih dari satu efek bayangan teks pada konten teks elemen.
Mari kita lihat sintaks property text-shadow.
Sintaksis
Nilai Property Text Shadow
| Nilai | Deskripsi |
| h-shadow | Ini adalah nilai yang diperlukan. Ini menentukan posisi bayangan horizontal dan bisa diisi dengan nilai negatif. |
| v-shadow | Ini juga merupakan nilai yang diperlukan yang menentukan posisi bayangan vertikal. tidak mengizinkan nilai-nilai negatif. |
| blur-radius | Ini adalah blur-radius, yang merupakan nilai opsional. Nilai defaultnya adalah 0. |
| color | Ini adalah warna bayangan dan juga nilai opsional. |
| none | Ini adalah nilai default, yang berarti tidak ada bayangan. |
| initial | Digunakan untuk mengatur property ke nilai defaultnya. |
| inherit | Ini hanya mewarisi property dari elemen induknya. |
Mari kita memahaminya dengan menggunakan beberapa contoh.
Contoh Bayangan sederhana
<!DOCTYPE html>
<html>
<head>
<title>Property text-shadow </title>
<style>
p.simple{
text-shadow: 3px 3px red;
}
</style>
</head>
<body>
<p class="simple">
Bayangan Sederhana
</p>
</body>
</html> Contoh Bayangan kabur
<!DOCTYPE html>
<html>
<head>
<title> Property text-shadow</title>
<style>
p.fuzzy{
text-shadow: 3px 3px 3px violet;
font-size:30px;
text-align:center;
}
</style>
</head>
<body>
<p class="fuzzy">
Bayangan Kabur
</p>
</body>
</html> Contoh Banyak Bayangan
<!DOCTYPE html>
<html>
<head>
<title> Property text-shadow </title>
<style>
p.multi{
text-shadow: -3px -3px 3px blue, 3px 3px 3px red;
font-size:30px;
text-align:center;
}
</style>
</head>
<body>
<p class="multi">
Banyak Bayangan
</p>
</body>
</html>Contoh Efek Cahaya
<!DOCTYPE html>
<html>
<head>
<title>Property text-shadow</title>
<style>
.multi{
text-shadow: 0 0 .1em cyan;
background-color: black;
font-size:50px;
text-align:center;
}
</style>
</head>
<body>
<div class="multi">
Efek Cahaya
</div>
</body>
</html>Semoga tutorial property text shadow ini membantu Anda untuk memahami cara menambahkan bayangan pada teks di website Anda.
0 Komentar