Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

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:

css bevel
#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;
}

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 4 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!