Advertise

Buat Box Shadow dengan CSS3

Melanjutkan postingan seputar CSS3 yang di aplikasikan pada Teks Stroke, walaupun hanya sekelumit membahasnya karena memang saya juga masih belum begitu mendalami tentang CSS3. Dan kebetulan kemaren Bang Hendro komentat tentang Teks stroke ini yang bisa dimplementasikan dengan box Shadow.

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;


-moz-box-shadow: 0px 20px 10px -10px #888;
-webkit-box-shadow:1px 1px 10px #888;


-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow:1px 1px 10px #888;


-moz-box-shadow: inset 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.

35 komentar:

  1. yang terakhir kurang inset di webkit, bikin box-shadownya keren sob, seperti hidup bayangannya.

    BalasHapus
  2. wah bingung mau coba dimana ya brad?....di menu horizontal kali ya...

    BalasHapus
  3. Hendro Prayitno :: Kan belajar dari Bang Hendro, semenjak kenal bang hendro jadi naksir ni dengan CSS3 ini hehehehe....
    Insetnya masih kurang Um ya .......!!!

    Belantara Indonesia :: Di sesuaikan saja Brader , gimana bagusnya untuk background template juga keren

    BalasHapus
  4. bukan insetnya yang kurang, tapi sintaks insetnya yang tidak di berikan hanya diberikan di:
    -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?

    BalasHapus
  5. Blogger Admin :: Okelah kalau begitu. Thanks bt tambahannya UM.

    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

    BalasHapus
  6. Wah mantabz Sob.. jadi suka CSS3 juga si Bozz hhe..

    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..

    BalasHapus
  7. Ferdinan :: Ia ni ketularan sama bang Hendro heheheheh....
    Ok buat tambahannya. Semngat selalu.

    BalasHapus
  8. wew keren. tar aku pikir dulu mau dipasang dimana. harus rubah warna juga neh kayaknya, template ku kan bekgronnya item

    BalasHapus
  9. Keren bayangannya yang dibentuk,menambah satu ilmu CSS nich.Kalau untuk border header bisa nggak ya?..
    Bookmark dulu sahabat.

    BalasHapus
  10. wah keren nih sob, mungkin akan saya coba saya terapkan di blogquote

    BalasHapus
  11. Lagi pada kuLiah di bLognya Om Hendro yah Om, saya juga sering dibawain oLeh2 sama beLiau.
    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.

    BalasHapus
  12. tutor dah brad..buat font sidebar kayak punya sini...bagus itu.....tak tunggu lah brader baik..hehehheehe

    BalasHapus
  13. akhirnya ku buat bagus random post sama link exchange di sidebar....mau pake buat kolom artikel terkait bingung caranya aku brad....asemm

    BalasHapus
  14. jujur saya kurang memahami css, walau sebenarnya kepingin praktek juga... :D terimakasih mas, semoga sukses selalu.

    BalasHapus
  15. Wah pago ini dah dapat ilmu baru y bermanfaat nih.. makasih sob

    BalasHapus
  16. Mampir disela rutinitas nih sob.. hehe sekalian tak follow blognya ya

    BalasHapus
  17. Halah salah urlnya tuh bos.. yg bener yg ini

    BalasHapus
  18. Personally gue suka banget dengan CSS, mempercantik dan mempermudah load halaman blog...nice post

    BalasHapus
  19. aku bingung sob hehe, lebih rinci dong :)

    BalasHapus
  20. kayaknya ada yg brubah template ya brader?....kayak ga sama ma kmaren.....sibuk trus ni pasti utak atik....nah ati2 ya brad.biar aman...hueheuehue

    BalasHapus
  21. Met malem Brother... aku datang huaahhh....

    maaf nie seperti biasa aku telat hhe..... wah masih BOx Shadow nie.. semangat Sob.... happy blogging n met akhir pekan..

    BalasHapus
  22. nambah pengetahuan lagi datang kemari, nambah mantab lagi ilmunya, cuma sayang yaa sementara say belum bisa pakai sarana box ini.
    trims atas ilmunya, sukses selalu n tetap semangat

    BalasHapus
  23. wew semakin mantap dengan kolaborasi kode css yang menghasilkan sebuah karya menarik
    Sukses Slalu!

    BalasHapus
  24. bookmark dulu Om,masih belajar php dan kayak ginian. amatiran hehehe

    BalasHapus
  25. saya sudah menerapkan nih tips, silakan di cek di blog saya

    BalasHapus
  26. aku ngga ngertii CSS... :D hehhee help help

    BalasHapus
  27. Oh..iya aku baru tau kenapa ini tidak terlihat di chrome dan safari karena sobat memanggil css3nya dengan html.


    <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.

    BalasHapus
  28. Blogger Admin :: Betul sekali um saya memang menggunakan "div style, untuk codenya. Nanti akan saya revisi um sesuai intruksi di atas....Thanks buat tambahannya.

    BalasHapus
  29. coba di kreasiin rgb(136, 136, 136); dan background: none repeat scroll 0% 0%

    di ganti warna biasa saja,,saya lupa beritahu itu.

    BalasHapus
  30. ternyata d sini ada tutorial yg aku buthkan tuk dplajari

    BalasHapus
  31. ijin menyimak buat belajar... salam kenal Kang.. ^_^

    BalasHapus
  32. saya terkesan, saya harus mengatakan ini kepada anda.
    www.asialive88.com

    BalasHapus
  33. Sangat jarang saya menemukan sebuah blog yang informatif dan menghibur seperti ini.

    BalasHapus