Menciptakan Efek Bevel dengan Modal Border dan Outline
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:
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
#box {
background-color:#F49F2D; /* Level 2 */
border:1px dashed #FFFFFF; /* Level 1 */
outline:4px solid #F49F2D; /* Level 2 */
}Efek Garis Tepi Berganda
#box {
background-color:#2C97DA; /* Level 2 */
border:4px solid #6DC2F7; /* Level 1 */
outline:4px solid #2C97DA; /* Level 2 */
}
6 Komentar
Unknown
wah2 keren efekny border nancep tanah :)
Unknown
gan mo nanya.. klo buat efek garis 1px pemisa kya di daftar isinya nto gmana yah..?? trus garis pemisah antar menunya jg nto gmana..??
Taufik Nurrohman
@aan: Pake border-top sama border-bottom. Warna level satu untuk border-top, level tiga untuk border-bottom.
Untuk seorang blogger yang sudah terbiasa dengan Photoshop seperti kamu harusnya langsung ngerti :)
Wawan Darmawan
tutorialnya sangat membantu...bagi saya blogger newbie...mantab..trus posting tutorialnya ya om... \o/
no data
wew makasih om tutornya, baruh tau yang kayak ginian :)
#semoga sukses selalu kang :D
daengrio.com <---
Anonim
naroh nya dimana mas :D maaf masih newbie banget :v