Panduan Cara Membuat Teks Shadow Blog dg CSS3

Panduan Cara Membuat Teks Shadow Blog dg CSS3 - Pada 2 artikel sebelumnya yaitu tentang teks 3 dimensi baik dengan yang tampilan biasa ataupun dengan efek berjalan. Pada artikel tersebut ada salah satu komentar dari teman saya yang menanyakan tentang Cara Membuat Teks Shadow Blog. Didalam teks 3 dimensi yang telah saya jelaskan sebelumnya, sebenarnya kita sudah bisa mengambil kode-kode teks shadow didalam kode text 3D tersebut dan mengaturnya lagi agar sesuai dengan keinginan kita. Karena beberapa alasan, mungkin kita tidak bisa mengatur dan mengedit teks shadow yang telah ada sehingga dengan adanya artikel Panduan Cara Membuat Teks Shadow Blog dg CSS3 ini, saya berharap bisa membantu teman-teman semua

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 anda 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

TEKS PELANGI

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

TEKS TRANSPARAN

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

TEKS BAYANGAN EFEK GARIS

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

TEKS SHADOW 3 DIMENSI

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

TEKS BAYANGAN DENGAN JARAK

text-jarak {text-shadow:30px 10px 0 #00CAFF;}

Teks Bayangan Efek Kabur
Yaitu membuat teks shadow tanpa bayangan hanya memberikan efek kabur atau samar

TEKS BAYANGAN KABUR

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

TEKS SHADOW EFEK BLUR

text-blur {color:#fff; text-shadow:0 0 5px #FF0000;}

Teks Shadow Efek Bayangan Saja
Hanya mengutamakan warna teks shadow sebagai warna dominan

TEKS SHADOW EFEK BAYANGAN SAJA

text-b {color:#fff;text-shadow:2px 2px 2px #FFA000;}

Teks Bayangan Efek Sebelah Kiri
Memberikan efek teks utama dengan bayangan berada disebelah kiri

TEKS SHADOW EFEK SEBELAH 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

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, anda bisa mengatur dan mengeditnya sesuai dengan keinginan anda. 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 anda untuk artikel ini, Panduan Cara Membuat Teks Shadow Blog dg CSS3

Panduan Cara Membuat Teks Shadow Blog dg CSS3 2013-06-16T07:39:00+08:00 Rating: 4.5 Diposkan Oleh: Ana Sriwahyuni