Warning: Use of undefined constant TWITTER_CONSUMER_KEY - assumed 'TWITTER_CONSUMER_KEY' (this will throw an Error in a future version of PHP) in /home/hikaruyu/public_html/wp-content/themes/hikaruyuuki/functions.php on line 9

Warning: Use of undefined constant TWITTER_CONSUMER_SECRET - assumed 'TWITTER_CONSUMER_SECRET' (this will throw an Error in a future version of PHP) in /home/hikaruyu/public_html/wp-content/themes/hikaruyuuki/functions.php on line 10

Warning: Use of undefined constant TWITTER_ACCESS_TOKEN - assumed 'TWITTER_ACCESS_TOKEN' (this will throw an Error in a future version of PHP) in /home/hikaruyu/public_html/wp-content/themes/hikaruyuuki/functions.php on line 11

Warning: Use of undefined constant TWITTER_ACCESS_TOKEN_SECRET - assumed 'TWITTER_ACCESS_TOKEN_SECRET' (this will throw an Error in a future version of PHP) in /home/hikaruyu/public_html/wp-content/themes/hikaruyuuki/functions.php on line 12

Warning: Use of undefined constant USE_COLLAPSIBLE - assumed 'USE_COLLAPSIBLE' (this will throw an Error in a future version of PHP) in /home/hikaruyu/public_html/wp-content/themes/hikaruyuuki/functions.php on line 14

Warning: Use of undefined constant USE_MULTILINGUAL - assumed 'USE_MULTILINGUAL' (this will throw an Error in a future version of PHP) in /home/hikaruyu/public_html/wp-content/themes/hikaruyuuki/functions.php on line 15

Warning: Use of undefined constant THEME_BODY_WIDTH - assumed 'THEME_BODY_WIDTH' (this will throw an Error in a future version of PHP) in /home/hikaruyu/public_html/wp-content/themes/hikaruyuuki/functions.php on line 16

Warning: Use of undefined constant THEME_COMMENT_THREADED - assumed 'THEME_COMMENT_THREADED' (this will throw an Error in a future version of PHP) in /home/hikaruyu/public_html/wp-content/themes/hikaruyuuki/functions.php on line 17

Warning: Use of undefined constant EDITOR_INLINE_STYLES - assumed 'EDITOR_INLINE_STYLES' (this will throw an Error in a future version of PHP) in /home/hikaruyu/public_html/wp-content/themes/hikaruyuuki/functions.php on line 18

Warning: Use of undefined constant SUPPORT_MENU - assumed 'SUPPORT_MENU' (this will throw an Error in a future version of PHP) in /home/hikaruyu/public_html/wp-content/themes/hikaruyuuki/functions.php on line 19

Warning: Use of undefined constant SUPPORT_THUMBNAIL - assumed 'SUPPORT_THUMBNAIL' (this will throw an Error in a future version of PHP) in /home/hikaruyu/public_html/wp-content/themes/hikaruyuuki/functions.php on line 20

Warning: Use of undefined constant THUMBNAIL_WIDTH - assumed 'THUMBNAIL_WIDTH' (this will throw an Error in a future version of PHP) in /home/hikaruyu/public_html/wp-content/themes/hikaruyuuki/functions.php on line 21

Warning: Use of undefined constant THUMBNAIL_HEIGHT - assumed 'THUMBNAIL_HEIGHT' (this will throw an Error in a future version of PHP) in /home/hikaruyu/public_html/wp-content/themes/hikaruyuuki/functions.php on line 22

Warning: Use of undefined constant DISABLE_PINGTRACKBACK - assumed 'DISABLE_PINGTRACKBACK' (this will throw an Error in a future version of PHP) in /home/hikaruyu/public_html/wp-content/themes/hikaruyuuki/functions.php on line 24
Berkenalan dengan CSS 3 Box Shadow | Hikaru {Aka} Yuuki のブログ
Warning: Use of undefined constant php - assumed 'php' (this will throw an Error in a future version of PHP) in /home/hikaruyu/public_html/wp-content/themes/hikaruyuuki/header.php on line 9

Warning: Use of undefined constant php - assumed 'php' (this will throw an Error in a future version of PHP) in /home/hikaruyu/public_html/wp-content/themes/hikaruyuuki/header.php on line 25
 


Berkenalan dengan CSS 3 Box Shadow

Posted in: Website & Blog |

css-box-shadow

Walau saya sudah lama menggunakan CSS 3 shadow (bayangan), kali ini baru ada kesempatan untuk menulis tentang shadow di CSS 3 (lately it’s a bit lazy to write actually). Dulu kita harus berjuang dalam membuat shadow untuk tampilan web, harus membuat gambar shadow untuk terlebih dahulu, di-slice/potong per bagian-bagian (kecuali kalau menerapkan CSS image sprite) kemudian simpan dalam PNG/GIF, saya masih ingat beberapa tahun lalu saya terkesan dengan DeviantArt yang menerapkan shadow dalam desainnya. Yah jaman sudah berubah, teknologi pun juga berubah, sekarang kita jauh dipermudah dengan CSS 3.

Syntax untuk shadow di CSS 3 adalah:

box-shadow: none | <shadow> [ , <shadow> ]*
/* dimana: */
<shadow> = inset? && [ <length>{2,4} && <color>? ]

Contohnya adalah sebagai berikut

box-shadow: 1px 3px 2px gray;

