Fancy CSS3 Search Box Tutorial – Expanding Search Box

This tutorial shows how to make a expanding search box on focus using css3.In this tutorial we will be using  transitions, border-radius feature of the css3.If the css3 is not supported in the browser also it works in which the rounded corner and transition animations wont be available.

Technologies Used:

  • CSS - transitions, border-radius
Check out the working demo of the search box.This css search box is for begginers and code is in a simplified form.Various effects could be added further based on requirement.

HTML CODE:
<form class="form-wrapper" action="s.php">

            <input type="text" id="search" placeholder="Enter your Keyword">

            <input type="submit" value="Search" id="submit" width="32" height="32" src="search.png">

             <div class="hider"></div>

 </form>
CSS CODE:
.form-wrapper
{
    position:absolute;
    margin-top:200px;
    -webkit-transition: all 400ms linear;
    -moz-transition: all 400ms linear;
    -transition: all 400ms linear;
    -ms-transition: all 400ms linear;
    transition: all 400ms linear;
    z-index:11;
}
form input[type=submit] {
    background : url("search.png") no-repeat center center;
    width : 52px;
    height :32px;
    border : none;
    color : transparent;
    font-size : 0;
    cursor:pointer;
    background-color:#0fb8c6;

}

#search
{

    height: 32px;
    width: 200px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    border-radius: 30px;
    color:black;

    padding:0px;
    margin:0px;
    font: 15px sans-serif;
    -webkit-transition: all 400ms linear;
    -moz-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    -ms-transition: all 400ms linear;
    transition: all 400ms linear;
    border:1px dashed #1b7883;
    background-color:#ffffff;

}

#search:focus
{
   width:300px;
    border: 1px solid #1b7883;
}

#search:focus + #submit
{
  left:248px;

}

#submit
{
    position:absolute;
    top:1px;
    left:148px;
     -webkit-border-top-right-radius: 15px;
    -webkit-border-bottom-right-radius: 15px;
    -moz-border-radius-bottomright: 15px;
    -moz-border-radius-topright: 15px;
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
    -webkit-transition: all 400ms linear;
    -moz-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    -ms-transition: all 400ms linear;
    transition: all 400ms linear;
}
Our expanding css3 search box is ready. For any queries leave me a comment below.
0saves
Contribute us by sharing this in your network

,

  • http://www.designfloat.com/blog/2012/11/29/free-css3-tutorials-released-november-2012/ Free CSS3 Tutorials Released This November | DesignFloat Blog

    [...] Fancy CSS3 Search Box Tutorial – Expanding Search Box [...]

Ver peliculas online