您的位置：首页 > Web前端 > CSS

笔记-CSS3实现3D搜索输入框

2015-08-18 17:38 726 查看

题外话

今天拜读了大漠的<<图解CSS3>>发现里面这个按钮的实例挺赞的,稍微完善了一下原来例子.

去掉一些现在不用的前缀,补全了最终版的.clearfix,还有样式稍作修改~~

原版效果图:



预备知识

基础布局知识

CSS2.1 && CSS3

制作原理(CSS3特性)

box-shadow – 盒子阴影 -> 使用多层阴影达到立体效果

box-image:linear-gradient -> 渐变效果实现….

box-radius: – 实现圆角效果

text-shadow: – 文本阴影

其他的都是CSS2.1的属性,就不用多说了..

代码实现

因为代码量不是很多,就木有分离CSS了…

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>制作3D搜索表单</title>
<style>
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
overflow: hidden;
}

#formWrapper {
margin:0 auto;
width: 650px;
/*设置搜索表单的宽度*/
padding: 8px;
overflow: hidden;
/*清除浮动*/
/*设置表单的边框效果*/
border-width: 1px;
border-style: solid;
border-color: #dedede #bababa #aaa #bababa;

/*最为关键的代码,设置表单3D立体效果*/
box-shadow: 0 5px 5px rgba(255, 255, 255, 0.3), 0 3px 0 #bbb, 0 4px 0 #aaa,0 5px 5px #444,0px 0 5px rgba(228,162,50,.3) inset;
/*设置圆角效果*/
border-radius: 10px;
-webkit-border-image: -webkit-linear-gradient(NaNdeg, #5191AC, #5A7BC6);
-o-border-image: linear-gradient(top 35deg, #5191AC, #5A7BC6);
border-image: linear-gradient(top 35deg, #5191AC, #5A7BC6);
}
/*输入框样式效果*/
#formWrapper .search {
width: 530px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 16px 'lucida sans','trebuchet MS','Tahoma';
border: 1px solid #ccc;
border-radius: 3px;
border-radius: 5px;
box-shadow: 0 0 5px rgba(78,166,189,.25) inset,1px 0 1px rgba(99,157,179,.79);
}
/*输入框得到焦点时样式*/
#formWrapper .search:focus {
outline: 0;
color:rgba(106,105,105,.73);
border-color: #C7D1D0;
box-shadow: 0 1px 1px #bbb inset;
}

#formWrapper .search:-ms-input-placeholder,
#formWrapper .search:-moz-placeholder,
#formWrapper .search::-webkit-input-placeholder {
color: #2DAF2B;
font-weight: 700;
}

/*搜索按钮效果*/
#formWrapper .btn {
float: right;
border: 1px solid #00748f;
height: 42px;
width: 100px;
padding: 0;
cursor: pointer;
font: bold 15px Arial,Helvetica;
color: #fafafa;
text-transform: uppercase;
color: #fafafa;
background-color: #0483a0;
-webkit-border-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);
-o-border-image: linear-gradient(top,#31b2c3,#0483a0);
border-image: linear-gradient(top,#31b2c3,#0483a0);
border-radius: 5px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3) ;
box-shadow: 0 1px 0 rgba(255, 0, 0, 0.3) inset,1px 1px 1px #0483a0;
}

/*按钮悬浮状态和焦点状态下效果*/
#formWrapper .btn:hover,
#formWrapper .btn:focus {
background-color: #31b2c3;
box-shadow: 1 1 3px #31b2c3;
border-radius: 5px;
background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3);
background-image: linear-gradient(top,#0483a0,#31b2c3);
}

/*按钮点击时效果*/
#formWrapper .btn:active {
outline: 0;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
/*firefox下按钮去除焦点线*/
#formWrapper::-moz-focus-inner {
border: 0;
}
</style>
</head>
<body>
<form action="#" id="formWrapper">
<div class="formFiled clearfix">
<input class="search" placeholder="Search for CSS3,HTML5,JQuery..." required="" type="text">
<input class="btn submit" type="submit" value="go >>">
</div>
</form>
</body>
</html>


修改版效果图



内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航