Using a background image for clear text.

<form action="" method="get">
   <input type="text" name="search" required="required" placeholder="type here"/>
   <input type="reset" value="" alt="clear" />
</form>

<style>

   input[type="text"]
   {
      height: 38px;
      font-size: 15pt;
   }

   input[type="text"]:invalid + input[type="reset"]{
     display: none;
   }

   input[type="reset"]
   {
      background-image: url( http://png-5.findicons.com/files/icons/1150/tango/32/edit_clear.png );
      background-position: center center;
      background-repeat: no-repeat;
      height: 38px;
      width: 38px;
      border: none;
      background-color: transparent;
      cursor: pointer;
      position: relative;
      top: -9px;
      left: -44px;
   }

</style>


Output :)

1)

2)

How to change the class of several tds of table when hovering over one of them using JQuery?

<style type="text/css">

.blocked {
   color: white;
   background-color: red;
}

.start {
   border-left: 5px solid black;
}

.end {
   border-right: 5px solid black;
}

.blocked-highlight {
   background-color: blue;
}

</style>

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>

<table>
    <thead><tr>
            <th>Monday</th>
            <th>Tuesday</th>
            <th>Wednesday</th>
            <th>Thursday</th>
            <th>Friday</th>
            <th>Saturday</th>
            <th>Sunday</th>
    </tr></thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
        </tr>
        <tr>
            <td>8</td>
            <td>9</td>
            <td>10</td>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>15</td>
            <td>16</td>
            <td class="blocked start">17</td>
            <td class="blocked">18</td>
            <td class="blocked">19</td>
            <td class="blocked">20</td>
            <td class="blocked">21</td>
        </tr>
        <tr>
            <td class="blocked">22</td>
            <td class="blocked">23</td>
            <td class="blocked end">24</td>
            <td>25</td>
            <td>26</td>
            <td>27</td>
            <td>28</td>
        </tr>
        <tr>
            <td>29</td>
            <td>30</td>
            <td>31</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
 </table>

 <script type="text/javascript">

$( document ).ready(function() {
   $("td.blocked").hover(
       function() {
           $( this ).siblings('.blocked').addBack(".blocked").addClass('blocked-highlight')
       }, function() {
           $( this ).siblings('.blocked').addBack(".blocked").removeClass('blocked-highlight')
       }
   );
});

 </script>


Output :)

1)

2)

3)

Vertical Nav Menu That Scrolls Then Also Has A Fly Out.

<style type="text/css">

  * {
    margin: 0px;
    padding: 0px;
  }
  a {
    color:inherit;
    text-decoration: none;
  }
  #container {
    height: 190px;
    overflow-y: auto;
  }
  ul#navmenu a:hover {
    color: #FFF;
  }
  body {
    font-size: 15px;
    font-family:Verdana;
    padding: 50px;
    color: #555555;
  }
  ul#navmenu, ul.sub1, ul.sub2 {
    list-style-type: none;
  }
  ul#navmenu li {
    width: 310px;
    text-align: center;
    position: relative;
    border-bottom: 0.12em dotted #ABB0B0;
    text-align: left;
  }
  ul#navmenu a {
    text-decoration: none;
    display: block;
    width: 300px;
    height: 45px;
    line-height: 45px;
    background-color: #E5E8E9;
    padding-left: 10px;
  }
  ul#navmenu .sub1 li {
  }
  ul#navmenu .su1 a {
    margin-top: 5px;
  }
  ul#navmenu .sub2 a {
    margin-left: 10px;
    width: 300px;
  }
  ul#navmenu li:hover > a {
    background-color: #0098ba;
  }
  ul#navmenu li:hover a:hover {
    background-color: #0098ba;
  }
  ul#navmenu ul.sub1 {
    display: none;
    position: absolute;
    top: 45px;
    left: 0px;
  }
  ul#navmenu ul.sub2 {
    display: none;
    position: absolute;
    top: -92px;
    left: 300px;
    width: 400px;
  }
  ul#navmenu li:hover .sub1 {
    display: block;
  }
  ul#navmenu .sub1 li:hover .sub2 {
    display: block;
  }
  .sub2 {
    text-transform: capitalize;
    font-size: 14px;
  }
  .button {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    border: solid 1px #c7c7c7;
    color: #006792;
    cursor: pointer;
    -webkit-appearance: button;
    box-shadow: inset 0 -1px #c7c7c7;
  }
  .triangleTop {
    position:relative;
    left: 270px;
    top: 30px;
    width: 0;
    height: 0;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #0098ba;
    border-left: 10px solid transparent;
    z-index: 2;
  }

