Jejak Menciptakan Efek Bevel dengan Modal Border dan Box Shadow Rabu, 07 September 2011
Tabel Konten Penerapan Level-Level Warna dan Bayangan pada Area Objek Kode CSS Efek Bevel Asimetris Efek Piramida Efek Bevel Cekung Membandingkan Hasil Tampilan Efek Bevel dengan Penerapan Level Warna dan dengan Penerapan Border Outset Efek Bevel dengan Level Warna Efek Bevel dengan Border Outset Ada satu cara praktis untuk menciptakan efek bevel dengan border, yaitu dengan cara menerapkan tipe border outset atau inset . Namun penerapan border tipe ini agaknya kurang layak untuk disebut sebagai efek bevel, terlebih lagi hasil tampilan tipe border ini tidak selalu menampilkan tingkatan level warna yang sama pada setiap jenis peramban.
Untuk menciptakan efek bevel yang lebih realistis, setidaknya kamu harus menerapkan lima level warna sekaligus, dengan sedikit penambahan CSS Box Shadow untuk memperindah hasil tampilannya. Di sini Saya menggunakan lima level warna seperti ini:
#ca94d1
#c261c0
#b76dc0
#964c9a
#742a6c
Penerapan Level-Level Warna dan Bayangan pada Area Pertama kita buat sebuah area sembarang seperti ini, kemudian tentukan dimensi lebar dan tingginya dalam CSS:
Objek <div id='box'></div>
Kode CSS #box {
width:100px;
height:100px;
}
Kemudian tambahkan deklarasi-deklarasi border dan warna latar belakang seperti ini:
#box {
width:100px;
height:100px;
background-color:#c261c0; /* Level 2 */
border-top:15px solid #ca94d1; /* Level 1 */
border-right:15px solid #964c9a; /* Level 3 */
border-bottom:15px solid #742a6c; /* Level 4 */
border-left:15px solid #b76dc0; /* Level 5 */
}
Sehingga hasilnya menjadi seperti ini:
Setelah itu tambahkan efek bayangan dengan warna hitam. Tingkatan blur hendaknya jangan dibuat terlalu besar, karena ini akan merusak statusnya sebagai “bevel” yang berarti “menipis ke luar”:
#box {
width:100px;
height:100px;
background-color:#c261c0; /* Level 2 */
border-top:15px solid #ca94d1; /* Level 1 */
border-right:15px solid #964c9a; /* Level 3 */
border-bottom:15px solid #742a6c; /* Level 4 */
border-left:15px solid #b76dc0; /* Level 5 */
-webkit-box-shadow:0 2px 4px #000;
-moz-box-shadow:0 2px 4px #000;
box-shadow:0 2px 4px #000;
}
Selesai!
Efek Bevel Asimetris Untuk membuat efek bevel dengan dimensi asimetris cukup dengan mengubah nilai ketebalan bordernya seperti ini:
#box {
width:40px ;
height:70px ;
background-color:#c261c0; /* Level 2 */
border-top:15px solid #ca94d1; /* Level 1 */
border-right:60px solid #964c9a; /* Level 3 */
border-bottom:30px solid #742a6c; /* Level 4 */
border-left:15px solid #b76dc0; /* Level 5 */
-webkit-box-shadow:0 2px 4px #000;
-moz-box-shadow:0 2px 4px #000;
box-shadow:0 2px 4px #000;
}
Namun untuk menjaga ukuran lebar dan tinggi yang konsisten, lebih baik kurangi juga nilai lebar dan tinggi area sesuai dengan penambahan tebal border.
Efek Piramida Efek piramida dapat dibuat dengan cara mengubah nilai lebar dan tinggi menjadi 0
piksel dan menambah ketebalan border sebesar mungkin, sesuai dengan keinginan. Deklarasi warna latar belakang sudah tidak diperlukan lagi di sini, jadi kita buang saja:
#box {
width:0 ;
height:0 ;
background-color:#c261c0; /* Level 2 */
border-top:65px solid #ca94d1; /* Level 1 */
border-right:65px solid #964c9a; /* Level 3 */
border-bottom:65px solid #742a6c; /* Level 4 */
border-left:65px solid #b76dc0; /* Level 5 */
-webkit-box-shadow:0 2px 4px #000;
-moz-box-shadow:0 2px 4px #000;
box-shadow:0 2px 4px #000;
}
Efek Bevel Cekung Efek bevel cekung/terbalik dapat dibuat dengan cara menukar level-level warna border. Warna border kanan dipindah ke kiri, warna border kiri dipindah ke kanan, warna border bawah dipindah ke atas dan warna border atas dipindah ke bawah. box-shadow
sudah tidak diperlukan lagi di sini, jadi kita buang saja:
#box {
width:100px;
height:100px;
background-color:#c261c0; /* Level 2 */
border-bottom :15px solid #ca94d1; /* Level 1 */
border-left :15px solid #964c9a; /* Level 4 */
border-top :15px solid #742a6c; /* Level 5 */
border-right :15px solid #b76dc0; /* Level 3 */
-webkit-box-shadow:0 2px 4px #000;
-moz-box-shadow:0 2px 4px #000;
box-shadow:0 2px 4px #000;
}
Membandingkan Hasil Tampilan Efek Bevel dengan Penerapan Level Warna dan dengan Penerapan Border Outset Efek Bevel dengan Level Warna
#box {
width:100px;
height:100px;
background-color:#c261c0; /* Level 2 */
border-top:15px solid #ca94d1; /* Level 1 */
border-right:15px solid #964c9a; /* Level 3 */
border-bottom:15px solid #742a6c; /* Level 4 */
border-left:15px solid #b76dc0; /* Level 5 */
-webkit-box-shadow:0 2px 4px #000;
-moz-box-shadow:0 2px 4px #000;
box-shadow:0 2px 4px #000;
}
Efek Bevel dengan Border Outset
#box {
width:100px;
height:100px;
background-color:#c261c0; /* Level 2 */
border:15px outset #c261c0; /* Samakan dengan warna latar belakang */
-webkit-box-shadow:0 2px 4px #000;
-moz-box-shadow:0 2px 4px #000;
box-shadow:0 2px 4px #000;
}
4 Komentar
Unknown
BLog Yang Sangat Mengispirasi
mR Jun
mantap mas... salam blogger :)
Unknown
mantap gan, kunjungi juga situs saya gan http://prediksibola888.blogspot.com/
Anonim
keren om ane ikutan nyimak jg yah.
sambil jalan jalan ke dte.. \o/ \o/
Keep blogging!