maka artinya adalah shadow dimana:

  • 1px merupakan nilai pertama berupa horizontal offset selebar 2 pixel, bila nilainya positif maka shadow akan berkembang (meluas) ke luar (ke arah kanan), bila negatif maka meluas ke dalam (ke arah kiri)
  • 3px merupakan nilai pertama berupa vertical offset selebar 2 pixel, bila nilainya positif maka shadow akan berkembang (meluas) ke luar (ke arah bawah), bila negatif maka meluas ke dalam (ke arah atas)
  • 2px merupakan nilai ketiga berupa jarak kekaburan (blur) warna sejauh 2 pixel, semakin besar maka akan semakin kabur sebaliknya semakin kecil maka semakin tegas warnanya.
  • gray merupakan nilai keempat berupa warna shadow, warna bisa terserah baik dalam format hexadecimal, RGB, atau CSS 3 RGBA (RGB dengan tingkat alpha transparency).

Nilai kelima (opsional) berupa letak shadow, di dalam (inner) box atau di luar (outer) box. Bila tidak dispesifikasikan maka defaultnya adalah di luar box, untuk membuat inner shadow, tambahkan syntax inset.

Bila di-render di web browser maka akan tampak seperti berikut:

test-shadow

Kita dapat melihat dengan style di atas, maka vertical offfset akan lebih lebar sehingga shadow bawah terlihat lebih lebar dibanding horizontal offset (shadow kanan).

Beberapa style shadow yang berbeda akan dapat membuat style shadow yang berbeda pula. Berikut ini adalah style dengan effect yang berbeda, penggunaan istilah akan saya sesuaikan dengan shadow di Photoshop.

Membuat Drop/Outer shadow

Untuk membuat drop shadow perhatikan horizontal dan vertical offset, di sini nilainya .

-webkit-box-shadow: 2px 2px 4px rgba(0,0,0,.5);
-moz-box-shadow: 2px 2px 4px rgba(0,0,0,.5);
box-shadow: 2px 2px 4px rgba(0,0,0,.5);

supaya terlihat seperti outer glow (terserah warna yang digunakan):

-webkit-box-shadow: 0px 0px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0px 0px 6px rgba(0,0,0,.5);
box-shadow: 0px 0px 6px rgba(0,0,0,.5);

Membuat Inner shadow

-webkit-box-shadow: 2px 2px 4px rgba(0,0,0,.5) inset;
-moz-box-shadow: 2px 2px 4px rgba(0,0,0,.5) inset;
box-shadow: 2px 2px 4px rgba(0,0,0,.5) inset;

supaya terlihat seperti inner glow:

-webkit-box-shadow: 0px 0px 6px rgba(0,0,0,.5) inset;
-moz-box-shadow: 0px 0px 6px rgba(0,0,0,.5) inset;
box-shadow: 0px 0px 6px rgba(0,0,0,.5) inset;

Bila di-render maka akan tampil seperti shadow di bawah ini:

Pada contoh terakhir kita dapat membuat beberapa shadow layer. Di sini saya membuat 2 layer, outer shadow dan inner shadow. Kita bisa membuat berapa banyak layer sekalipun dengan warna yang berbeda. Untuk membuat beberapa layer maka cukup setelah shadow pertama, tambahkan koma “,” dan shadow kedua, dst. Contohnya:

box-shadow: 0px 0px 6px rgba(0,0,0,.5),
            2px 2px 4px rgba(0,0,0,.5) inset;

Kompatibilitas Browser

Pada beberapa browser yang berbeda dan versi yang berbeda, biasanya akan terjadi masalah kompatibilitas browser. Kalau tidak mengecek maka tampilan di browser A dapat berbeda di browser B. Untuk shadow yang merupakan tambahan di CSS 3, maka untuk browser yang tidak support CSS 3 maka tidak bisa ditampilkan, tetapi biasanya ada vendor specific property.

Vendor specific property merupakan property yang tidak sesuai spesifikasi standar CSS dan tergantung dari browser tertentu. Untuk Mozilla Firefox biasanya diawali -moz-, Safari diawali -webkit-, Opera diawali -o-,  Internet Explorer diawali -ms-.

Untuk shadow ini, pada Firefox 3 gunakan -moz-box-shadow, untuk Safari gunakan -webkit-box-shadow. Untuk dukungan pada browser dengan versi berbeda tuliskan:

-webkit-box-shadow: 2px 2px 4px rgba(0,0,0,.5);
-moz-box-shadow: 2px 2px 4px rgba(0,0,0,.5);
box-shadow: 2px 2px 4px rgba(0,0,0,.5);

dimana vendor specific property dituliskan di atas sebelum property standar CSS.

Demo

Untuk demo lebih lengkap silakan klik tombol di bawah ini.

View Demo Download Demo




Speak Up!

Leave your own comment

KESALAHAN: plugin si-captcha.php mengatakan bahwa dukungan GD image tidak terdeteksi di PHP!

Hubungi hosting situs anda dan tanyakan mereka mengapa dukungan GD image tidak diaktifkan untuk PHP.

KESALAHAN: plugin si-captcha.php mengatakan bahwa fungsi imagepng tidak terdeteksi di PHP!

Hubungai hosting situs Anda dan tanyakan mereka mengapa fungsi imagepng tidak diaktifkan di PHP.

Notify me of follow-up comments via e-mail (or subscribe here).




 

Share

Subscribe Feed

Email

Facebook

Twitter

Delicious

Digg

StumbleUpon

Google Buzz

Deviantart



Warning: Use of undefined constant scripts - assumed 'scripts' (this will throw an Error in a future version of PHP) in /home/hikaruyu/public_html/wp-content/themes/hikaruyuuki/library/functions/scripts.php on line 50