Bermain-main dengan CSS3 Box-shadow

Kali ini, kita akan bermain-main dengan property CSS3 box-shadow. bagi yang belum ngerti cara menggunakan property box-shadow, silahkan baca Posting Belajar CSS3 Dasar, Tutorial CSS3 oleh mas Zulsdesign disini. Secara singkat, property ini berfungsi untuk memberikan efek shadow pada suatu element. berikut ini adalah contoh sederhana penggunaan box shadow pada tutorial di atas:

-webkit-box-shadow: 0px 0px 10px #555555;
-moz-box-shadow:0px 0px 10px #555555;
box-shadow:0px 0px 10px #555555;

Hasilnya seperti di bawah ini.

Oke.. kalo cuman gitu sih gampang, Kalo Shadownya seperti screenshoot berikut? gimana hayoo?

atau lihat demo nya disini!
Demontrasi
Efek-efek itulah yang akan kita bahas kali ini. kita mulai dari 3..2..1..

Persiapan

Pertama-tama kita buat terlebih dahulu empat objek(element) yang akan kita tambahkan efek shadow, beri nama class “box” dan “type1″ s/d “type4″.

<div class="box type1">Blur</box>
<div class="box type2">Lengkung Kiri</box>
<div class="box type3">Lengkung Kanan-Kiri</box>
<div class="box type4">Lengkung Tengah</box>

selanjutnya kita beri style untuk box tersebut

.box{
    width: 456px;
    background:-webkit-gradient(linear,0 0,0 100%,from(#2e9aef),to(#1186e3));
    color:#0b5a97;
    font-size:20px;
    font-family:Calibri,'Segoe UI',Tahoma,Arial,Sans-serif;
    height:80px;
    line-height:70px;
    margin:0 auto 30px;
    position:relative;
    text-align:center;
    text-shadow:0 1px 1px rgba(255,255,255,.3);
}

Efek Blur

Efek pertama yang akan kita buat adalah efek blur. property box-shadow bisa digunakan beberapa kali (multiple shadow), jadi kalo kita menyusunnya mulai dari blur yang rendah ke yang tinggi, akan terciptalah efek blur.

.type1{
-webkit-box-shadow:0 0 2px #2e9aef,
                   0 0 4px #2e9aef,
                   0 0 6px #2e9aef,
                   0 0 8px #2e9aef;
-moz-box-shadow   :0 0 2px #2e9aef,
                   0 0 4px #2e9aef,
                   0 0 6px #2e9aef,
                   0 0 8px #2e9aef;
box-shadow        :0 0 2px #2e9aef,
                   0 0 4px #2e9aef,
                   0 0 6px #2e9aef,
                   0 0 8px #2e9aef;
}

Penulisan tidak harus seperti di atas (garis baru) . contoh di atas agar memperjelas bahwa kita punya 4 shadow dengan tingkat blur yang berurutan.

Efek Lengkung Kiri

Efek yang akan kita buat, tidak langsung pada elementnya melainkan pada selector Before/After (kurang paham? baca tutorial berikut Menambahkan Paper-Clip pada Elemen). triknya adalah dengan memutar selector before/after beberapa derajat .

.type2:before{
    bottom:5px;
    content:' ';
    height:50px;
    left:10px;
    width:40%;
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 5px 10px rgba(0,0,0,.5);
    -moz-box-shadow:0 5px 10px rgba(0,0,0,.5);
    box-shadow:0 5px 10px rgba(0,0,0,.5);
    -webkit-transform:rotate(-2deg);
    -moz-transform:rotate(-2deg);
    transform:rotate(-2deg);
}

Efek Lengkung Kiri-Kanan

Sudah mengerti cara buat Efek sebelumnya? yang satu ini pasti mudah, tinggal buat lagi satu shadow , sekarang pake selector :before dan :after .
pertama-tama, tinggal Copy style sebelumnya pada selector :before dan :after.

.type3:before, .type3:after{
    bottom:5px;
    content:' ';
    height:50px;
    left:10px;
    width:40%;
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 5px 10px rgba(0,0,0,.5);
    -moz-box-shadow:0 5px 10px rgba(0,0,0,.5);
    box-shadow:0 5px 10px rgba(0,0,0,.5);
    -webkit-transform:rotate(-2deg);
    -moz-transform:rotate(-2deg);
    transform:rotate(-2deg);
}

nah, untuk yang lengkungan sebelah kanan, tambahkan style berikut :

.type3:after{
    right:10px;
    -webkit-transform:rotate(2deg);
    -moz-transform:rotate(2deg);
    transform:rotate(2deg);
}

Efek Lengkung Tengah

Shadow yang terakhir adalah efek ilusi kertas yang melengkung ke atas. triknya simple, tinggal menggunakan properti border-radius:

.type4:after{
    width:80%;
    height:20px;
    -webkit-border-bottom-left-radius:50% 10px; /* Memberikan efek lengkung panjang
    -webkit-border-bottom-right-radius:50% 10px;
    -moz-border-radius-bottomleft:50% 10px; /* Memberikan efek lengkung panjang
    -moz-border-radius-bottomright:50% 10px;
    border-bottom-left-radius:50% 10px; /* Memberikan efek lengkung panjang
    border-bottom-right-radius:50% 10px;
    left:5%;
    bottom:0;
    z-index:-1;
    -webkit-box-shadow:0 5px 10px rgba(0,0,0,.5);
    -moz-box-shadow:0 5px 10px rgba(0,0,0,.5);
    box-shadow:0 5px 10px rgba(0,0,0,.5);
}

Kesimpulan

Property Box-shadow dapat memiliki lebih dari satu value (shadow), kita dapat menggunakannya untuk membuat efek-efek ilusi yang bagus seperti di atas. Untuk property CSS3 seperti, border-radius, Transform dan Text-shadow bisa anda pelajari posting yang saya sebutkan sebelumnya . sebagai inspirasi perhatikan contoh berikut

Belajarwebdesign.com

Yup, perhatikan footernya, ada efek shadow lengkungnya kan? tapi itu masih berupa Image

ariona.net

Sekalian ah, efek lengkung kiri di setiap posting

Tags

contoh paper,contoh website simple,contoh web simple,apa itu drop box,shadow,contoh web sederhana dengan css,membuat form menggunakan css,css3 box shadow,membuat content web dengan css,box shadow,css shadow afek melengkung,efek css menggunakan paper,belajar css3 lengkung,css 3 melengkung keluar,css box keren,cara menggunakan css3,lengkungan shadow css,contoh websait jadi dengan html,membuat efek kertas dengan css3,css shadow melengkung Tags: belajar css, box-shadow, css, css3, tutorial css