CSS3 Box-Shadow Di bawah Kotak

CSS3 Box-Shadow Di bawah Kotak
Mengenal CSS Shadow tuh mudah sekali yang penting kalian paham dengan beberapa css atributnya. dengan box shadow kita bisa berkreasi banyak dan mengurangi penggunaan gambar/image. dengan ini mari kita belajar cara membuatnya semudah mungkin. yang perlu di perhatikan tentunya class dan id dan dengan tambahan properti agar hasilnya shadow terdapat di bawah kotak dengan 2 box shadow. dan tentunya peran pada css transform akan berperan penting.
perhatikan beberapa contoh berikut.
Sample 1
css yang di gunakan di bawah hanya focus pada satu id atau class tanpa peran dari atribut lainya.
HTML
<div id="box-1">
....................
</div>
berikut CSS yang di gunakan.
#box-1 {
    position: relative;
    width: 50%;
    background: #ddd;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 2em 1.5em;
    color: rgba(0,0,0,.8);
    text-shadow: 0 1px 0 #fff;
    line-height: 1.5;
    margin: 10px auto;
    text-align: center;
    -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.7);
    -moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.7);
    box-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}
Dan hasilnya akan seperti di bawah. namun bukan ini yang akan saya jelaskan kita belajar pada box shadow yang terdapat di bawah kotak lihat pada Sample 2
Box-Shadow Dengan CSS3

Shadow dengan css 1px 1px 3px,tanpa pesuedo elemen.

Sample 2
Penggunaan css peran pertama pada atribut :after dan :before . guna menduplikasi box menjadi 2 bagian.
HTML
<div id="box">
....................
</div>
CSS yang di gunakan seperti ini:
#box {
    position: relative;
    width: 60%;
    background: #ddd;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 2em 1.5em;
    color: rgba(0,0,0, .8);
    text-shadow: 0 1px 0 #fff;
    line-height: 1.5;
    margin: 60px auto;
}

#box:before, #box:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width: 300px;
    background: rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);
    -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

#box:after {
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 10px;
    left: auto;
}  
Hasil lihat box di bawah.
Box-Shadow Dengan CSS3

Shadow terdapat di bawah box dengan beberapa css psuedo.

Penjelasan :
PropertyAtributeKeterangan
#box:aftersaya gunakan Sebagai bayangan pada bagian kanan bawah,bisa juga pada bagian kiri.
#box :before saya gunakan Sebagai bayangan pada bagian kiri bawah,bisa juga pada bagian kanan.
transformrotate(3deg)tentukan ini untuk menampilkan shadow yang tampil hanya sudut bawah saja,dengan memutar box-shadow.
positionabsolutetentukan ini dengan absolute agar shadow bisa kita tampilkan.
z-index-1gunakan ini dengan nilai - agar shadow berada di belakang box.
Pada tabel di atas saya hanya menjelaskan sebagian saja. agar bisa memahaminya coba anda kerjakan sendiri lihat pada demo,dan utak-atik code-code css apa saja yang penting untuk di gunakan
DEMO

license by under 88 blogspot.com
Post By : denzdii

4 comments:

  1. kang, maaf ni boleh tanya? ini penerapan nya digunakan untuk apa? box untuk apa? maaf ya kang

    ReplyDelete
    Replies
    1. pada contoh kotak di atas ada shadow/bayangan yang berbeda dengan 2 shadow kanan kiri.. lihat perbedaanya pada kotak ke satu dengan ke dua.. atau lihat pada demonya...

      Delete
  2. om , ini bisa diterapkan untuk Elemen pada widget kan ??

    ReplyDelete
  3. Mas,pada saat online shadow di bawah box tidak muncul.gmana solusinya?

    ReplyDelete

Perhatian !! Komentar Pada Bulan September 2012 belum bisa di balas.
di karenakan semua admin sedang sibuk dengan urusan kulliahnya.
semoga setelah akhir bulan artikel dan komentar akan segera di update.


terima kasih atas perhatiannya sekali lagi kami minta maaf yang sebesar-besarnya.

 
loading...
Top