</style>

<body>
  <div id="container">
    <div class="triangleTop"></div>
    <ul id="navmenu">
      <li><a>Hover on me</a>

        <ul class="sub1">
          <li><a href="#">MaHi</a></li>
          <li><a href="#">Sonal</a></li>
          <li><a href="#">Cities</a>
            <ul class="sub2">
              <li><a href="#">Surat</a></li>
              <li><a href="#">Bhavnagar</a></li>
              <li><a href="#">Ahmedabad</a></li>
              <li><a href="#">Rajkot</a></li>
              <li><a href="#">Baroda</a></li>
              <li><a href="#">Navsari</a></li>
              <li><a href="#">Valsad</a></li>
              <li><a href="#">Baruch</a></li>
              <li><a href="#">Mumbai</a></li>
              <li><a href="#">Panchgini</a></li>
              <li><a href="#">Pune</a></li>
              <li><a href="#">Nagpur</a></li>
            </ul>
          </li>
          <li><a href="#">Country</a></li>
          <li><a href="#">Sport</a></li>
          <li><a href="#">Hobby</a></li>
          <li><a href="#">Love</a></li>
          <li><a href="#">Man City FC</a></li>
          <li><a href="#">Bike</a></li>
          <li><a class="button">Manage content collections</a></li>
        </ul>
      </li>
    </ul>
  </div>
</body>


Output :)

1)

2)

3)

Continuous scroll on hover [performance] using JQuery.

<style type="text/css">

.scroll{
   margin-top:20px;
   background:#444;
   height:20px;
}

#content{
   width:0px;
   padding:10px;
   margin-left:0px;
   background:red;
   border-radius:100px;
}
.scroll:hover #content{
   background:lightgreen;
}

</style>

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>

<div class="scroll">
    <div id="content"></div>
</div>

<script type="text/javascript">

$(function(){
function loop(){
    $('#content').stop().animate({marginLeft:'+=20'}, 1000, 'linear', loop);
}

function stop(){
   $('#content').stop();
}

$(".scroll").hover(function () {
  loop();
},function () {
  stop();
});
});

</script>

Output :)

1)

2)

3)

How to put 'fadein' and 'animate' texts in the middle of the page ?

<style type="text/css">

