Seperti
yang telah diketahui, umumnya setiap kali seorang blogger baru akan berhadapan
dengan template yang memiliki ‘border’ atau garis batas dihampir seluruh elemen
layout. Ini dapat diterapkan pada header, post body, sidebars, dan lain-lain.
Seperti yang telah diketahui juga bahwa htmlpun dapat didukung oleh Cascading
Style Sheet atau CSS. Blogger dapat dengan mudah menambahkan, mengubah, membuat
style dan penyesuaian lainnya dengan menggunakan CSS.
Dibawah ini adalah properti-properti yang dimiliki oleh border berdasarkan jenisnya:
·
Border
·
Border-top
·
Border-left
·
Border-right
·
Border-bottom
·
Border width
·
Border-top-width
·
Border-left-width
·
Border-right-width
·
Border-bottom-width
·
Border color
·
Border-top-color
·
Border-left-color
·
Border-right-color
·
Border-bottom-color
·
Border style
·
Border-top-style
·
Border-left-style
·
Border-right-style
·
Border-bottom-style
Ada
pula beberapa jenis nilai border style yang dapat dimasukkan seperti dotted, dashed, solid, double, groove,
ridge, inset dan outset. Tapi,
sebelum membuatnya, ada baiknya anda mengetahui dulu sintaks dari border. Lihat
gambar berikut:
Penjelasan:
“Selector”
merupakan elemen dari html yang akan diberi border, misalnya pada header,
menubar, sidebar, image, body, dan lain-lain. Setiap deklarasi selalu terdiri
atas sebuah properti dan sebuah value (nilai numerik). Dan, setiap properti
merupakan atribut style yang ingin anda rubah, didalamnya juga terdapat value.
Untuk
melakukan eksperimen diatas, ada banyak piranti yang bisa digunakan. Atau,
blogger dapat langsung membuatnya on-line di blog lain sebagai blog test.
Gambar ilustrasi diatas dapat dibuat menggunakan TextMate, Aptana Studio,
Notepad++, atau yang lainnya. Untuk
TextMate hanya berlaku untuk Mac, sisanya Windows. Berikut adalah ilustrasi
sintaks dari penggunaan kode border selengkapnya:
#selector {border: 2px solid #000000;}
# selector {border: 2px dotted #000000;}
# selector {border: 2px dashed #000000;}
# selector {border-style: double;border-color:
#000000;}
# selector {border-style:
groove;border-color:#0000FF;border-width:4px;}
# selector {border-style:
ridge;border-color:#FF00FF;border-width:4px;}
# selector {border-style:
inset;border-color:#00FF00;border-width:4px;}
# selector {border-style:
outset;border-color:#00FFFF;border-width:4px;}
# selector {border-style: hidden;}
No comments:
Post a Comment