• Twitter
  • Facebook
  • Google+
  • Instagram
  • Youtube

Thursday, November 15, 2012

Daftar Lengkap Kode CSS Shadow atau bayangan


            Efek Shadow merupakan sebuah efek tampilan suatu objek yang memiliki bayangan di belakang objek tersebut.  dengan menambahkan efek ini di blog anda, mungkin bisa membuat tampilan blog anda lebih terlihat indah dan semarak. Membuat shadow effect ini, dibuat dengan menggunakan kode CSS. Oleh karena itu, Yang perlu anda pahami dalam membuat efek bayangan ini adalah beberapa kode CSS.

            Pada intinya, kode CSS untuk efek shadow sederhana sekali. Ada tiga property CSS yang digunakan dalam membuat Efek bayangan ini, yaitu :
-webkit-box-shadow: 5px 5px 10px #FF0000;          ( untuk browser safari)
-moz-box-shadow :5px 5px 10px #FF0000;              (untuk browser mozilla)
box-shadow: 5px 5px 10px #FF0000;

keterangannya, pada nilai 5px pertama itu adalah ukuran offset sumbu-X, 5px kedua ukuran offset sumbu-Y, dan 10px untuk mengatur tingkat blur shadow. Secara default, kode diatas membuat efek shadow diluar objek. tapi Anda juga bisa menambahkan value “inset” untuk membuat efek bayangan didalam objek.
-webkit-box-shadow: inset 10px 5px 7px #FF0000;
-moz-box-shadow:inset 10px 5px 7px #FF0000;
box-shadow:inset 10px 5px 7px #FF0000;

ketiga properti tersebut digunakan karena tidak semua orang menggunakan browser yang sama. Hal itu bermaksud agar tampilan nya di setiap browser akan tetap sama. Nah, dibawah ini adalah beberapa macam Tampilan Shadow beserta kode-kode CSS nya yang mungkin bisa anda terapkan di blog anda untuk mempercantik blog anda.


-webkit-box-shadow: 10px 5px 7px #FF0000;
-moz-box-shadow: 10px 5px 7px #FF0000;
box-shadow: 10px 5px 7px #FF0000;




-webkit-box-shadow: 10px 0 7px #FF0000;
-moz-box-shadow: 10px 0 7px #FF0000;
box-shadow: 10px 0 7px #FF0000;




-webkit-box-shadow: 0 0 7px #FF0000;
-moz-box-shadow: 0 0 7px #FF0000;
box-shadow: 0 0 7px #FF0000;




-webkit-box-shadow: 0 0 20px #FF0000;
-moz-box-shadow: 0 0 20px #FF0000;
box-shadow: 0 0 20px #FF0000;




-webkit-box-shadow: 10px 5px 0 #FF0000;
-moz-box-shadow: 10px 5px 0 #FF0000;
box-shadow: 10px 5px 0 #FF0000;




-webkit-box-shadow: -10px -5px 0 #FF0000;
-moz-box-shadow: -10px -5px 0 #FF0000;
box-shadow: -10px -5px 0 #FF0000;



-webkit-box-shadow: inset 10px 5px 7px #FF0000;
-moz-box-shadow: inset 10px 5px 7px #FF0000;
box-shadow: inset 10px 5px 7px #FF0000;





-webkit-box-shadow: inset 0 10px 7px #FF0000;
-moz-box-shadow: inset 0 10px 7px #FF0000;
box-shadow: inset 0 10px 7px #FF0000;


-webkit-box-shadow: inset 10px 0 7px #FF0000;
-moz-box-shadow: inset 10px 0 7px #FF0000;
box-shadow: inset 10px 0 7px #FF0000;




-webkit-box-shadow: inset 0 0 20px #FF0000;
-moz-box-shadow: inset 0 0 20px #FF0000; 
box-shadow: inset 0 0 20px #FF0000;



-webkit-box-shadow: inset 10px 5px 0 #FF0000;
-moz-box-shadow: inset 10px 5px 0 #FF0000;
box-shadow: inset 10px 5px 0 #FF0000;




-webkit-box-shadow: inset -10px -5px 0 #FF0000;
-moz-box-shadow: inset -10px -5px 0 #FF0000;
box-shadow: inset -10px -5px 0 #FF0000;


Selamat Mencoba !!!
#salam terhangat dari Mr.DHI


Tulisan ini terinspirasi dari : http://azzam10.blogspot.com/2012/08/membuat-efek-bayangan-shadow-dengan-css.html

18 comments:

  1. Pagi sobat..
    Waw nice post..
    Yang post sebelum nya juga bagus tapi ini lebih baik dari yang lalu..:)
    terus berkarya ya..
    Haha..:D
    oh ya mampir juga ya ke my blog..:)

    ReplyDelete
  2. This comment has been removed by a blog administrator.

    ReplyDelete
    Replies
    1. sory kawan, komentar mu melanggar privacy policy blog ini. anda dengan sengaja menaruh live link di komentar.

      Delete
  3. wah setiap browser beda kode yah, klo di chrome jalan ga bayanganya ??

    ReplyDelete
    Replies
    1. coba ajah gan, saya nggak pake chrome soalnya.

      Delete
  4. keren sobat...? bisa buat nambah cantik tampilan blog kita nih...

    ReplyDelete
    Replies
    1. iya bang, bisa langsung diterapin ke blog abang.

      Delete
  5. Tutorialx sngat bermanfaat gan.boleh dicoba nih.

    ReplyDelete
  6. bagusan yang 3 dari bawah mas :D

    ReplyDelete
  7. wah safari dan mozila beda karakternya ternyata toh?

    ReplyDelete
  8. mantaap.. dapat ilmu baru lagi nih

    ReplyDelete
  9. wah ini yg ane cari-cari..:)

    ReplyDelete
  10. Wah kalau soal css begini saya belum paham gunanya untuk apa gan..

    ReplyDelete
    Replies
    1. ini untuk memberi style pada blog kita gan, jadinya blog bisa lebih cantik dengan CSS

      Delete
  11. wah saya cpba deh semoga saja berhasil dengan baik ya sesuai dengan shadow yang saya inginkan..

    salam kenal dari admin http://www.acemaxspusat.com

    ReplyDelete
  12. wih, ini termasuk CSS 3 kan ?

    keren dah efeknya....

    ReplyDelete
  13. Mantep nih prof. Masuk hlaman 1 pula, saluut deh.

    By
    irfan irn

    ReplyDelete

Anda diwajibkan membaca Privacy Policy terlebih dahulu sebelum berkomentar.

Contact

Get in touch with me


Adress/Street

12 Street West Victoria 1234 Australia

Phone number

+(12) 3456 789

Website

www.johnsmith.com