Membuat Efek Bayangan Tulisan dan Kotak

Sangat membosankan jika kita membaca tulisan hitam diatas kertas putih. Begitupun membaca blog, Untuk sedikti memvariasikannya mari sedikit kita lakukan hal berikut untuk membuat efek bayangan di kotak ataupun tulisan blog kita. Cara penerapannya adalah dengan merubah nilai dari sebuah template atau tulisannya juga bisa. Beikur saya hanya akan menjelaskan bagaimana kode-kode tersebut yang harus dimasukan dalam CSS template blog anda. Cara merubah template blogspot saya rasa anda sudah tau, sehingga saya tidak perlu menyuruh anda membuk. Edit HTML blog anda.

box-shadow: 1px 2px 3px 4px #000000 inset;

• 1px [horizontal offset] = menunjukan nilai posisi bayangan horizontal
• 2px [vertical offset] = menunjukan nilai posisi bayangan vertikal
• 3px [blur amount] = menujukan nilai jarak blur (optional)
• 4px [spread radius] = menunjukan nilai ketebalan bayangan (optional)
• #000000 [color] = menunjukan nilai warna untuk sebuah sebuah bayangan. Dalam memberikan nilai pada warna box-shadow, bisa mengggunakan nilai warna HEX, RGB, RGBA, HSL, HSLA ataupun Color Name.
• Inset = perubahan posisi bayangan (default mengarah keluar tanpa nilai inset) dengan penambahan nilai inset menjadikan shadow mengarah kedalam (optional)

Sebuah contoh kasus dalam nilai sebuah properti text-shadow:

text-shadow: 1px 2px 3px #000000

• 1px [horizontal offset] =menunjukan nilai posisi bayangan horizontal
• 2px [vertical offset] = menunjukan nilai posisi bayangan vertikal
• 3px [blur amount] = menujukan nilai jarak blur (optional)
• #000000 [color] = menunjukan nilai warna untuk sebuah sebuah bayangan. Dalam memberikan nilai pada warna box-shadow, bisa mengggunakan nilai warna HEX, RGB, RGBA, HSL, HSLA ataupun Color Name.

Contoh style properti CSS box shadow

Box-shadow positive value:

box-shadow: 5px 5px 0px #ccc;

Box-shadow negative value:

box-shadow: -5px -5px 0px #ccc;

Box-shadow with blur:

box-shadow: 0px 0px 20px black;

Box-shadow with inset keyword:

box-shadow: 0px 0px 20px #999 inset;

Box-shadow with under shadow:

box-shadow: 0px 20px 25px -20px #ccc

Box-shadow with inset style 2:

box-shadow:inset 0px 2px 7px #999;

Box-shadow with 2 shadow properties:

box-shadow: inset 5px 5px 0px #ccc,
8px 8px 8px #ff0000;

Box-shadow with 3 shadow properties:

box-shadow:3px 3px 0px #cccccc,7px 7px 0px #bbbbbb,11px 11px 0px #aaaaaa;

Contoh style properti CSS text shadow

Simple Text-shadow:

text-shadow: 5px 10px 0px #999;

Text-shadow with blur:

text-shadow: 5px 5px 5px #999;

Text-shadow style 2 with blur:

text-shadow: 0px 0px 5px #000000;
color:transparent;

Text-shadow - glow effect:

text-shadow: 0px 0px 10px #009CC2;

Text-shadow – multiple shadows: 
text-shadow: 12px 13px 1px #FD9213, -5px 8px 1px #009CC2, 10px -8px 1px #B3C734;

Text multiple shadow

Text-shadow – emboss effect:

text-shadow: -1px -1px #fff,
1px 1px #444;

Text-shadow – emboss effect style 2:

text-shadow: 1px 1px #fff,
-1px -1px #444;

Text-shadow – stroke effect:

text-shadow: 1px 1px 0px #444,
-1px -1px 0px #444;

Text-shadow – 3D effect:

text-shadow: 1px 1px 0px #444,
2px 2px 0px #444,
3px 3px 0px #444,
4px 4px 0px #444;

Cara pemasangan

Saya ambil contoh untuk pemasangan text dan box shadow pada judul sidebar blog saya. Anda hanya cukup memasukan kode text shadow dan/atau box shadow kedalam kode CSS yang dikehendaki. 

.sidebar h4{

border-radius:25px 7px 7px 25px;

border-top:1px solid #ccc;

border-bottom:4px solid #ccc;

color:#36C; f

ont-family:AR CENA;

font-size:17px;

font-weight:bold;

line-height:18px;

margin:-8px -8px 0;

padding:8px;

text-shadow:0 5px 2px #ccc;

box-shadow: 0 0px 6px #ccc;

text-transform:uppercase;

text-align:center;

background-color:#eee

}