Buat Box Shadow dengan CSS3
Thanks buat bang Hendro yang sudah memberikan tambahan untuk pengaplikasian CSS3 ini. dan sekarang saya coba mengaplikasikan CSS3 ini dengan membuat BOX SHADOW atau Kotak dengan tambahan bayangan menggunakan CSS3.
Beberapa sample Box Shadow bisa dilihat di bawah ini:
-moz-box-shadow: 1px 1px 10px #888;
-webkit-box-shadow:1px 1px 10px #888;
-webkit-box-shadow:1px 1px 10px #888;
-moz-box-shadow: 0px 20px 10px -10px #888;
-webkit-box-shadow:1px 1px 10px #888;
-webkit-box-shadow:1px 1px 10px #888;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow:1px 1px 10px #888;
-webkit-box-shadow:1px 1px 10px #888;
-moz-box-shadow: inset 1px 1px 10px #888;
-webkit-box-shadow:1px 1px 10px #888;
-webkit-box-shadow:1px 1px 10px #888;
Box Shadow di atas hanya beberapa saja mungkin untuk lebih berfariasi model,warna,tebal tipis bayangan-nya "Shadow" bisa di custom sesuai selera masing masing.
Box shadow ini bisa digunakan untuk membuat Teks area atau juga bisa dipasang pada background tamplate Blogger dll. Selamat mencoba.
Komentar
Insetnya masih kurang Um ya .......!!!
Belantara Indonesia :: Di sesuaikan saja Brader , gimana bagusnya untuk background template juga keren
-moz-box-shadow: inset 1px 1px 10px #888;
-webkit-box-shadow:1px 1px 10px #888;
Kalu begitu kodenya nanti di chrome tidak terlihat insetnya, solusinya hanya menambahkan inset saja di webkit..
-moz-box-shadow:inset 1px 1px 10px #888;
-webkit-box-shadow: inset 1px 1px 10px #888;
Nah..kalu begitu di moz sama webkitnya terlihat deh, hehehe
bener ga sob?
Chikarei :: Kalau ingin memasang pada bagian background utama tamplate tinggal di copy code di atas di bawah code outer-wraper { tinggal di sesuaikan saja.
Trimakasih
aku tambah nie.. klo baynagan orange pake
* -moz-box-shadow:5px 5px 5px #A84F19;
* -webkit-box-shadow:5px 5px 5px #A84F19;
* box-shadow:5px 5px 5px #A84F19;
mrah doank pake
* -moz-box-shadow:5px 5px 5px #A80019;
* -webkit-box-shadow:5px 5px 5px #A80019;
* box-shadow:5px 5px 5px #A80019;
Hijau pake
* -moz-box-shadow:5px 5px 5px #008519;
* -webkit-box-shadow:5px 5px 5px #008519;
* box-shadow:5px 5px 5px #008519;
Biru
* -moz-box-shadow:5px 5px 5px #000099;
* -webkit-box-shadow:5px 5px 5px #000099;
* box-shadow:5px 5px 5px #000099;
yang warna lain aku gak suka jadi cari sendiri hhe...
Sebelumnya maaf aku baru bisa berkunjung Sob.. biasa masih Offline wkwkw.... Semangat n happy blogging..
Ok buat tambahannya. Semngat selalu.
Bookmark dulu sahabat.
disana emang manteb2 (pake B, yah) tutornya tapi sayang saya beLum mudeng sama CSS, termasuk tutor yg ini. sementara waktu masih ngikutin keLas vaLidasi htmL, itu juga beLum LuLus2. hihihi...
harap makLum aja yah.
maaf nie seperti biasa aku telat hhe..... wah masih BOx Shadow nie.. semangat Sob.... happy blogging n met akhir pekan..
trims atas ilmunya, sukses selalu n tetap semangat
Sukses Slalu!
<div style="-moz-box-shadow: 1px 1px 10px rgb(136, 136, 136); background: none repeat scroll 0% 0% rgb(243, 243, 243); padding: 10px; text-align: center;">
<b>-moz-box-shadow: 1px 1px 10px #888;
-webkit-box-shadow:1px 1px 10px #888;</b></div>
Kalu memanggil dengan html css3 itu tidak bisa yang webkit, jadi harus di panggil dengan css, juga harus di tentukan idnya kalu id berawal sintaks #(pagar) kalu class Dot(titik) sekarang saya akan panggil lewat css biar browser bisa lihat semua>
<style type="text/css">
#chugy{-webkit-box-shadow:1px 1px 10px #888;-moz-box-shadow: 1px 1px 10px rgb(136, 136, 136); background: none repeat scroll 0% 0% rgb(243, 243, 243); padding: 10px; text-align: center;}
</style>
<div id="chugy">
-moz-box-shadow: 1px 1px 10px #888;
-webkit-box-shadow:1px 1px 10px #888;</div>
Silahkan coba seperti itu, hasilnya bagus dan bisa di lihat di browser moderen, seperti chrome, safari.
di ganti warna biasa saja,,saya lupa beritahu itu.
www.asialive88.com