Menciptakan Efek Bevel dengan Modal Border dan Outline

Tabel Konten
  1. Hasil Tampilan 
  2. Lebih Banyak Efek 
    1. Efek Benang Jahit 
    2. Efek Garis Tepi Berganda 

Pembuatan efek bevel dengan border dan outline ini jauh lebih ringan dibandingkan dengan pembuatan efek bevel dengan border dan CSS bayangan, karena di sini kita hanya perlu untuk menuliskan properti background-color, border-top dan outline saja untuk menciptakan efeknya:

Efek Bevel
#C5F0F9
#0BC7BB
#04948A

Hasil Tampilan 

#box {
  background-color:#0BC7BB;     /* Level 2 */
  border-top:1px solid #C5F0F9; /* Level 1 */
  outline:1px solid #04948A;    /* Level 3 */
}

Lebih Banyak Efek 

Selain untuk menciptakan efek bevel, teknik ini juga bisa digunakan untuk menciptakan efek-efek ganteng lainnya seperti ini:

Efek Benang Jahit 

#F49F2D
#FFFFFF
#box {
  background-color:#F49F2D;  /* Level 2 */
  border:1px dashed #FFFFFF; /* Level 1 */
  outline:4px solid #F49F2D; /* Level 2 */
}

Efek Garis Tepi Berganda 

#6DC2F7
#2C97DA
#box {
  background-color:#2C97DA;  /* Level 2 */
  border:4px solid #6DC2F7;  /* Level 1 */
  outline:4px solid #2C97DA; /* Level 2 */
}

6 Komentar