Cara membuat border warna warni - sebelumnya kita telah berkenalan dengan yang namanya
jQuery selectors dan
penulisan jquery (jQuery syntax). tapi sayangnya kali ini saya tidak akan membahas tentang
jQuery dulu saya akan beralih ke tema trik.
saya yakin semua dari anda sudah paham apa itu border dan bagimana cara mengaplikasikanya terhadap suatu elemen. namun,seringkali kita melihat ada template yang berisi elemen dengan border warna-warni. mungkin kita hanya bisa melihatnya dan bertanya-tanya saja begitupun saya,oleh karena itulah saya coba mencari tahu. pada dasarnya dalam satu garis border kita hanya bisa menggunakan satu warna , berbeda jika kita membuat empat garis border yang mengelilingi suatu elemen, kita dapat membedakan warna setiap garis border. misalnya begini :
#elemen {
border-width:3px;
border-style:solid;
border-color: black blue green red;
}
dan hasilnya seperti ini :
kalau dilingkaran kita akan mudah untuk membuat border warna-warni namun kita hanya bisa memakai empat warna berbeda. karena disini kita hanya akan membedakan warna setiap garis border dengan menambahkan properti '
border-radius' pada css elemen tersebut .
seperti ini :
#elemen {
border-width:5px;
border-style:solid;
border-color:blue green red orange;
border-radius:70px;
}
dan hasilnya seperti ini :
CARA PEMBUATAN
karena keterbatasan properti border saya melakukan beberapa percobaan kecil-kecilan untuk dapat membuat border berbeda-beda warna dalam satu garis(border warna-warni) dan akhirnya jadi. ini hanyalah sebuah trik kecil, mungkin ide ini sudah duluan tersirat di pikaran anda sebelum saya. kembali kepembahasan, untuk melakukan trik ini kita tidak akan memakai properti border yang ada pada css. tetapi kita akan membuat sebuah border dari cara kita membuat menu horizontal. ya, dengan menggunakan '
ul li' kerana dengan cara itulah kita dapat dengan mudah membuat border warna-warni.
pertama, kita buat sebuah elemen dengan
id="elemen"(contoh).
<div id="elemen" />
setelah itu kita hanya perlu membuat sebuah menu horizontal dengan div saja misalnya id kita namakan
id='border', lalu
id='border' letakkan diarea elemen
id='elemen'.
<div id='elemen'>
<div id='border'>
<ul>
<li><span class='main a'/></li>
<li><span class='main b'/></li>
<li><span class='main c'/></li>
<li><span class='main d'/></li>
<li><span class='main e'/></li>
<li><span class='main f'/></li>
</ul>
</div>
</div>
setelah itu kita tinggal menambah kode cssnya , seperti ini :
#elemen {
background:#272727;
padding:0px !important;
width:540px;
margin:0px;
height:auto;
position:relative;
}
#border {
position:absolute;
top:100%; /* posisi border dari atas */
left:0px; /* posisi border dari samping */
}
#border ul {
list-style: none;
margin:0px !important;
padding:0px;
}
#border li {float: left;}
#border span {
height:5px; /* ketebalan border */
width:90px; /* panjang dari setiap warna border */
float:left;
}
/* memeberi warna background yang berbeda-beda */
#border span.a {background-color:#148dcc !important;}
#border span.b {background-color:#f41e32 !important;}
#border span.c {background-color:#536b35 !important;}
#border span.e {background-color:#704770 !important;}
#border span.f {background-color:#803333 !important;}
#border span.d {background-color:#0dbf3f !important;}
nah dengan begiu kita sudah membuat border warna-warni. lihat disini :
Nah selamat mencoba memainkan game PS2 / game PSP di android anda.
