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