Cara Membuat Efek Tulisan dengan CSS Text Shadow (Bayangan)

Assalamualaikum Wr. Wb.

Semangat pagi para blogger,kali ini kita share materi cara membuat efek tulisan dengan CSS text shadow.


  • Pengertian:
Shadow adalah bayangan yang terbentuk berdasarkan arah cahaya yang datang. Mungkin dia tidak pernah melihat melihat bayangan dia sendiri saat sedang bergerak atau beraktifitas dibawah cahaya. Shadow di dalam blogger adalah bayang dari box atau text yang terbentuk dari script script susah di mengerti. 
Box shadow dan/atau text shadow adalah properti dalam kode CSS yang memegang kuncu penting dalam membangun sebuah bentuk desain sederhana tetapi bekesan keren dan nyata. 

  • Latar Belakang:
Seiring dengan cepatnya perkembangan CSS3, web browser seolah-olah berlomba untuk mengimplementasikan berbagai property baru yang belum resmi disetujui badan standarisasi web: W3C. Dalam istilah W3C, property yang belum standar ini bisanya berada dalam status draft, dan bisa berubah sewaktu-waktu.
  • Alat dan Bahan:
  1. Komputer / Laptop.
  2. Koneksi Internet.
  3. Sublime Text.
 
  • Maksud dan Tujuan:
  1. Memberikan kesan nyata atau 3D pada bentuk bangunnya.
  2. Dapat memanjakan mata pengunjung agar tidak bosan dan jenuh.
 
  • Langkah - langkah: 
  1. Buka sublime text.
  2. Ketikkan syntax seperti ini:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    text-shadow: 2px 2px 2px yellow;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>

2px [horizontal offset] =menunjukan nilai posisi bayangan horizontal
2px [vertical offset] = menunjukan nilai posisi bayangan vertikal2
2px [blur amount] = menujukan nilai jarak blur (optional) 
yellow [color] = menunjukan nilai warna untuk sebuah sebuah bayangan
  •  Referensi:
http://www.w3schools.com/css/tryit.asp?filename=trycss3_text-shadow5
  • Penutup:
 Selamat berkreasi, semoga dengan adanya text shadow blog anda jadi lebih hidup. 
 
Wassalamualaikum Wr. Wb.


Share this

Related Posts

Previous
Next Post »