Css3制作搜索框

今天又学习了red-team大大的制作搜索框文章，又忍不住了:D

http://www.red-team-design.com/design-a-beautiful-css3-search-form

http://webdesignerwall.com/tutorials/beautiful-css3-search-form

呦西，开始了：

---------------------------------------------------------------------------------------------------------

1.首先制造一个最原始噶搜索框：

 

Html的Code:(一个外框表格form，一个文本框text,一个按钮submit)

<form class="form-wrapper" action="">
<input class="inset" type="text" placeholder="Search">
<input type="submit" value="go">
</form>

---------------------------------------------------------------------------------------------------------

Css的Code:

.form-wrapper {
width: 200px;
padding: 8px;
margin: 100px auto;
overflow: hidden;
border-width: 1px;
border-style: solid;
border-color: #dedede #bababa #aaa;
}

.inset {
-moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
-webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
box-shadow: inset 0 3px 8px rgba(0,0,0,.24);
}

---------------------------------------------------------------------------------------------------------

2.接下来就是加上各种想要的效果，先试试圆角效果

border-radius:25px;
-moz-border-radius:25px;

.circle {
width: 30px;
height: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
}

效果：

____________________________________________________________________

3.然后就是边框阴影（box-shadow）效果啦：【下移，右移，阴影透明度（越小越深）】

box-shadow: 10px 10px 5px #888888;

效果：

____________________________________________________________________

4.再之后就是过度效果啦：（当鼠标放在上面时就，伸长= =！）

必须规定两项内容：

• 规定您希望把效果添加到哪个 CSS 属性上（这里是form）
• 规定效果的时长(这里是10s)

.long
{
transition:width 10s;
-moz-transition:width 10s; /* Firefox 4 */
-webkit-transition:width 10s; /* Safari and Chrome */
-o-transition:width 10s; /* Opera */
}
form:hover
{
width:300px;
}

____________________________________________________________________

今天就到这里吧，玩去啦:D