Mau tau cara buat yang seperti ini, silahkan klik disini

widget by Kianhome
KianHome - BOX SHADOW atau efek kotak berbayang adalah salah satu daya tarik dalam design blog atau web, biasanya banyak para designer yang menggunakan gambar untuk membuat efek shadow itu sendiri. Namun dengan pola kode CSS3 kita bisa memodifikasi semua itu dengan sangat baik.

Untuk itulah, postingan kali ini k'ian buat guna menanggapi pertanyaan dari sobat BryZONE "k, bleh tanya? gmna cara membuat border punya efek shadow kyak di blog ini??
blog saya : BryZONE"..berikut Toturialnya..

Box shadow dibagi menjadi 2 jenis yaitu offset shadow dan inner shadow, untuk membuat offset shadow kita bisa membuat kode CSS seperti di bawah ini:
box-shadow: 5px 5px 7px #222;
-moz-box-shadow: 5px 5px 7px #222;
-webkit-box-shadow: 5px 5px 7px #222;
Keterangan:
  • 5px adalah ukuran x-offset
  • 5px adalah ukuran y-offset
  • 7px Tingkat blur shadow
  • #222 adalah warna bayangan
Contoh hasil bayangan ini bisa dilihat di gambar awal postingan ini.

Sedangkan untuk membuat inner shadow kita tinggal menambahkan kode inset seperti di bawah ini:
box-shadow: inset 0 5px 7px #222;
-moz-box-shadow: inset 0 5px 7px #222;
-webkit-box-shadow: inset 0 5px 7px #222;
Keterangan:
  • 0 adalah ukuran x-inset
  • 5px adalah ukuran y-inset
  • 7px Tingkat blur shadow
  • #222 adalah warna bayangan
Contoh hasil CSS inner shadow bisa dilihat di bawah ini:

Penerapan:
Mungkin inilah proses yang paling sulit, dimana banyak blogger yang mengalami kendala dalam memasang kode tersebut. Padahal cara memasangnya sendiri cukup mudah dengan cara menambahkan salah satu kode diatas kedalam kode yang sudah ada diblog kamu. misal, jika kita ingin menambahkan pada kode "Wrapper", cukup copy kode yang tadi dan pastekan didalam kode wrapper yang sudah ada..contoh :
#wrapper{border:2px solid #a4a4a4;
box-shadow: 1px 1px 30px #000;
-moz-box-shadow: 1px 1px 30px #000;
-webkit-box-shadow:1px 1px 30px #000;
background:#fff;
height:100%;
margin:auto;
padding:5px;
width:1000px
}
TEXT SHADOW
Cara menggunakan dan sistem kerja text shadow sebenarnya tidak berbeda dengan box shadow, perbedaannya kita tinggal merubah tulisan box-shadow menjadi text-shadow. Berikut ini contohnya:


KianHome
text-shadow: 5px 5px 7px #222;
-moz-text-shadow: 5px 5px 7px #222;
-webkit-text-shadow: 5px 5px 7px #222;
dan untuk inner text shadow menjadi seperti ini:
text-shadow: inset 0 5px 7px #222;
-moz-text-shadow: inset 0 5px 7px #222;
-webkit-text-shadow: inset 0 5px 7px #222;
KianHome

Cara penerapan sama dengan BOX SHADOW

Share to :

Related Post :


About the Author :

K'ian is a designer, web tutorial design, and blogging enthusiasts. Tutorial blog debut the first time when entering college, when I get to know the world wide internet and so much more. Now I work at one of the state trading company, a job that would conflict with the world of blogging and web design. Today remains a serious manage blog " Kolam Blogging Tips | Kianhome ".

1 Response to "Mengenal kode Box Shadow dengan CSS3"

  1. Bry_XP Said,

    css3 yah,.hehe
    btw thx atas tutorialnya,.lengkap,.
    kpan2 sy bleh nanya2 lgi yah,.?!
    thx
    GBU ...Replay

     

Post a Comment

Blog ini menganut sistem "Dofollow", Silahkan Tinggal komentar, saran, kritik disini.. apapun itu jangan SPAM ok..


Berita Terkini

Friend Follower's

Tips Health

Techno

Hot Nasional

Celebrity

My Blog List

Recent Comment

© Copyright 2011 | Dikelola sepenuhnya oleh : Kiancoi
KianHome Member of PlanetBlog | SitusBersih | Support on Mozilla Firefox and Google Crome Browser
Home | Posts RSS | Comments RSS | Sexy Blog |