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.
plain box-shadow
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 🙂

Baca Juga:  Membuat CSS Image Gallery Tanpa Javascript

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 🙂

Komentar

comments

Ariona Rian

Penikmat proses webdesign, karena aktifitas desain web memanfaatkan kedua belah otak. Selain proses desain proses Coding juga sangat menyenangkan dan bermanfaat untuk mengasah logika.

grain storage instagram türk takipçi satın al