Thursday, 4 August 2016

HOW TO CREATE AN ANIMATED SEARCH FORM

           
  No comments  
We all get to a time in our life when we need to start creating a cool animated forms and images for our webpages cause it attracts people more to your webpage
below is a sample code for a simple animated search form

 <!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
    width: 130px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

 input[type=text]:focus {
    width: 100%;
}
</style>
</head>
<body>

 <p>Animated search form:</p>

 <form>
  <input type="text" name="search" placeholder="Search..">
</form>

 </body>

</html>

 HOW IT WORKS:
  apart from the other css what does the major work from the css above is  -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
we need 2 different declaration to use an animation thats why we have two width above
input[type=text]:focus {
    width: 100%;
}
you can style more by changing the height dont stop with this one you can make it look cooler and more unique

 click here to see what your search box should look like
Share:

0 comments:

Post a Comment