Horizontal Line

<style type="text/css">

.hr1 {

    border: 0;

    height: 1px;

    background: #333;

    background-image: linear-gradient(to right, #ccc, #333, #ccc);

}

/* Gradient transparent - color - transparent */

.hr2 {

    border: 0;

    height: 1px;

    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));

}

/* Double-color dashed line */

.hr3 {

    border: 0;

    border-bottom: 4px dashed #ccc;

    background: #999;

}

/* Single-direction drop shadow */

.hr4 {

    height: 12px;

    border: 0;

    box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);

}

/* Cloud */

.hr5 {

    border: 0;

    height: 0; /* Firefox... */

    box-shadow: 0 0 10px 1px black;

}

.hr5 {  /* Not really supposed to work, but does */

    content: "\00a0";  /* Prevent margin collapse */

}

/* Inset, by Dan Eden */

.hr6 {

    border: 0;

    height: 0;

    border-top: 1px solid rgba(0, 0, 0, 0.1);

    border-bottom: 1px solid rgba(255, 255, 255, 0.3);

}

/* Flaired edges, by Tomas Theunissen */

.hr7 {

    overflow: visible; /* For IE */

    height: 30px;

    border-style: solid;

    border-color: black;

    border-width: 1px 0 0 0;

    border-radius: 20px;

}

.hr7 { /* 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;

}

/* Glyph, by Harry Roberts */

.hr8 {

    overflow: visible; /* For IE */

    padding: 0;

    border: none;

    border-top: medium double #333;

    color: #333;

    text-align: center;

}

.hr8:after {

    content: "§";

    display: inline-block;

    position: relative;

    top: -0.7em;

    font-size: 1.5em;

    padding: 0 0.25em;

    background: white;

}

</style>

<hr class="hr1"></hr>

<br><br>

<hr class="hr2" ></hr>

<br><br>

<hr class="hr3" ></hr>

<br><br>

<hr class="hr4" ></hr>

<br><br>

<hr class="hr5" ></hr>

<br><br>

<hr class="hr6" ></hr>

<br><br>

<hr class="hr7" ></hr>

<br><br>

<hr class="hr8" ></hr>

CSS3 Preloaders

Below you will find a range of pure CSS3 code preloaders. These preloaders can be used instead of animated gifs to let the end user know that content is being loaded. If you would like to add your preloader to this page, please contact me.
To view code used, click on the preloader.

  

Source Code for:

<div class="preloader1">
   <span></span>
   <span></span>
   <span></span>
   <span></span>
   <span></span>
   <span></span>
   <span></span>
   <span></span>
   <span></span>
   <span></span>
</div>

.preloader1 {
   width:40px;
   height:40px;
   display:inline-block;
   padding:0px;
   text-align:left;
   -webkit-animation:preloader1 1.4s linear infinite;
   animation:preloader1 1.4s linear infinite;
}
.preloader1 span {
   position:absolute;
   vertical-align:top;
   border-radius:100%;
   background:#000000;
   display:inline-block;
   width:8px;
   height:8px;
   margin-left:16px;
   transform-origin:center 20px;
   -webkit-transform-origin:center 20px;
}
.preloader1 span:nth-child(2) {transform: rotate(36deg);-webkit-transform: rotate(36deg); opacity:0.1;}
.preloader1 span:nth-child(3) {transform: rotate(72deg);-webkit-transform: rotate(72deg); opacity:0.2;}
.preloader1 span:nth-child(4) {transform: rotate(108deg);-webkit-transform: rotate(108deg); opacity:0.3;}
.preloader1 span:nth-child(5) {transform: rotate(144deg);-webkit-transform: rotate(144deg); opacity:0.4;}
.preloader1 span:nth-child(6) {transform: rotate(180deg);-webkit-transform: rotate(180deg); opacity:0.5;}
.preloader1 span:nth-child(7) {transform: rotate(216deg);-webkit-transform: rotate(216deg); opacity:0.6;}
.preloader1 span:nth-child(8) {transform: rotate(252deg);-webkit-transform: rotate(252deg); opacity:0.7;}
.preloader1 span:nth-child(9) {transform: rotate(288deg);-webkit-transform: rotate(288deg); opacity:0.8;}
.preloader1 span:nth-child(10) {transform: rotate(324deg);-webkit-transform: rotate(324deg); opacity:0.9;}
@keyframes preloader1 {
   from {transform: rotate(0deg);}
   to {transform: rotate(360deg);}
}
@-webkit-keyframes preloader1 {
   from {-webkit-transform: rotate(0deg);}
   to {-webkit-transform: rotate(360deg);}
}

Search from Jquery

My Phonebook

• Adele
• Agnes
• Billy
• Bob
• Calvin
• Christina
• Cindy

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}
</style>
</head>
<body>

<h2>My Phonebook</h2>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

<ul id="myUL">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>

  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>

  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul>

<script>
function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}
</script>

</body>
</html>