Cara membuat Efek Shadow (bayangan) pada text dan box

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 judul widget 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 anda lebih suka bermain game yang 2D atau 3D ? ya jelaslah 3D (3 dimensi), karena lebih menyenangkan dan lebih asli. Oke cukup basa basinya, bagi anda yang tertarik mempelajari dan memasang properti shadow pada blognya, dapat mengikuti tutorial dibawah ini :

Mengenal CSS shadow lebih dekat :)

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

}

Last Words

Bagaimana? cukup mudahkan membuat box dan text shadow? Sebenernya contoh diatas hanya dasar dasarnya saja, anda dapat membuat yang lebih keren dan indah tentunya. Oh iya jangan lupa membaca post saya yang lainnya dengan membaca DAFTAR ISI dan jika mau copas, cantumin dong Url postingan ini ya!

Sekian post tentang Cara membuat Efek Shadow pada text dan box. Saya telah mencoba yang terbaik untuk membuat tutorial ini sesederhana mungkin untuk dapat anda pahami. Jika Anda masih menghadapi masalah untuk Cara membuat Efek Shadow pada text dan box. Maka jangan ragu untuk bertanya kepada saya. Tinggalkan komentar di bawah posting ini dan saya pasti akan membalas Anda jika ada waktu yang memungkinkan. Maaf bila ada salah-salah kata, semoga tulisan ini dapat bermanfaat bagi anda. Tetap terhubung dengan Ujangyoyo karena akan ada postingan baru yang lebih menarik. Happy Blogging friends!

credits : dezige-in and flashuser.