简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  笔记-CSS3实现3D搜索输入框_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 11:38:341354browse

题外话

今天拜读了大漠的>发现里面这个按钮的实例挺赞的,稍微完善了一下原来例子.
去掉一些现在不用的前缀,补全了最终版的.clearfix,还有样式稍作修改~~

原版效果图:

预备知识
  • 基础布局知识
  • CSS2.1 && CSS3
    • 制作原理(CSS3特性)
    1. box-shadow ? 盒子阴影 -> 使用多层阴影达到立体效果
    2. box-image:linear-gradient -> 渐变效果实现….
    3. box-radius: ? 实现圆角效果
    4. text-shadow: ? 文本阴影
    5. 其他的都是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>

    修改版效果图

    版权声明：本文为博主原创文章，未经博主允许不得转载。

    Statement：
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Previous article：CSS画三角形集锦_html/css_WEB-ITnoseNext article：CSS3新属性注释及实例_html/css_WEB-ITnose

    Related articles

    See more