笔记-CSS3实现3D搜索输入框_html/css_WEB-ITnose-html教學-PHP中文網

原版效果图:

修改版效果图

首頁

web前端

html教學

笔记-CSS3实现3D搜索输入框_html/css_WEB-ITnose

Jun 24, 2016 am 11:38 AM

题外话

今天拜读了大漠的>发现里面这个按钮的实例挺赞的,稍微完善了一下原来例子.
去掉一些现在不用的前缀,补全了最终版的.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>

登入後複製