Cara membuat Efek Shadow (bayangan) Pada Text dan Box ~ Blogstorial

Shadow adalah bayangan yang terbentuk berdasarkan arah cahaya yang datang. Mana mungkin sih ada orang yang tidak mengetahui apa itu bayangan (shadow). 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 :) haha. 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. Jadi keuntungan dari memasang shadow pada box atau text menurut saya adalah seperti berikut :

- Memberikan kesan nyata atau 3D pada bentuk bangunnya.

- Keren alias cool :))

- Beda dari yang lain.

- Dapat memanjakan mata pengunjung agar tidak bosan dan jenuh.

Lihat aja judul dari postingan ini dan lihat widget popular post di sidebar blog saya. Saya telah memasukan kode CSS shadow pada text dan sisi bangunnya. Terlihat keren dan elegant bukan ? Untuk contoh realnya yaitu, apakah sobat lebih suka bermain game yang 2D atau 3D ? ya jelaslah 3D (3 dimensi), karena lebih menyenangkan dan lebih asli. Oke cukup basa basinya, bagi sobat yang tertarik mempelajari dan memasang properti shadow pada blognya, dapat mengikuti tutorial dibawah ini :

Mengenal CSS Shadow

Sebuah contoh kasus dalam nilai sebuah properti box-shadow:

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. Sobat 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
font-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
}

Notes

Ga sulit banget kan? Cukup pelajari dasarnya saja. Sobat dapat membuat yang lebih keren dan indah tentunya. Selamat mencoba

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Blogstorial