css3构建漂亮的搜索表单

现在html5和css3发展如火如荼,RIA之家将会多出些相关教程。

今天发个开山贴,原文:http://www.webdesignerwall.com/tutorials/beautiful-css3-search-form/

这个教程很简单,主要是利用了css3中二个应用最为广泛的知识点:圆角和阴影。

css3中的圆角:

在css3中只要把圆角的弧度制设置成100px,宽度和高度也为100px,你就可以创建一个半径为100px的圆形,比如:

  1. .circle {
  2.     width: 100px;
  3.     height: 100px;
  4.     -moz-border-radius: 100px;
  5.     -webkit-border-radius: 100px;
  6. }

css3中的阴影:
  1. .inset {
  2.    -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
  3.    -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
  4.    box-shadow: inset 0 3px 8px rgba(0,0,0,.24);
  5. }

只有Chrome 4 和 Firefox 3.5及其以上版本才支持。

完整demo:

演示:http://www.webdesignerwall.com/demo/css3-search-form.html
表单的html代码:

  1. <form class="searchform">
  2.     <input class="searchfield" type="text" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" />
  3.     <input class="searchbutton" type="button" value="Go" />
  4. </form>

css代码:

  1. .searchform {
  2.     display: inline-block;
  3.     zoom: 1; /* ie7 hack for display:inline-block */
  4.     *display: inline;
  5.     border: solid 1px #d2d2d2;
  6.     padding: 3px 5px;
  7.    
  8.     -webkit-border-radius: 2em;
  9.     -moz-border-radius: 2em;
  10.     border-radius: 2em;
  11.  
  12.     -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
  13.     -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
  14.     box-shadow: 0 1px 0px rgba(0,0,0,.1);
  15.  
  16.     background: #f1f1f1;
  17.     background: -webkit-gradient(linear, left topleft bottom, from(#fff), to(#ededed));
  18.     background: -moz-linear-gradient(top,  #fff,  #ededed);
  19.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7*/
  20.     -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
  21. }
  22. .searchform input {
  23.     font: normal 12px/100% Arial, Helvetica, sans-serif;
  24. }
  25. .searchform .searchfield {
  26.     background: #fff;
  27.     padding: 6px 6px 6px 8px;
  28.     width: 202px;
  29.     border: solid 1px #bcbbbb;
  30.     outline: none;
  31.  
  32.     -webkit-border-radius: 2em;
  33.     -moz-border-radius: 2em;
  34.     border-radius: 2em;
  35.  
  36.     -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
  37.     -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
  38.     box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
  39. }
  40. .searchform .searchbutton {
  41.     color: #fff;
  42.     border: solid 1px #494949;
  43.     font-size: 11px;
  44.     height: 27px;
  45.     width: 27px;
  46.     text-shadow: 0 1px 1px rgba(0,0,0,.6);
  47.  
  48.     -webkit-border-radius: 2em;
  49.     -moz-border-radius: 2em;
  50.     border-radius: 2em;
  51.  
  52.     background: #5f5f5f;
  53.     background: -webkit-gradient(linear, left topleft bottom, from(#9e9e9e), to(#454545));
  54.     background: -moz-linear-gradient(top,  #9e9e9e,  #454545);
  55.     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7*/
  56.     -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */
  57. }

这里有个不常用但其实很实用的属性,也推荐大家多了解下:display: inline-block;
关于inline-block的知识,推荐大家看以下二篇文章:

  1. display:inline-block的深入理解
  2. display:inline-block的应用两例
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Sure! 首先,我们需要创建一个HTML文件来构建登录页面的基本结构,如下所示: ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login Page</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>Login</h1> <form action="" method="post"> <label for="username">Username:</label> <input type="text" name="username" id="username"> <label for="password">Password:</label> <input type="password" name="password" id="password"> <input type="submit" value="Login"> <a href="#">Forgot Password</a> </form> </div> </body> </html> ``` 在这里,我们创建了一个包含登录表单的 `<div>` 标签。现在,我们将使用 CSS 来美化这个表单。我们首先定义全局样式,包括页面背景,字体和一些通用的样式: ``` body { background-color: #f6f6f6; font-family: 'Open Sans', sans-serif; } h1 { text-align: center; color: #444444; } .container { background-color: #ffffff; padding: 20px; margin: auto; width: 400px; border-radius: 5px; box-shadow: 0px 0px 10px 0px #666666; } ``` 这样,我们创建了一个白色背景的容器,并为其添加了一些阴影。接下来,我们为输入域和按钮添加样式: ``` form { margin-top: 20px; } label { display: block; margin-bottom: 5px; font-weight: bold; } input[type="text"], input[type="password"] { width: 100%; padding: 10px; border: 1px solid #cccccc; border-radius: 3px; margin-bottom: 10px; box-sizing: border-box; } input[type="submit"] { background-color: #4CAF50; border: none; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin-top: 10px; cursor: pointer; border-radius: 3px; width: 100%; } input[type="submit"]:hover { background-color: #3e8e41; } ``` 在这里,我们为标签和输入域定义了一些通用样式。此外,我们为登录按钮应用了一些特殊样式,如绿色背景和阴影。 最后,我们可能还需要添加一些其他的修饰,比如在忘记密码下添加下划线。这是 CSS 代码的最后一部分: ``` a { color: #666666; text-decoration: none; } a:hover { text-decoration: underline; } ``` 完成了!这就是一个漂亮的登录页面所需要的所有样式。您可以在同一目录下创建名为 style.css 的文件,并将所有上述 CSS 代码都复制到其中。最终效果看起来就像这样: ![login-page](https://pic3.zhimg.com/v2-3a7e3d3a8f25903e36b14f09822a1f2a_b.jpg)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值