Text Shadow Pada CSS3

Text Shadow Pada CSS3 – kalau sudah memahami catatan saya mengenai Box Shadow, maka untuk memahami mengenai property CSS3 text shadow ini akan sangat mudah. Karena pada prinsipnya, cara menggunakannya sama persis dengan menggunakan property CSS3 box shadow. Kalau property CSS3 box shadow untuk memberikan efek bayangan pada suatu elemen HTML, sedangkan untuk property CSS3 text shadow untuk memberikan efek bayangan pada text/tulisan/huruf. Value/nilai yang kita bisa beri pada property CSS3 text shadow 4 : <x-offset>, <y-offset>, <blur>, <color>. 4 value menjadi parameter yang wajib diisi ketika kita menggunakan property CSS3 text shadow. Sedangkan kalau di property CSS3 box shadow ada value yang optional yaitu : <inset> dan <spread>. Untuk value optional itu tidak ada pada property CSS3 text shadow.

Value/Nilai Pada Property Text Shadow

● <x-offset> adalah value/nilai property Text shadow yang berfungsi untuk mengatur jarak bayangan terhadap Text pada sumbu horizontal. Nilainya numeric. Maksudnya numeric seperti ini, contoh apabila kita kasih nilah 10px, maka bayangannya akan bergerak ke sebeleh kanan dari Text sebesar 10px. Sedangkan kalo kita beri nilai -10px, maka bayangannya akan bergerak ke kiri sebesar 10px.

● <y-offset> adalah value/nilai property Text shadow yang berfungsi untuk mengatur jarak bayangan terhadap Text pada sumbu vertikal. Nilainya numeric sama dengan value <x-offset>. maksudnya numeric, contoh apabila kita kasih nilah 10px, maka bayangannya akan bergerak ke bawah dari Text sebesar 10px. Sedangkan kalo kita beri nilai -10px, maka bayangannya akan bergerak ke atas sebesar 10px.

● <blur> sama dengan property size yang ada pada aplikasi photoshop. dimana fungsi value/nilai <blur&gt untuk memberikan blur pada bayangan suatu Text. Nilainya 0 sampai tak terhingga. Semakin besar nilainya semakin blur bayangannya. Sedangkan semakin kecil dan mendekati angka 0 maka bayangannya semakin solid.

● <color> adalah value/nilai pada property CSS3 Text shadow untuk memberikan warna. Pemberian warna bisa dengan menggunakan nama warna dalam bahasa inggris, bilangan hexadecimal, RGBa dan HSLa.

Sama seperti property CSS3 box shadow, untuk property CSS3 text shadow kita juga bisa memberikan value/nilai Multiple Text Shadow. Jadi satu baris kode property CSS3 text shadow bisa berisi lebih dari 1 value property CSS3 text shadow. Hal ini akan sangat membantu ketika kita ingin berkreasi sebebas yang kita mau. Untuk inplementasi mengenai property CSS3 text shadow silakan lihat contoh sintak dibawah ini :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Text Shadow</title>
	<style>
		div {
			text-align: center;
			margin: 20px;
		}
		.text1 {
			font-size: 50px;
			font-family: arial;
			font-weight: bold;
			color: #1b7e68;
			text-shadow:5px 5px 5px rgba(105, 200, 45, .50);
		}
		.text2 {
			font-size: 50px;
			font-family: arial;
			font-weight: bold;
			color: #a01370;
			text-shadow: 5px 5px 5px rgba(105, 50, 45, .50), -5px -5px 5px rgba(15, 100, 45, .50);
		}
		.text3 {
			font-size: 50px;
			font-family: arial;
			font-weight: bold;
			color: #ffffff;
			text-shadow:0px 2px 1px rgba(0, 0, 0, .50);
		}
	</style>
</head>
<body>
	<div class="text1">Hello World</div>
	<div class="text2">Hello World</div>
	<div class="text3">Hello World</div>
