Cara buat border warna-warni

buat border warna-warni

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', laluid='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 :

DEMO

dengan cara ini kita bisa membuat sebuah ide yang kreatif lainnya. misalnya membuat tag pre dengan border warna-warni, lalu membuat footer dengan border warna-warni dan masih banyak yang lainnya. sekian artikel ringkas tentang cara membuat border warna-warni.