Box-shadow yang berarti bayangan box ini adalah properti baru dalam css3 (Cascading Style Sheets) level 3. Pada artikel ini saya akan menjelaskan sedikit tentang box-shadow dan juga propertinya yang mudah-mudahan dapat di cerna oleh sahabat blogger semua. Di dalam pembuatan box-shadow kita bisa menerapkan rgba untuk warna atau hanya warna css dasar saja di sini saya akan menjelaskan yang simple saja tanpa rgba,itu di pembahasan selanjutnya nah..berikut adalah sintaks dan properti yang ada di box-shadow:
seperti yang sobat perhatikan value pertama 10px tidak minus maka bayangan akan ke kanan sedangkan pada kotak yang di berikan minus akan berbeda bayangannya coba perhatikan kotak berikutnya
Nah...kalau yang ini saya berikan minus valuenya agar bayangan menjadi ke kiri, pokonya ikutin warkop DKI kanan kiri oke!!!hehehehehe
h-offset: yang di mana value pertama contoh: box-shadow: 10px 0 0 #000; 10px yang berwarna merah adalah dapat memberikan bayangan ke kiri dan ke kanan, apabila kita memberikan nilai positif maka bayangan akan ke kanan tetapi sebaliknya apabila kita memberikan nilai negatif maka bayangan akan ke kiri lihat perbedaan dua contoh di bawah:
waduh!! jadi ngomong dalam kotak nih bang hendro,hehehe, nah!! sekarang liat tuh saya memberikan nilai value minus(-10px) di value kedua maka hasil bayangannya akan keatas kalu di liat seperti pakai topi nih kotak, Lanjut!!!
okeh..sudah terlihat kan bedanya? mana yang atas mana yang bawah? enakan yang mana nih!! atas apa bawah?
Kalau yang ini tidak ada nilai minus karena ini value terakhir yang akan memberikan bayangan blur di sini saya akan memberikan contoh warna yang berbeda agar terlihat blurnya silahkan di perhatikan
coba di perhatikan kotak ini mempunyai blur yang di berikan 40px, di sini sobat tidak bisa memberikan nilai minus karena insetlah yang akan berperan, okeh mari kita lanjut ke inset
Yang di maksud dengan fungsi inset dalam box-shadow css3 adalah memberikan bayangan di dalam, kalu yang tadi kita bahas adalah bagaimana memberikan bayangan di luar kotak, nah.. dengan menambahkan perintah inset kita bisa memberikannya di dalam kotak, untuk lebih jelasnya silahkan lihat kotak di bawah yang sudah di berikan inset:
Antara gelap dan terang atau habis gelap terbitlah terang, coba di perhatikan bayangan dalam kotak ini berada di dalam hanya dengan menambah perintah inset, dan warna juga bisa di sesuaikan
Ini yang menjadi pertannyaan karena box-shadow hanya terlihat bayangan kotak tapi tenang saya akan memberikan sebuah soal agar sobat bisa berkreasi saya hanya memasukan background url jadi tidak perlu memasukannya dalam div html tetapi cukup di css contoh:
Nah.. kode di atas sobat bisa masukan langsung ke dalam postingan sobat, dan jangan lupa tentukan gambarnya, di sana saya tidak memberikan nilai valuenya hanya di blur yaitu 100px untuk value yang lain sobat tinggal menentukannya dan untuk hover.Kalau sobat mencoba cara membuat box-shadow saya yakin pasti ketagihan dan semakin penasaran dengan CSS3,,oke.. untuk sekedar latihan, atau sobat bisa berkreasi sendiri?? ITU LEBIH BAIK...
- CONTOH GAMBAR YANG DI BERIKAN BOX-SHADOW
- CONTOH box-shadow DENGAN fungsi HOVER
- CONTOH GAMBAR DENGAN INSET
- CONTOH GAMBAR DENGAN INSET DAN HOVER
Siip!!! pake telor sama sambel saus, akhirnya beres untuk hasil dan penilaian tergantung dari sang pembaca,, mohon saran dan kritiknya apabila ada kesalahan dalam artikel box-shadow css3 ini, akhir kata selamat mencoba, semoga berguna, semoga bermanfaat, kreasikan ilmu yang ada dan salam tiga jari!!!!
Sumber: ut2a-down
-moz-box-shadow: 10px 0 0 #000;-webkit-box-shadow: 10px 0 0 #000;box-shadow: 10px 0 0 #000;
seperti yang sobat perhatikan value pertama 10px tidak minus maka bayangan akan ke kanan sedangkan pada kotak yang di berikan minus akan berbeda bayangannya coba perhatikan kotak berikutnya
-moz-box-shadow:-10px 0 0 #000;-webkit-box-shadow:-10px 0 0 #000;box-shadow:-10px 0 0 #000;
Nah...kalau yang ini saya berikan minus valuenya agar bayangan menjadi ke kiri, pokonya ikutin warkop DKI kanan kiri oke!!!hehehehehe
h-offset CSS3 box-shadow
h-offset: yang di mana value pertama contoh: box-shadow: 10px 0 0 #000; 10px yang berwarna merah adalah dapat memberikan bayangan ke kiri dan ke kanan, apabila kita memberikan nilai positif maka bayangan akan ke kanan tetapi sebaliknya apabila kita memberikan nilai negatif maka bayangan akan ke kiri lihat perbedaan dua contoh di bawah:
-moz-box-shadow: 0 -10px 0 #000;-webkit-box-shadow: 0 -10px 0 #000;box-shadow: 0 -10px 0 #000;
waduh!! jadi ngomong dalam kotak nih bang hendro,hehehe, nah!! sekarang liat tuh saya memberikan nilai value minus(-10px) di value kedua maka hasil bayangannya akan keatas kalu di liat seperti pakai topi nih kotak, Lanjut!!!
-moz-box-shadow: 0 10px 0 #000;-webkit-box-shadow: 0 10px 0 #000;box-shadow: 0 10px 0 #000;
okeh..sudah terlihat kan bedanya? mana yang atas mana yang bawah? enakan yang mana nih!! atas apa bawah?
BLUR CSS3 box-shadow
Kalau yang ini tidak ada nilai minus karena ini value terakhir yang akan memberikan bayangan blur di sini saya akan memberikan contoh warna yang berbeda agar terlihat blurnya silahkan di perhatikan
-moz-box-shadow: 0 0 40px #F51137;-webkit-box-shadow: 0 0 40px #F51137;box-shadow: 0 0 40px #F51137;
coba di perhatikan kotak ini mempunyai blur yang di berikan 40px, di sini sobat tidak bisa memberikan nilai minus karena insetlah yang akan berperan, okeh mari kita lanjut ke inset
INSET css3 BOX-shadow
Yang di maksud dengan fungsi inset dalam box-shadow css3 adalah memberikan bayangan di dalam, kalu yang tadi kita bahas adalah bagaimana memberikan bayangan di luar kotak, nah.. dengan menambahkan perintah inset kita bisa memberikannya di dalam kotak, untuk lebih jelasnya silahkan lihat kotak di bawah yang sudah di berikan inset:
-moz-box-shadow:inset 6px 10px 50px #000;-webkit-box-shadow:inset 6px 10px 50px #000;box-shadow:inset 6px 10px 50px #000;
Antara gelap dan terang atau habis gelap terbitlah terang, coba di perhatikan bayangan dalam kotak ini berada di dalam hanya dengan menambah perintah inset, dan warna juga bisa di sesuaikan
BISAKAH GAMBAR DI BERIKAN box-shadow?
Ini yang menjadi pertannyaan karena box-shadow hanya terlihat bayangan kotak tapi tenang saya akan memberikan sebuah soal agar sobat bisa berkreasi saya hanya memasukan background url jadi tidak perlu memasukannya dalam div html tetapi cukup di css contoh:
<style type="text/css">
#box-bayangan{background:url(DI SINI ADALAH URL GAMBAR YANG INGIN SOBAT BERIKAN);margin:0 auto;padding:10px;width:280px;height:200px;-moz-box-shadow: 0 0 100px #000;-webkit-box-shadow:0 0 100px #000;}
</style>
<div id="box-bayangan">
</div>
Nah.. kode di atas sobat bisa masukan langsung ke dalam postingan sobat, dan jangan lupa tentukan gambarnya, di sana saya tidak memberikan nilai valuenya hanya di blur yaitu 100px untuk value yang lain sobat tinggal menentukannya dan untuk hover.Kalau sobat mencoba cara membuat box-shadow saya yakin pasti ketagihan dan semakin penasaran dengan CSS3,,oke.. untuk sekedar latihan, atau sobat bisa berkreasi sendiri?? ITU LEBIH BAIK...
- CONTOH GAMBAR YANG DI BERIKAN BOX-SHADOW
- CONTOH box-shadow DENGAN fungsi HOVER
- CONTOH GAMBAR DENGAN INSET
- CONTOH GAMBAR DENGAN INSET DAN HOVER
Siip!!! pake telor sama sambel saus, akhirnya beres untuk hasil dan penilaian tergantung dari sang pembaca,, mohon saran dan kritiknya apabila ada kesalahan dalam artikel box-shadow css3 ini, akhir kata selamat mencoba, semoga berguna, semoga bermanfaat, kreasikan ilmu yang ada dan salam tiga jari!!!!
Sumber: ut2a-down
