Ada satu cara simpel untuk membuat 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 membuat efek bevel yang lebih realistis, setidaknya kau harus menerapkan lima level warna sekaligus, dengan sedikit penambahan CSS Box Shadow untuk memperindah hasil tampilannya. Di sini Saya memakai lima level warna ibarat ini:
Penerapan Level-Level Warna dan Bayangan pada Area
Pertama kita buat sebuah area sembarang ibarat 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 ibarat 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 jadinya menjadi ibarat ini:
Setelah itu tambahkan efek bayangan dengan warna hitam. Tingkatan blur hendaknya jangan dibentuk terlalu besar, alasannya yaitu 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 ibarat 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 sanggup dibentuk 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 dibutuhkan 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 sanggup dibentuk 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 dibutuhkan 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; }