</body>
</html>

contoh penggunaan nilai-nilai pada property text shadow di css3

Text pertama dibuat dengan memberikan efek 1 bayangan dengan menggunakan warna value rgba(105, 200, 45, .50). Untuk value <x-offset> sebesar 5 px membuat bayangan bergerak ke sebelah kiri text sebesar 5px. Kemudian untuk nilai <y-offset> sebesar 5px membuat bayangan bergerak ke arah bawah dari text sebesar 5px. Dan value <blur> sebanyak 5px membuat bayangan blur sebesar 5px.

Text kedua dibuat dengan memberikan efek 2 bayangan. Bayangan pertama dengan menggunakan warna value rgba(105, 50, 45, .50). Untuk value <x-offset> sebesar 5 px membuat bayangan bergerak ke sebelah kiri text sebesar 5px. Kemudian untuk nilai <y-offset> sebesar 5px membuat bayangan bergerak ke arah bawah dari text sebesar 5px. Dan value <blur> sebanyak 5px membuat bayangan blur sebesar 5px. Sedangkan untuk bayangan kedua dengan menggunakan warna dengan value rgba(15, 100, 45, .50). Untuk value <x-offset> sebesar -5 px membuat bayangan bergerak ke sebelah kanan text sebesar 5px. Kemudian untuk nilai <y-offset> sebesar -5px membuat bayangan bergerak ke arah atas dari text sebesar 5px. Dan value <blur> sebanyak 5px membuat bayangan blur sebesar 5px.

Text ketiga dibuat dengan memberikan efek 1 bayangan agar menghasilkan efek 3 dimensi. bayangan tersebut dibuat dengan menggunakan hitam dan tingkat transparansi sebesar 50%. Untuk value <x-offset> sebesar 0 px membuat bayangan tidak bergerak ke sebelah kiri atau ke kanan text. Kemudian untuk nilai <y-offset> sebesar 2px membuat bayangan bergerak ke arah bawah dari text sebesar 2px. Dan value <blur> sebanyak 1px membuat bayangan blur sebesar 1px.

Tips :

Pada saat membuat sebuah website. Ketika mencoba try and error nilai/value yang ada property CSS3 Text shadow, agar lebih mudah untuk melihat hasilnya secara real time. Kita bisa menggunakan fasilitas web browser inspect. Dengan menggunakan fasilitas ini, kita bisa melakukan edit nilai <inset>, <x-offset>, <y-offset>, <blur>, <spread>, <color> lebih leluasa secara real time, namun tidak permanen. Kalau hasilnya sudah sesuai dengan keinginan, selera, dan kebutuhan kita baru kita copy paste ke code editor tempat kita bekerja. Silakan ikuti langkah berikut ini :

1. Inspect : kita bisa menggunakan 3 cara. Pertama, klik kanan pada mouse >>> pilih inspect. Kedua kita bisa menggunakan shorcutnya dengan menekan tombol Ctrl+Shift+I. Dan ketiga kita bisa melalui customize & control browser yang ada pada bagian paling atas kanan dengan icon 3 titik, kemudian kilik kiri pada mouse, pilih more tools, lalu pilih developer tools ( cara ini untuk google chrome ).

2. Pilih Style.

3. Cari element yang akan kita lakukan edit nilai dari property CSS-nya dengan menggunakan icon panan yang ada dalam kota, posisinya berada tepat di atas kiri bagian inspect element tersebut.

4. Lalu rubah Style-nya sesuai dengan keinginan, selera, dan kebutuhan kita.

5. Apabila style yang kita inginkan sudah cocok, tinggal Copy Paste pada code editor dan save agar stylenya yang diterapkan permanen.

Sekian untuk penjelasan untuk property CSS3 text shadow. Semoga bisa menambah wawasan mengenai web design.

Untuk contoh beberapa design silakan lihat contoh dibawah ini dan silakan download untuk source code dibawah contoh designnya.

Hello World