Return to site

网站开发|网站建设-热门免费CSS3,jQuery和HTML5搜索表单示例和教程

网站开发

· 网站建设

搜索框是定义和增强网站建设用户界面的网站主要组件之一。毫无疑问,搜索表单是结​​构良好的网站中非常需要的组件,以增强用户的可用性。这个基本的用户界面元素通过帮助访问者轻松浏览网站以准确找到他们正在寻找的内容来实现各种目的。

这一行搜索组件通常可视地放置在导航栏上,或者有时隐藏在具有许多优点的常规图标下; 主要是节省了大量时间,使网站更加人性化,改善了导航和用户体验。而且,锦上添花的是,创建搜索框非常容易。

如果您是其网站上没有搜索框的网站所有者,或正在寻找一些更好的搜索表单来替换您的原始搜索框,那么这个列出的CSS3,HTML和jQuery最佳搜索表单脚本教程可能有助于服务你的目的。

在进入CSS3,HTML5和jQuery搜索表单的最佳教程/脚本列表之前,让我们知道为什么搜索表单在网站开发中非常重要。

在网站中搜索表单的好处简述:

  1. 网站变得更加互动和用户友好
  1. 增强用户体验
  1. 允许全站导航
  1. 通过轻松引导用户到所需的部分来简化搜索过程
  1. 节省时间和金钱

我已经编制了一份列表,列出了可以在线获得的最佳未付费CSS3,HTML5和jQuery搜索表单,可用于高端网站建设中从头开始轻松创建搜索框。下面部分表现方式,我们把代码教程公布出来,其余的如果有需要的,可以咨询我们。杭州网站建设嘉兴网站建设的伙伴们,我们可以上门服务。

1.令人惊叹的发光脉冲形式:

它是一个简单且集中对齐的搜索表单,其中包含文本区域(点击时会发光)和提交按钮。此搜索框的动画发光边框使其更具吸引力和互动性,因为只要文本输入到该框中即可立即发光。这种风格的盒子是用CSS和HTML开发的,它使用jQuery。在本教程中深入了解此搜索框的功能和设计。

html

<section class="webdesigntuts-workshop">
<form action="" method="">
<input type="search" placeholder="What are you looking for?">
<button>Search</button>
</form>
</section>

CSS

