Creating “Next Level” Search Form Using jQuery & CSS3 [Webstuffshare]
Lately we found ton of new style search form crafted beautifully using CSS3 and JavaScript. Apple’s for example, widen the input field when it receive focus from user. The question is “how far we can go for styling search form?”, in this tutorial we are going to move search form to the next level using jQuery & CSS3.
Simple Style
First to go we will create a simple animated search form that show only search button with search image on it. When the button receives a click, the input field will widen while the search image will move to left filling the left blank space before input text.
Based on the picture above, the HTML element will consists of 4 elements, a div for elements wrapper, an input text, an input button for search button and an image search. All of them will be stacked each other where the div wrapper is at the very bottom of the stack and image search at the very top. Here’s the HTML and CSS :
.wrapper-simple {
text-align: center;
margin: 0 auto;
display: block;
width: 60px;
height: 45px;
padding: 10px 5px;
background: -webkit-gradient(linear, left top, left bottom, from(#f5fafe), to(#e2edf4));
border-radius: 5px;
box-shadow: inset rgba(255, 254, 255, 1) 0 0.1em 2px,
#9bb6c9 0 1px 2px;
position: relative;
}.wrapper-simple input[type=submit] {
margin-top: .2em;
z-index: 2;
position: relative;
vertical-align: top;
height: 43px;
min-width: 55px;
border-radius: 3px;
border: 1px solid #aa7818;
background: -webkit-gradient(linear, left top, left bottom, from(#ffb700), to(#ff8c00));
box-shadow: inset rgba(255, 255, 255, .5) 0 0.1em 0.1em;
cursor: pointer;
}.wrapper-simple input[type=submit]:active {
box-shadow: inset rgba(0,0,0,.4) 0 1px 1px;
}.wrapper-simple input[type=submit]:hover {
background: -webkit-gradient(linear, left top, left bottom, from(#ffcb48), to(#ff9c23));
}.wrapper-simple input[type=text] {
font-family: Arial;
font-weight: bold;
color: #1a3d51;
background: #d8e6ef;
border-radius:2px;
padding: 10px 10px 15px 10px;
width: 250px;
border: 0;
font-size: 16px;
text-shadow: rgba(255, 255, 255, 0.7) 1px 1px 1px;
box-shadow: inset rgba(0,0,0,.4) 0 1px 1px;
position: absolute;
width: 1px;
z-index: 2;
padding-left: 2em;
margin-left: .2em;
}.wrapper-simple img {
position: absolute;
top: 1.5em;
left: 1.5em;
z-index: 4;
}Now we will read the click event on search button and animate the form using jQuery.$('.wrapper-simple input[type=submit]').toggle(function(){$('.wrapper-simple').animate({'width':'300px'})
.end().find('.wrapper-simple input[type=text]').animate({'width': '250px'})
.end().find('.wrapper-simple img').animate({'marginLeft': '-5px'})
.end().find(this).animate({'marginLeft':'22em'}).attr('value', 'CANCEL');}, function() {$('.wrapper-simple').animate({'width':'60px'})
.end().find('.wrapper-simple input[type=text]').animate({'width': '1px'})
.end().find('.wrapper-simple img').animate({'marginLeft': '0'})
.end().find(this).animate({'marginLeft':'0'}).attr('value', '');});The script toggling user’s click. First click will widen the div wrapper and input text, move the search button to the edge of input text and move image search to fill the left blank space before input text. Second click will revert to normal.
Cube Style
After making simple animated search form, actually we aren’t moving too far. So we will make another experiment, how about show the search form rotating like a cube? Well, CSS3 properties like transform, perspective and animation seems very helpful. The thing that we must give more attention that the following code and demo currently work only on Safari 5+.
Making a cube is a bit tricky, for vertical rotate and one direction (up to down) we can create a cube by making 2 div, first div as a front side of the cube and the second div as a top side. The top side div must be rotated so it will be like coming from the top when the cube rotating.
The structure of elements will be :wrapper1 acting as wrapper for all elements inside, content-wrapper1 also as a wrapper that will be rotated, search button-1 as top side and search-box1 as front side. The styling :.wrapper1 {
display: block;
width: 300px;
margin: 0 auto;
-webkit-perspective : 1200px;
}.search-button1 span {
display: block;
margin: 0 auto;
background: #643904;
border-radius: 30px;
width: 30px;
height: 30px;
box-shadow: rgba(255,255,255,.3) 0 1px 0px;
}.search-button1 span img {
vertical-align: middle;
padding-top: 7px;
}.search-button1:hover {
background: -webkit-gradient(linear, left top, left bottom, from(#ffcb48), to(#ff9c23));
}.search-button1:active {
margin-top: 0.2em;
box-shadow: inset rgba(255, 254, 255, 0.2) 0 0.3em .3em,
#8e620e 0 0.3em 0,
rgba(0, 0, 0, 0.2) 0 0.5em 3px;
}.search-box1 {
margin-top: -.6em;
display: none;
position: absolute;
width: 300px;
height: 50px;
padding: 10px 6px;
background: -webkit-gradient(linear, left top, left bottom, from(#f5fafe), to(#e2edf4));
border: 1px solid #9bb6c9;
border-bottom: 1px solid rgba(255,255,255,0.2);
border-radius: 5px;
box-shadow: inset rgba(255, 254, 255, 0.2) 0 0.3em .3em,
#899faf 0 .5em 0px,
rgba(0, 0, 0, 0.2) 0 .9em 3px;-webkit-transform: rotate3d(1,0,0,90deg)
translateZ(20px);
}.search-box1 input {
font-family: Arial;
font-weight: bold;
color: #1a3d51;
background: #d8e6ef;
border-radius:2px;
padding: 10px 10px 15px 10px;
width: 250px;
border: 0;
font-size: 16px;
text-shadow: rgba(255, 255, 255, 0.7) 1px 1px 1px;
box-shadow: inset rgba(0,0,0,.4) 0 1px 1px;
}.search-box1 input:focus {
outline: none;
}.search-box1 img {
opacity: .5;
position: absolute;
margin: .6em 0 0 -2em;
cursor: pointer;
-webkit-transition: 0.5s linear;
}.search-box1 img:hover {
opacity: 1;
}.hide-search-button {
display: none;
}.show-search-button {
display: block;
}.show-search-box {
display: block;
}.showed-search-box {
display: block;
-webkit-transform: rotate3d(1,0,0,0deg);
}.hidden-search-box {
-webkit-transform: rotate3d(1,0,0,90deg)
translateZ(25px);
}.switch-show {
height: 50px;
-webkit-transform-style: preserve-3d;
-webkit-animation: showBox 0.5s ease-in-out;
}.switch-hide {
height: 50px;
-webkit-transform-style: preserve-3d;
-webkit-animation: hideBox 0.5s ease-in-out;
}.switch-show {
height: 50px;
-webkit-transform-style: preserve-3d;
-webkit-animation: showBox 0.5s ease-in-out;
}.switch-hide {
height: 50px;
-webkit-transform-style: preserve-3d;
-webkit-animation: hideBox 0.5s ease-in-out;
}@-webkit-keyframes showBox{
0% { -webkit-transform: rotate3d(1,0,0,0); }
100% { -webkit-transform: rotate3d(1,0,0,-90deg); }
}@-webkit-keyframes hideBox{
0% { -webkit-transform: rotate3d(1,0,0,-90deg); }
100% { -webkit-transform: rotate3d(1,0,0,0); }
}We’re a half set up, now we will read the click event from the user and rotate the cube.$('.search-button1').click(function() {$('.content-wrapper1').addClass('switch-show');
$('.search-box1').addClass('show-search-box');setTimeout(function(){$('.content-wrapper1').removeClass('switch-show');
$('.search-button1').removeClass('show-search-button').addClass('hide-search-button');
$('.search-box1').addClass('showed-search-box');},480);
});$('.search-box1 img').click(function() {$('.search-button1').removeClass('hide-search-button');
$('.search-box1').addClass('hidden-search-box');
$('.content-wrapper1').addClass('switch-hide');setTimeout(function(){$('.content-wrapper1').removeClass('switch-hide');
$('.search-button1').removeClass('show-search-button');
$('.search-box1').removeClass('show-search-box showed-search-box hidden-search-box');},480);});The script above act as an animation delegator, all animation handled by CSS. Since the CSS animation we describe before only works once and revert to the normal state, we force the current showed side to visible and other side to hidden until the animation works before revert back, this is do the trick.
Cube Style With Animate
At some point we might animate the front side before rotate the cube. Then we reduce the front side’s width and widen it before rotate.
$('.search-button2').click(function() {$('.arrow').hide();$(this).stop().animate({'width':'300px'}, 500, function() {$('.content-wrapper2').addClass('switch-show');
$('.search-box2').addClass('show-search-box');setTimeout(function(){$('.content-wrapper2').removeClass('switch-show');
$('.search-button2').removeClass('show-search-button').addClass('hide-search-button');
$('.search-box2').addClass('showed-search-box');},480);});
});$('.search-box2 img').click(function() {$('.search-button2').removeClass('hide-search-button');
$('.search-box2').addClass('hidden-search-box');
$('.content-wrapper2').addClass('switch-hide');$('.search-button2').addClass('show-search-button').stop().delay(500).animate({'width':'50px'}, 500, function() {$('.content-wrapper2').removeClass('switch-hide');
$('.search-button2').removeClass('show-search-button');
$('.search-box2').removeClass('show-search-box showed-search-box hidden-search-box');$('.arrow').show();});
});We use jQuery’s animate() function to widen the front side’s width and reduce it back when user close the form.
Conclusion
CSS3 and jQuery combination help us improve current web user interface into unlimited state, depend on our imagination. Did I missed something? I’d love to hear.
