Membuat Efek Box Shadow dan Text Shadow di Blog

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)

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 CSS3 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 CSS3 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;

 
Anda bisa mengembangkan sendiri sesuai kebutuhan perasaan dan blog anda. Demikian artikel kali ini, saya Bung Frangki mengucapkan terima kasih atas apresiasi anda. Salam blogger..

Bagikan ke :

Facebook Google+ Twitter Digg Technorati Reddit