Senin, 29 Desember 2014

Cara Membuat Text Shadow di CSS3

Pada tutorial kali ini, Bintaro Web akan membahas mengenai Cara Membuat Text Shadow di CSS3. Text Shadow adalah efek bayangan pada text seperti halnya kita menggunakan Adobe Photoshop.

Dahulu saat kita ingin membuat text shadow mungkin harus memasukan melalui gambar yang kita buat sebelumnya, tapi pada CSS3 kita bisa langsung membuat text shadow.

Nah, tanpa harus panjang lebar, yukk kita buat text shadow di CSS

1. Misalnya saya mempunyai kode html sebagai berikut 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Contoh Membuat Text Shadow di CSS</title>
</head>
<body>
<h1>Ini adalah text Shadow</h1>
</body>
</html>
2. Lalu, anda masukan kode CSS sebelum penutup tag head, bisa juga melalui linked css. Pada tutorial ini saya ingin merubah tag H1 dengan text shadow.
    <style>
    h1 {
    text-shadow: 2px 2px #ff0000;    }
    </style> 
3. Penjelasan skrip nya adalah : 2px yang pertama adalah untuk mengatur ketebalan shadow pada sumbu x dan 2px yang kedua adalah untuk mengatur ketebalan pada sumbu y sedangkan #ff0000 adalah kode hexa untuk menentukan warna text shadownya, bisa juga dengan nama misalnya Red.
Kode lengkapnya adalah sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Contoh Membuat Text Shadow di CSS</title>
<style>
    h1 {
    text-shadow: 2px 2px #ff0000;
    }
 </style>
</head>
<body>
<h1>Ini adalah text Shadow</h1>
</body>
</html>
4. Lalu silahkan anda lihat hasilnya di browser kesayangan anda :-). Apabila anda ingin mencobanya secara online silahkan langsung klik disini

Cara Membuat Text Shadow di CSS3
Hasil Text Shadow dengan CSS3


Anda butuh Jasa Pembuatan Website untuk Perusahaan atau Toko Online anda? Segera hubungi kami sekarang juga dan dapatkan diskon akhir tahun.

Bintaro Web Design
Tlp : 02171370813
HP : 085710190845
PIN BBM : 7DC8D13D
Email : info@bintaroweb.com

1 komentar: