Menciptakan Efek Bevel Dengan Modal Border Dan Outline

Published by Concept Phone Senin, 20 Agustus 2018

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

#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 membuat imbas bevel, teknik ini juga dapat dipakai untuk membuat efek-efek ganteng lainnya menyerupai 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 */ }

Sumber https://www.dte.web.id/