Wednesday, February 4, 2015

Membuat Garis Warna Warni







Contoh penggunaan garis warna warni Muiz-Techno
Banyak para blogger menggunakan garis warna warni ini sebagai salah satu untuk memperindah tampilan blog atau websitenya, lebih bagus lagi kalau garis yang dipasang itu terdapat pada template yang menggunakan flat design pasti akan indah kita lihat, banyak sebenarnya penggunaan garis warna warni tersebut, 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 


Trima kasih telah meluangkan waktunya untuk membaca artikel ini, jangan lupa lihat lihat tutorial blogger yang lainnya.


Anda Sedang Membaca Artikel Tentang Membuat Garis Warna Warni Dan Artikel Ini URL Permalinknya Adalah http://muiztech.blogspot.com/2015/02/membuat-garis-warna-warni.html, Saya Harap Artikel Ini Bisa Bermanfaat Bagi Anda Yang Membacanya.


NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner