Widodo

Membuat line warna-warni dengan css

Selamat Pagi para developer, dikesempatan kali ini saya akan berbagi tutorial pembuatan sebuah lin dengan menggunakan css, tutorial yang saya berikan ini cocok bagi pemula atau baru mengenal yang namanya css (cewek cantik sekali ), Up maskdunya Cascanding Style sheet, ada beberapa penggunaan line atau garis dalam sebuah blog maupun web, salah satunya adalah memanfaatkan sebuah border atau hr untuk menggunakan ini cukup mudah misalkan <div style="border-bottom:solid 1px #eeeeee; height:1px"></div> kode html ini akan menghasilkan sebuah line atau garis menggunakan border-bottom untuk penggunakan hr tinggal anda menulis code hr di halaman kalian, kode ini akan menghasilkan sebuah line atau garis yang tebal nah lantas bagaimana untuk memperkecil sebuah garis itu kita manfaatkan sebuah css, dan saya juga akan memberikan sebuah line warna warni dengan menggunakan css mungkin untuk itu kita simak bersama sama dibawah ini ....
1. setting css line menggunakan hr
hr {border-bottom:dotted 1px #cccccc; border-top:0px;border-left:0px;border-right:0px;}

2. Membuat sebuah line warna warni menggunakan css

CSS

.colored { width: 100%; height:4px; overflow:hidden; position:relative; top:0px; left:0px ;}
.colored div{ height:4px; width:20%; float:left;}
.blue{background-color: #327EA3;}
.aqua {background-color: #4CA5D0;}
.green{ background-color: #6CA338;}
.yellow {background-color: #FFBC38;}
.red {background-color: #E82C0C;}

HTML

<div class="colored">
<div class="blue"></div>
<div class="aqua"></div>
<div class="green"></div>
<div class="yellow"></div>
<div class="red"></div>

</div>

Untuk demonya bisa lihat dibawah ini


0 Komentar