Menciptakan Efek Bevel dengan Modal Border dan Box Shadow

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;
}