Menciptakan Efek Bevel dengan Modal Border dan Box Shadow

Tabel Konten

1. Penerapan Level-Level Warna dan Bayangan pada Area 
   1. Objek 
   2. Kode CSS 
2. Efek Bevel Asimetris 
3. Efek Piramida 
4. Efek Bevel Cekung 

Membandingkan Hasil Tampilan Efek Bevel dengan Penerapan Level Warna dan dengan Penerapan Border Outset 

1. Efek Bevel dengan Level Warna 
2. 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: