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:
1
2
3
| -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″.
1
2
3
4
| <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
1
2
3
4
5
6
7
8
9
10
11
12
13
| .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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| .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 .
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| .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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| .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 :
1
2
3
4
5
6
| .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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| .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
0 Komentar