Dev Book | CSS Shadow - Membuat Bayangan Dengan CSS

---

CSS Shadow - Membuat Bayangan Dengan CSS Posted: 10 Jun 2010 07:18 AM PDT Pada postingan sebelumnya saya sudah membahas bagaimana cara membuat efek gradasi menggunakan CSS. Pada postingan kali ini saya akan membahas bagaimana cara membuat efek bayangan menggunakan CSS seperti pada gambar di samping ini, hanya saja gambar di samping ini sengaja saya convert ke jpg supaya teman-teman yang masih menggunakan browser versi lama tetap bisa melihat contohnya. Sama seperti postingan sebelumnya, efek ini hanya akan berjalan di browser-browser versi terbaru, untuk mozilla firefox effect ini hanya berjalan di versi 3.6 keatas. CSS shadow adalah salah satu cara termudah untuk membuat effect bayangan untuk sebuat objek tertentu. Pada postingan kali ini saya akan mencoba membuat efek bayangan pada text dan objek dengan perintah CSS yang tidak jauh berbeda. BOX SHADOW 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: .shadow { 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: .inner-shadow { 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: 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: .textshadow { 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: .inner-textshadow { text-shadow: inset 0 5px 7px #222; -moz-text-shadow: inset 0 5px 7px #222; -webkit-text-shadow: inset 0 5px 7px #222; } Mudah-mudahan postingan kali ini bisa bermanfaat buat teman-teman semua. Seperti biasanya, selamat mencoba :)

You are subscribed to email updates from DevBook.net To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610