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; 
}

Baca juga