Border Style, Border Width, Border Color
Border Style, Border Width, Border Color
Kalau di postingan sebelumnya sengaja saya bahas yang ringan dan enteng yakni tentang cara mengganti background theme wordPress, tutorial kali ini juga masih membahas yang ringan, enteng, renyah dan gurih heee .. (krupuk kali … ) yakni tentang css border. Pembahasannya kita fokuskan kepada border style, border width dan border color.
Border Style :Di CSS border properties bentuk-bentuk border ada beberapa macam di antaranya, dotted, dashed, solid, double, groove, ridge, inset dan outset.
Contoh :Contoh tanpa border/No border, penulisan kodenya :
border-style:noneContoh dotted border, penulisan kodenya :
border-style:dottedContoh dashed border, penulisan kodenya :
border-style:dashedContoh solid border, penulisan kodenya :
border-style:solidContoh double border, penulisan kodenya :
border-style:doubleContoh groove border, penulisan kodenya :
border-style:grooveContoh ridge border, penulisan kodenya :
border-style:ridgeContoh inset border, penulisan kodenya :
border-style:insetContoh outset border, penulisan kodenya :
border-style:outsetBorder Width :
Dengan suatu border properties, border bisa diatur lebar/ketebalannya. Untuk pengaturan ketebalan suatu border bisa menggunakan pixels (px) atau bisa menggunakan salah satu ukuran yang biasa digunakan dalam css yaitu, thin, medium, atau thick (tipis, sedang, atau tebal).
Contoh sebuah border dengan style : solid width : 5pxpenulisan kodenya :
Contoh sebuah border dengan style : ridge width : thickborder-style:solid;border-width:5px;penulisan kodenya :
border-style:solid;border-width:thick;Border Color :
Dengan suatu border properties, border bisa diatur warnanya. Untuk pengaturan warna suatu border bisa menggunakan nama suatu warna (dalam bahasa Inggris tentunya) misalnya, blue, red, yellow, grey dll, atau bisa menggunakan RGB misalnya, rgb(0.51.26), atau HEX misalnya, #330000
Contoh border style:double width:3px color:#330000penulisan kodenya :
border-style:double;border-width:3px;border-color:#330000;Penulisan kode border properties di atas bisa diringkas (shorthand) menjadi :
border:double 3px #330000;Contoh lain penggunaan border style yang berbeda untuk bagian atas (top), kanan (right), bawah (bottom) dan kiri (left) :
penulisan kodenya :
border-style:dotted solid dashed double;border-width:1px 2px 3px 4px;border-color:#330000 blue red green;Keterangan :
border-style:dotted solid dashed double, urutanya dari atas kanan bawah kiri. Atas=dotted kanan=solid bawah=dashed kiri=double. Demikian juga untuk width dan color urutannya dari atas kanan bawah kiri. Kemudian jika ditulis seperti ini : border-style:dotted solid dashed artinya bagian atas=dotted, kanan dan kiri=solid, bawah/bottom=dashed. Jika ditulis seperti ini : border-style:dotted dashed artinya bagian atas dan bawah=dotted, bagian kiri dan kanan=dashed.Border juga bisa diset hanya pada bagian tertentu saja (individual border) misalnya hanya akan memberi border pada bagian bawah, maka penulisan kodenya menjadi : border-bottom, bagian atas saja (border-top), bagian kiri saja (border-left) atau kanan saja (border-right). Contoh pemberian boder hanya pada bagian bawah saja (border-bottom) dengan border style : dashed :
penulisan kodenya (langsung disingkat/shorthand) :
Pada bagian tertentu, border juga bisa dibuat menjadi transparan/hidden/tersembunyi. Misalnya pada bagian atas (border-top) dibuat menjadi transparan.border-bottom:dashed 3px #00331A;penulisan kodenya (langsung disingkat/shorthand) :
border:solid 3px #00331A;border-top:none; atau bisa juga seperti ini : border:solid 0 3px 3px 3px #00331A;Selain dengan none untuk menghilangkan tampilan border juga bisa menggunakan transparent atau hidden.
Oke itu pengenalan dasar-dasar tentang border, baik border style, border width maupun border color. Dengan kreatifitas serta pengembangan lebih lanjut dan dipadukan dengan kelebihan-kelebihan yang ada di CSS3 nantinya anda akan bisa menghasilkan berbagai macam tampilan border yang menarik.
0 Comments