@import url(https://fonts.googleapis.com/css?family=Cabin:400);

.webdesigntuts-workshop {
background: #151515;
height: 100%;
position: absolute;
text-align: center;
width: 100%;
}

.webdesigntuts-workshop:before,
.webdesigntuts-workshop:after {
content: '';
display: block;
height: 1px;
left: 50%;
margin: 0 0 0 -400px;
position: absolute;
width: 800px;
}

.webdesigntuts-workshop:before {
background: #444;
background: linear-gradient(left, #151515, #444, #151515);
top: 192px;
}

.webdesigntuts-workshop:after {
background: #000;
background: linear-gradient(left, #151515, #000, #151515);
top: 191px;
}

.webdesigntuts-workshop form {
background: #111;
background: linear-gradient(#1b1b1b, #111);
border: 1px solid #000;
border-radius: 5px;
box-shadow: inset 0 0 0 1px #272727;
display: inline-block;
font-size: 0px;
margin: 150px auto 0;
padding: 20px;
position: relative;
z-index: 1;
}

.webdesigntuts-workshop input {
background: #222;
background: linear-gradient(#333, #222);
border: 1px solid #444;
border-radius: 5px 0 0 5px;
box-shadow: 0 2px 0 #000;
color: #888;
display: block;
float: left;
font-family: 'Cabin', helvetica, arial, sans-serif;
font-size: 13px;
font-weight: 400;
height: 40px;
margin: 0;
padding: 0 10px;
text-shadow: 0 -1px 0 #000;
width: 200px;
}

.ie .webdesigntuts-workshop input {
line-height: 40px;
}

.webdesigntuts-workshop input::-webkit-input-placeholder {
color: #888;
}

.webdesigntuts-workshop input:-moz-placeholder {
color: #888;
}

.webdesigntuts-workshop input:focus {
animation: glow 800ms ease-out infinite alternate;
background: #222922;
background: linear-gradient(#333933, #222922);
border-color: #393;
box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
color: #efe;
outline: none;
}

.webdesigntuts-workshop input:focus::-webkit-input-placeholder {
color: #efe;
}

.webdesigntuts-workshop input:focus:-moz-placeholder {
color: #efe;
}

.webdesigntuts-workshop button {
background: #222;
background: linear-gradient(#333, #222);
box-sizing: border-box;
border: 1px solid #444;
border-left-color: #000;
border-radius: 0 5px 5px 0;
box-shadow: 0 2px 0 #000;
color: #fff;
display: block;
float: left;
font-family: 'Cabin', helvetica, arial, sans-serif;
font-size: 13px;
font-weight: 400;
height: 40px;
line-height: 40px;
margin: 0;
padding: 0;
position: relative;
text-shadow: 0 -1px 0 #000;
width: 80px;
}

.webdesigntuts-workshop button:hover,
.webdesigntuts-workshop button:focus {
background: #292929;
background: linear-gradient(#393939, #292929);
color: #5f5;
outline: none;
}

.webdesigntuts-workshop button:active {
background: #292929;
background: linear-gradient(#393939, #292929);
box-shadow: 0 1px 0 #000, inset 1px 0 1px #222;
top: 1px;
}

@keyframes glow {
0% {
border-color: #393;
box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
}
}
 

2.最佳和美丽的CSS3搜索表单:

搜索框是网站中非常需要和最常用的元素。这个简单的搜索工具使您的网站美观和用户友好。它通过简化导航和探索来增强用户体验。您只需按照教程中提到的指导原则进行操作,并从您自己的头开始创建搜索框。

HTML

<form class="form-wrapper">
<input type="text" id="search" placeholder="Search for..." required>
<input type="submit" value="go" id="submit">
</form>

css

body {
background: #eee;
font: 12px Lucida sans, Arial, Helvetica, sans-serif;
color: #333;
text-align: center;
}

a {
color: #2A679F;
}
/*========*/

.form-wrapper {
background-color: #f6f6f6;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8));
background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: linear-gradient(top, #f6f6f6, #eae8e8);
border-color: #dedede #bababa #aaa #bababa;
border-style: solid;
border-width: 1px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
margin: 100px auto;
overflow: hidden;
padding: 8px;
width: 450px;
}

.form-wrapper #search {
border: 1px solid #CCC;
-webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #FFF;
-moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #FFF;
box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #999;
float: left;
font: 16px Lucida Sans, Trebuchet MS, Tahoma, sans-serif;
height: 20px;
padding: 10px;
width: 320px;
}

.form-wrapper #search:focus {
border-color: #aaa;
-webkit-box-shadow: 0 1px 1px #bbb inset;
-moz-box-shadow: 0 1px 1px #bbb inset;
box-shadow: 0 1px 1px #bbb inset;
outline: 0;
}

.form-wrapper #search:-moz-placeholder,
.form-wrapper #search:-ms-input-placeholder,
.form-wrapper #search::-webkit-input-placeholder {
color: #999;
font-weight: normal;
}

.form-wrapper #submit {
background-color: #0483a0;
background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));
background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);
background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);
background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);
background-image: -o-linear-gradient(top, #31b2c3, #0483a0);
background-image: linear-gradient(top, #31b2c3, #0483a0);
border: 1px solid #00748f;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #FFF;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #FFF;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #FFF;
color: #fafafa;
cursor: pointer;
height: 42px;
float: right;
font: 15px Arial, Helvetica;
padding: 0;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
width: 100px;
}

.form-wrapper #submit:hover,
.form-wrapper #submit:focus {
background-color: #31b2c3;
background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));
background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3);
background-image: -moz-linear-gradient(top, #0483a0, #31b2c3);
background-image: -ms-linear-gradient(top, #0483a0, #31b2c3);
background-image: -o-linear-gradient(top, #0483a0, #31b2c3);
background-image: linear-gradient(top, #0483a0, #31b2c3);
}

.form-wrapper #submit:active {
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
outline: 0;
}

.form-wrapper #submit::-moz-focus-inner {
border: 0;
}

3.可扩展的搜索栏解构:

这种优雅的搜索表单具有独特的可扩展功能。首先,屏幕上只显示一个搜索图标,但点击该图标时,会弹出扩展搜索栏。不仅如此,只要搜索栏留空,它会自动回到通常的放大镜图标。此外,请查看教程,以清楚地了解此CSS3和基于HTML的搜索表单的设计过程。

4.带有jQuery的Google Powered Search Form:

每个登录您网站的访问者都会提高您的业务排名,因此现在您有责任通过提供结构良好的全站搜索选项来增强这些用户的体验。因此,他们可以在一段时间内轻松探索和浏览网站。本教程将详细介绍使用惊人的设计和表单完成搜索工具设计的完整过程。

5.时尚的CSS3搜索框

从本教程中逐步学习,在您的网站上获得一个时尚的CSS3搜索框,以吸引更多的访问者在您的建网站上。这些时尚而有吸引力的搜索框可以帮助用户轻松地在您的网站上获得他们正在寻找的内容,从而节省时间并为您的企业和网站创建持久的良好印象。

6.“Loooong搜索栏”

完全符合其名称,只要单击搜索区域,此搜索框“Loooong搜索栏”就会自动展开。这样一个惊人的搜索栏是使用CSS3创建的,并没有使用任何脚本语言。通过像这样的功能元素为他们提供服务来阻止你的访问者。仍然对此搜索表单的功能和功能感到困惑,不用担心,请查看信息丰富的教程,了解如何在您的网站中创建“Loooong The Search Bar”。

7.使用On-focus SuggestionBox冷却CSS3 SearchBox

通过本教程中提到的几个简单步骤,获得带有特殊效果(如转场,圆角和箱形阴影)的样式化搜索框。这个全新的创意搜索框在搜索字段中附带预测文本功能。它显示所有已存档,建议和最近似的搜索结果。它通过使用关键字的首字母帮助用户快速搜索。

8.动画搜索表单

通过单击网页的放大镜图标输入文本后,它将以动画形式进一步展开。搜索栏的外观从简单变为极具吸引力和直观。您将从教程中更清楚地了解它,并详细介绍了构建动画搜索的过程。

9. Apple Inspired CSS3搜索框

这款苹果灵感搜索框是使用CSS3创建的,以满足苹果用户永不褪色的倾向。要像苹果设备一样个性化搜索体验,您可以查找此搜索栏教程以自行创建。

10. WebKit HTML5搜索工具

此WebKit HTML5搜索输入可让您在搜索框中添加时尚功能。一个简单的盒子变成了一个直观的搜索栏,通常表现得像一个用于站点范围导航的文本框。本教程包含更详细的信息来创建完美定制的CSS3和HTML5驱动的搜索工具。

11.可用的CSS3 Grooveshark搜索表单

受到流行音乐网站Grooveshark.com的启发,这个搜索工具使用CSS3构建,最后提交了一个提交图标。这个搜索框在网站开发人员和设计师当中非常普遍和需要。如果你正在寻找一个时尚的搜索栏,这可能是你的最后一步。每个人都会喜欢这款Grooveshark灵感的界面搜索框,它具有HTML和CSS的惊人功能。

12.清理搜索表单,CSS3 / jQuery + PSD

如果你想在其他网站上标记你的网站,那么你需要在你的网站中添加独特的元素。搜索框就是其中之一。如果您有自定义的搜索框,那么访问者当然会更容易浏览您的网站,这可能会让您的常客变成潜在的买家。此搜索框是内置的CSS3,具有简化的jQuery验证和一个有趣的功能,即如果用户未找到并填充搜索字段,则会出现弹出窗口

13.用户友好的CSS3搜索字段

为您的网站寻找一些很酷且鼓舞人心的搜索表单,查看本教程以使用HTML5和jQuery验证来构建令人惊叹的CSS3搜索框。此外,使用Modernizr的功能,您可以轻松地使您的搜索框与您的浏览器兼容

14.隐藏的CSS搜索框

获取逼真的方法来创建一个令人惊叹的搜索框,在文本和框的周围添加一些额外的阴影效果。看看教程,在搜索框中添加一些独特的效果,使用HTML5的功能和样式和CSS的属性效果。

15.有吸引力的搜索框

这个引人注目的搜索表单在其外观和展示方面独一无二,突出了网站的外观。搜索框下方的特殊分层效果一定会吸引游客。查看本教程以了解从头开始创建搜索表单的过程。

16.具有灵活属性的搜索框

这个灵活的搜索表单包含灵活的搜索输入字段和固定宽度和固定边框的提交按钮。这个令人惊叹的功能肯定会吸引访客注意你的网站。在本教程中获取详细信息,了解CSS3和HTML5的功能和编码如何协同工作。

All Posts
×

Almost done…

We just sent you an email. Please click the link in the email to confirm your subscription!

OKSubscriptions powered by Strikingly