Animated Search Box in CSS3

-
--------- Index.html ----------

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Untitled Document</title>
</head>

<body>
<div class="searchBox">
    <div class="searchForm">
        <input id="searchField" type="text" placeholder="Search Here" /> 
        <div class="close">
            <span class="front"></span>
            <span class="back"></span>
        </div> 
    </div>
</div>
</body>
</html>



------- style.css --------

body{
    margin: 0;
    padding: 0;
    background:#111;
}
.searchBox{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.searchBox .searchForm{
    position:relative;
    display:inline-block;
    height:30px;
    border:3px solid #fff;
    border-radius:17px;
}
.searchForm input#searchField{
    position:relative;
    padding:0px 15px;
    width:0px;
    height:30px;
    background:transparent;
    color:#e7e7e7;
    font-family: sans-serif,helvetica;
    font-size: 15px;
    border:none;
    outline: none;
    line-height:0px;
    vertical-align:top;
    z-index:2;
    -moz-transition: width .4s cubic-bezier(0.17, 0.78, 0.32, 1.32);
    -webkit-transition: width .4s cubic-bezier(0.17, 0.78, 0.32, 1.32);
    transition: width .4s cubic-bezier(0.17, 0.78, 0.32, 1.32);
}
.searchForm input#searchField:focus{
    margin-right:20px;
    width:200px;
    outline:none;
}
.searchForm .close{
    position:absolute;
    width:30px;
    height:30px;
    top:0px;
    right:0px;
    z-index:1
    cursor: pointer; 
    -moz-transition: .2s ease-in-out;
    -webkit-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
}

.searchForm .close span{
    position:absolute;
    display:block;
    width:22px;
    height:4px;
    top:32px;
    right:-13px;
    background:#e7e7e7;
    border-radius:5px;
    -moz-transition: .2s .5s ease-in-out;
    -webkit-transition: .2s .5s ease-in-out ;
    transition: .2s .5s ease-in-out; 
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg); 
}
.searchForm .close span.back{
    top:12px;
    right:5px;
    opacity:0;
}
.searchForm input#searchField:focus + .close span{
    top:12px;
    right:5px;
}

.searchForm input#searchField:focus + .close span.back{
    opacity:1;
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(-45deg);
    -moz-transition: .4s .8s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    -webkit-transition: .4s .8s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    transition: .4s .8s cubic-bezier(0.18, 0.89, 0.32, 1.28); 
}



Comments

Post a Comment

Popular posts from this blog

Shutdown Computer With Funny Reason

-
In this code you can type in the cmd so computer has been shutdown with funny reason try and enjoy the code . Step 1 : Open CMD (Command Prompt) Step 2 : type this below command in CMD               shutdown -s  -t 500 -c "I am tired. I don't want to work anymore." (with the quotes) Step 3 : Press Enter . Note :  The -c switch is used in the code to give the reason for shutting down and what is followed in quotes will be displayed in the dialog box as the reason. This can be used to display all sorts of funny messages . First you have close all the programme before type this command because computer has been shut down from this command so .
Read more

Hidden Attribute in javascript

-
< ! DOCTYPE HTML > < html > < head > < script > var toggleHidden = function() { var elem = document.getElementById( "toggle" ); if (elem.hasAttribute( "hidden" )) { elem.removeAttribute( "hidden" ); } else { elem.setAttribute( "hidden" , "hidden" ); } } </script> </head> < body > < button onclick= "toggleHidden()" >Click </button> < table > < tr > < th >Country </th> < th >Capital </th> </tr> < tr > < td > India </td> < td > New Delhi</td> </tr> < tr id= "toggle" hidden > < td > United States</td> < td > Washington D.C. </td> </tr> < tr > < td > New Zealand </td> < td > Wellington </td> </tr> </table...
Read more

Draw animated loading spinner canvas in Javascript

-
< ! DOCTYPE html > < html > < head > < script type= 'text/javascript' src= 'http://code.jquery.com/jquery-1.8.3.js' > </script> < script type= 'text/javascript' > $(window).load(function(){ (function() { setInterval(draw, 30); var degrees = 0.0; var offset = 8; function draw() { var canvas = document.getElementById( 'tutorial' ); if (canvas.getContext) { var ctx = canvas.getContext( '2d' ); ctx.clearRect(0, 0, 16, 16); degrees += 0.10; ctx.save(); ctx.translate(offset, offset); ctx.rotate(degrees); // Draw half open circle ctx.beginPath(); ctx.lineWidth = 2; ctx.arc(8-offset , 8-offset, 6, 0, 1.75 * Math.PI); ctx.stroke(); // Draw arrowhead ...
Read more