إنضم لنا

Membuat garis horizontal dengan css





Assalamualaiqum.wr.wb..

Cara membuat garis hirizontal menggunakan css



Pertama kalian wajib masuk di edit HTML pada template blog kalian kemudian pilih salah satu model garis yang ingin kalian pasang di bawah ini lalu tempelkan di atas code ]]></b:skin>

yang harus kalian pasang di template adalah CSS nya & untuk HTML nya kalian gunakan untuk membuat artikel atau kebutuhan lainya
1. Nomor satu

HTML
<hr class="style1">
CSS
hr.style1{
 border-top: 1px solid #8c8b8b;
}

2.Nomor dua

<hr class="style2">
hr.style2 {
 border-top: 3px double #8c8b8b;
}

3.Nomor tiga

<hr class="style3">
hr.style3 {
 border-top: 1px dashed #8c8b8b;
}

4.Nomor empat

<hr class="style4">
hr.style4 {
 border-top: 1px dotted #8c8b8b;
}

5.Nomor lima

<hr class="style5">
hr.style5 {
 background-color: #fff;
 border-top: 2px dashed #8c8b8b;
}

6.Nomor enam

<hr class="style6">
hr.style6 {
 background-color: #fff;
 border-top: 2px dotted #8c8b8b;
}

7.Nomor tujuh

<hr class="style7">
hr.style7 {
 border-top: 1px solid #8c8b8b;
 border-bottom: 1px solid #fff;
}

8.Nomor delapa

<hr class="style8">
hr.style8 {
 border-top: 1px solid #8c8b8b;
 border-bottom: 1px solid #fff;
}
hr.style8:after {
 content: '';
 display: block;
 margin-top: 2px;
 border-top: 1px solid #8c8b8b;
 border-bottom: 1px solid #fff;
}

9.Nomor sembilan

<hr class="style9">
hr.style9 {
 border-top: 1px dashed #8c8b8b;
 border-bottom: 1px dashed #fff;
}


10.Nomor sepuluh

<hr class="style10">
hr.style10 {
 border-top: 1px dotted #8c8b8b;
 border-bottom: 1px dotted #fff;
}

11.Nomor sebelas

<hr class="style11">
hr.style11 {
 height: 6px;
 background: url(http://ibrahimjabbari.com/english/images/hr-11.png) repeat-x 0 0;
    border: 0;
}


12.Nomor duabelas

<hr class="style12">
hr.style12 {
 height: 6px;
 background: url(http://ibrahimjabbari.com/english/images/hr-12.png) repeat-x 0 0;
    border: 0;
}


13.Nomor tigabelas

<hr class="style13">
hr.style13 {
 height: 10px;
 border: 0;
 box-shadow: 0 10px 10px -10px #8c8b8b inset;
}


14.Nomor empatbelas

<hr class="style14">
hr.style14 { 
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
}

15.Nomor limabelas

<hr class="style15">
hr.style15 {
 border-top: 4px double #8c8b8b;
 text-align: center;
}
hr.style15:after {
 content: '\002665';
 display: inline-block;
 position: relative;
 top: -15px;
 padding: 0 10px;
 background: #fff;
 color: #8c8b8b;
 font-size: 18px;
}


16.Nomor enambelas

<hr class="style16">
hr.style16 { 
  border-top: 1px dashed #8c8b8b; 
} 
hr.style16:after { 
  content: '\002702'; 
  display: inline-block; 
  position: relative; 
  top: -12px; 
  left: 40px; 
  padding: 0 3px; 
  background: #fff; 
  color: #8c8b8b; 
  font-size: 18px; 
}

17.Nomor tujuhbelas

<hr class="style17">
hr.style17 {
 border-top: 1px solid #8c8b8b;
 text-align: center;
}
hr.style17:after {
 content: '§';
 display: inline-block;
 position: relative;
 top: -14px;
 padding: 0 10px;
 background: #fff;
 color: #8c8b8b;
 font-size: 18px;
 -webkit-transform: rotate(60deg);
 -moz-transform: rotate(60deg);
 transform: rotate(60deg);
}


18.nomor delapanbelas

<hr class="style18">
hr.style18 { 
  height: 30px; 
  border-style: solid; 
  border-color: #8c8b8b; 
  border-width: 1px 0 0 0; 
  border-radius: 20px; 
} 
hr.style18:before { 
  display: block; 
  content: ""; 
  height: 30px; 
  margin-top: -31px; 
  border-style: solid; 
  border-color: #8c8b8b; 
  border-width: 0 0 1px 0; 
  border-radius: 20px; 
}
Penulis:

Seorang Penulis Asal Tegal jawa tengah 


PENTING !!!
Untuk pertanyaan di luar topik silahkan Gunakan Komentar Facebook atau Google+ sengaja Kami sediakan Untuk komentar random Dan untuk pertanyaan seputar article gunakan komentar disqus Terimakasih...

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments:

This site uses cookies from Google to deliver its services, to personalise ads and to analyse traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies. Detail