Dalam membuat teks shadow atau teks bayangan yang pertama perlu diperhatikan adalah cara penulisan kodenya. Dan seperti yang telah kita ketahui, penulisan kode teks bayangan di blog adalah sebagai berikut
text-shadow:xPosition yPosition blurSize color;Keterangan:
xPosition : posisi horizontal teks shadow terhadap teks utama
yPosition : posisi vertikal teks shadow terhadap teks utama
blurSize : ukur teks shadow
color : warna teks shadow
Jadi, jika selama ini sobat mendapatkan kode teks shadow seperti text-shadow:2px 2px 4px #85C2CC; dan menganggap 2px 2px 4px adalah ukuran teks shadow, sebenarnya bukan karena ukuran teks shadow dalam kode tersebut adalah 4px. Sedangkan 2px 2px merupakan posisi letak teks shadow dengan teks utama (baca: jarak), semakin besar nilai yang diberikan semakin jauh jarak keduanya. Untuk lebih jelasnya, mari kita pelajari bersama dengan beberapa kode teks shadow berikut ini
Teks Bayangan Dengan Efek Pelangi
Teks shadow tidak hanya mengandung 2 warna saja tapi bisa dibuat lebih dari 2 warna dengan contoh kodenya seperti berikut
text-pelangi {
color:#000;
text-shadow:1px 1px 0 #00FF20,
2px 2px 0 #F2FF00,
3px 3px 0 #5DEBEE,
4px 4px 0 #FF0000,
5px 5px 0 #FFA1A1,
6px 6px 0 #0004FF,
7px 7px 0 #FF8200;
}
Teks Bayangan Dengan Efek Transparan
Dengan menggunakan efek seperti ini, warna teks utama dengan teks bayangan masih terlihat dengan jelas
text-transparan {
color:#000;
text-shadow:3px 3px 0 #aaa;
}
Teks Bayangan Dengan Efek Garis
Dengan menggunaka 4 kode, kode jarak dan bayangan. Kita akan membuat efek garis pada teks shadow yang kita buat
text-garis {
color:#fff;
text-shadow:-1px -1px 0 #000,
-1px 1px 0 #000,
1px -1px 0 #000,
1px 1px 0 #000;
}
Teks Bayangan Dengan Efek 3 Dimensi
Penjelasan ini sudah saya bahas sebelumnya disini dan untuk kode sederhananya adalah sebagai berikut
text-3dimensi {text-shadow:1px 1px 0 #fff, 2px 2px 0 #000;}
Teks Bayangan Dengan Jarak
Memberikan sedikit efek dengan adanya jarak antara teks utama dengan teks bayangan
text-jarak {text-shadow:30px 10px 0 #00CAFF;}
Teks Bayangan Efek Kabur
Yaitu membuat teks shadow tanpa bayangan hanya memberikan efek kabur atau samar
text-kabur {color:transparent; text-shadow:0 0 5px #FF8200;}
Teks Bayangan Efek Buram atau Blur
Efek shadow ini sering digunakan yaitu memberikan efek buram pada teks utama
text-blur {color:#fff; text-shadow:0 0 5px #FF0000;}
Teks Shadow Efek Bayangan Saja
Hanya mengutamakan warna teks shadow sebagai warna dominan
text-b {color:#fff;text-shadow:2px 2px 2px #FFA000;}
Teks Bayangan Efek Sebelah Kiri
Memberikan efek teks utama dengan bayangan berada disebelah kiri
text-bleft {text-shadow:-2px -2px 2px #FD00FF;}
Teks Shadow
Ini teks shadow yang sering dan umum digunakan, padahal kalau diberi nama teks shadow ini adalah teks shadow tanpa blur
text-mshadow {text-shadow:2px 2px 0 #C71F00;}
Untuk pemasangan kedalam blog, gunakan sesuai dengan id class kode yang digunakan
Contoh pemasangan:
<text-mshadow>TEKS SHADOW TANPA BLUR</text-mshadow>
Dari beberapa kode diatas, sobat bisa mengatur dan mengeditnya sesuai dengan keinginan sobat. Apa saja yang perlu di edit? Bentuk huruf (font), ukuran, dan warna yang akan memberikan efek lebih baik lagi.
Ringkasan Kode Teks Shadow
text-pelangi {font-size:24px;color:#000;text-shadow:1px 1px 0 #00FF20,2px 2px 0 #F2FF00,3px 3px 0 #5DEBEE,4px 4px 0 #FF0000,5px 5px 0 #FFA1A1,6px 6px 0 #0004FF,7px 7px 0 #FF8200;}
text-transparan {font-size:24px;color:#000;text-shadow:3px 3px 0 #aaa;}
text-garis {font-size:24px;color:#fff;text-shadow:-1px -1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,1px 1px 0 #000;}
text-3dimensi {font-size:24px;text-shadow:1px 1px 0 #fff, 2px 2px 0 #000;}
text-jarak {font-size:24px;text-shadow:30px 10px 0 #00CAFF;}
text-blur {cfont-size:24px;olor:#fff; text-shadow:0 0 5px #FF0000;}
text-kabur {font-size:24px;color:transparent; text-shadow:0 0 5px #FF8200;}
text-b {font-size:24px;color:#fff;text-shadow:2px 2px 2px #FFA000;}
text-bleft {font-size:24px;text-shadow:-2px -2px 2px #FD00FF;}
text-mshadow {text-shadow:2px 2px 0 #C71F00;}
Terimakasih. Semoga artikel ini memberikan manfaat, jika ada kode yang error silahkan tinggalkan komentar sobat untuk artikel ini, Panduan Cara Membuat Teks Shadow Blog dg CSS3
Klik untuk melihat kode: :) =( :s :D :-D ^:D ^o^ 7:( :Q :p T_T @@, :-a :W *fck* x@