.animated {
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
    -ms-animation-duration: 0.5s;
    -o-animation-duration: 0.5s;
    animation-duration: 0.5s;
}
.fade {
    -webkit-animation-name: fade;
    -moz-animation-name: fade;
    -o-animation-name: fade;
    animation-name: fade;
}
@-webkit-keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-moz-keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-o-keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes flowright {
    0% {
        opacity: 0;
        left: -100px;
    }
    100% {
        opacity: 1;
        left: 0;
    }
}
@keyframes flowright {
    0% {
        opacity: 0;
        left: -100px;
    }
    100% {
        opacity: 1;
        left: 0;
    }
}
@-webkit-keyframes flowleft {
    0% {
        opacity: 0;
        right: -100px;
    }
    100% {
        opacity: 1;
        right: 0;
    }
}
@keyframes flowleft {
    0% {
        opacity: 0;
        right: -100px;
    }
    100% {
        opacity: 1;
        right: 0;
    }
}
@-webkit-keyframes flowup {
    0% {
        opacity: 0;
        margin-top: 100px;
    }
    100% {
        opacity: 1;
        margin-top: 0;
    }
}
@keyframes flowup {
    0% {
        opacity: 0;
        margin-top: 100px;
    }
    100% {
        opacity: 1;
        margin-top: 0;
    }
}
@-webkit-keyframes flowdown {
    0% {
        opacity: 0;
        margin-top: -100px;
    }
    100% {
        opacity: 1;
        margin-top: 0;
    }
}
@keyframes flowdown {
    0% {
        opacity: 0;
        margin-top: -100px;
    }
    100% {
        opacity: 1;
        margin-top: 0;
    }
}
.flow {
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
    -webkit-animation-direction: alternate;
    -webkit-animation-fill-mode: both;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.right {
    -webkit-animation-name: flowright;
    animation-name: flowright;
}
.left {
    -webkit-animation-name: flowleft;
    animation-name: flowleft;
}
.up {
    -webkit-animation-name: flowup;
    animation-name: flowup;
}
.down {
    -webkit-animation-name: flowdown;
    animation-name: flowdown;
}
.sequence01 {
    -webkit-animation-delay: 0.1s;
}
.sequence02 {
    -webkit-animation-delay: 0.2s;
}
.sequence03 {
    -webkit-animation-delay: 0.3s;
}
.sequence04 {
    -webkit-animation-delay: 0.4s;
}
/* Headline Typography */
 .wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}

.headline {
    height: 100%;
    position: relative;
    font-family: helvetica;
    font-weight: bold;
    font-size: 4em;
}
/* Rows */

.row01 {
    position: relative;
}
.row02 {
    text-align: right;
    position: relative;
}
.row03 {
    padding-left: 20%;
    position: relative;
}
/* General Structure */
 body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.pagewrap {
    left: 10%;
    right: 10%;
    top: 0;
    bottom: 0;
    position: absolute;
    max-width: 48em;
    background-color: #fff6d6;
}

.top-headline-pad {
    height: 10%;
}
.headline-pad {
    height: 5%;
}
.bottom-headline-pad {
    height: 10%;
}

</style>

<body>
    <div class="pagewrap">
        <div class="wrapper">
            <div class="headline">
                <div class="top-headline-pad"></div>
                <div class="row01 flow left sequence01">ROW 01</div>
                <div class="headline-pad"></div>
                <div class="row02 flow right sequence02">ROW 02</div>
                <div class="headline-pad"></div>
                <div class="row03 flow up sequence03">ROW 03</div>
                <div class="bottom-headline-pad"></div>
            </div>
        </div>
    </div>
</body>


Output :)

How to place div inside another div to absolute position ?

<style type="text/css">

#container{
   width:200px;
   height:200px;
   position:relative;
   border:2px solid #33b5e5;
}
.box{
   border:2px solid #33b5e5;
   position:absolute;
   width:20px;
   height:20px;
   margin: 3px;
}
.top{top:0}
.middle{top:50%;margin-top:-10px;/*half of the .box height*/}
.bottom{bottom:0}

.left{left:0;}
.center{left:50%;margin-left:-10px;/*half of the .box width*/}
.right{right:0;}

</style>

<div id="container" class="box">
    <div class="box top left"></div>
    <div class="box top center"></div>
    <div class="box top right"></div>
 
    <div class="box middle left"></div>
    <div class="box middle center"></div>
    <div class="box middle right"></div>
 
    <div class="box bottom left"></div>
    <div class="box bottom center"></div>
    <div class="box bottom right"></div>
</div>


Output :)

Fade a css border to invisible.

<style type="text/css">

body{
background-color:red;
}

div.transition {
border: 5px solid rgba(0,0,0,1);
height: 100px;
width: 100px;
background-color: #ffffff;

transition: border-color 1s linear;
-moz-transition: border-color 1s linear;    /* FF3.7+ */
-o-transition: border-color 1s linear;      /* Opera 10.5 */
-webkit-transition: border-color 1s linear; /* Saf3.2+, Chrome */
}

div.transition:hover {
border-color: rgba(0,0,0,0);
}

</style>

<div class="transition"></div>


Output :)

1)

2)