8 Contoh Membuat Garis Dengan CSS

Tutorial 8 Contoh Membuat Garis Dengan CSS yang dapat anda terapkan untuk mempercantik blog anda

Style 1
HTML

<center><b>&lt;hr&gt; style 1</b></center> <hr class="style-1">

CSS

hr.style-1 {
 border: 0;
 height: 1px;
 background: #333;
 background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
 background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
 background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);
 background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
 }

D E M O

style 1

---

Style 2
HTML

 <center><b>&lt;hr&gt; style 2</b></center> <hr class="style-2">

CSS

 hr.style-2 {
 border: 0;
 height: 1px;
 background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
 background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
 background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
 background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
 }

D E M O

style 2

---

Style 3
HTML

 <center><b>&lt;hr&gt; style 3</b></center> <hr class="style-3">

CSS

 hr.style-3 {
 border: 0;
 border-bottom: 1px dashed #ccc;
 background: #999;
}

D E M O

style 3

---

Style 4
HTML

 <center><b>&lt;hr&gt; style 4</b></center> <hr class="style-4">

CSS

hr.style-4 {
 height: 12px;
 border: 0;
 box-shadow: inset 0 12px 12px -12px rgba(0,0,0,0.5);
 }

D E M O

style 4

---

Style 5
HTML

 <center><b>&lt;hr&gt; style 5</b></center> <hr class="style-5">

CSS

 hr.style-5 { border: 0;
 height: 0;
 border-top: 1px solid rgba(0, 0, 0, 0.1);
 border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

D E M O

style 5

---

Style 6
HTML

 <center><b>&lt;hr&gt; style 6</b></center> <hr class="style-6">

CSS

 hr.style-6 {
 height: 30px;
 border-style: solid;
 border-color: black;
 border-width: 1px 0 0 0;
 border-radius: 20px;
}
 hr.style-6:before {
 /* Not really supposed to work, but does */
 display: block; content: "";
 height: 30px;
 margin-top: -31px;
 border-style: solid;
 border-color: black;
 border-width: 0 0 1px 0;
 border-radius: 20px;
}

D E M O

style 6

---

Style 7
HTML

 <center><b>&lt;hr&gt; style 7</b></center> <hr class="style-7">

CSS

 hr.style-7 {
 padding: 0;
 border: none;
 border-top: medium double #333;
 color: #333; text-align: center;
 }
hr.style-7:after {
 content: "§"; display: inline-block;
 position: relative;
 top: -0.7em;
 font-size: 1.5em;
 padding: 0 0.25em;
 background: white;
 }

D E M O

style 7

---

Style 8
HTML

 <center><b>&lt;hr&gt; style 8</b></center> <hr class="style-8">

CSS

 hr.style-8 {
 border: 0;
 height: 0;
/* Firefox... */
 box-shadow: 0 0 10px 1px black;
}

D E M O

style 8

---