65.9K
CodeProject 正在变化。 阅读更多。
Home

HTML5/CSS3 图形增强：按钮、输入框

DrABELL
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.86/5 (96投票s)

2011年2月14日

CPOL

3分钟阅读

viewsIcon

863957

downloadIcon

4725

通过纯 CSS3 对 HTML5 网页元素进行美化；无需图像文件

引言

 

本文描述的解决方案兼具实用性和教学性。这个流行的电气工程计算器 VOLTA 演示了 HTML5/CSS3 样式技术，它不需要任何图形文件，如.jpg 或 .png 等。所有美化增强，比如

  • 圆角
  • 颜色渐变（特别是 color-stop 属性）
  • 边框
  • 阴影

都是完全通过 CSS3 样式实现的，从而减少了数字足迹，并加快了网页加载速度。以下演示和代码片段展示了上述 HTML5/CSS3 样式技术应用于在线计算器的核心元素，即 input、button 和 div 元素。该解决方案实现了客户端 jQuery 脚本，使其更具通用性，能够在离线独立模式下运行（无需互联网连接）。

演示截图

以下是使用上述 HTML5/CSS3 图形增强的在线工程计算器的示例截图（示例图像属于原始 VOLTA-2011 和后续版本，包括 VOLTA-2013 等）。

计算器 VOLTA-2013，风景布局，适用于 16:9 显示宽高比

 

计算器 VOLTA-2013，风景布局，通过 CSS3 样式实现圆角

另一个对应于“浅色”背景（动态加载 CSS3）的屏幕截图如下

 

具有“浅色”背景的计算器 VOLTA CSS3 样式

适用于智能手机，垂直扩展版本的电气工程计算器，显示标准 E 系列 (E24)

工程计算器，带有动态扩展面板，显示额外的工程和科学功能。

美观的 HTML5 按钮元素

注意：所有美化增强都是通过纯 HTML5/CSS3 样式实现的；项目不使用任何图形/图像文件。

列表 1. 通过纯 CSS (无图形文件) 对 HTML 5 按钮和输入元素进行样式设置
<!DOCTYPE HTML>
<html>
 <head>
    <title>AESTHETIC BUTTONS | HTML5, CSS3</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Author" content="Alexander Bell" />
    <meta http-equiv="Copyright" content="2011 Alexander Bell" />
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="Cache-control" content="no-cache">
    <meta name="Robots" content="all" />
    <meta name="Distribution" content="global" />
    <meta name="Keywords" content="HTML5, CSS3, Buttons, CalculatorS " />
    <meta name="Description" content ="Aesthetic buttons with Gradient and Rounded Corners, HTML5, CSS3" />
   <!--CSS-->
   <style type="text/css">
    input
    {
        width:80px;
        height: 60px;
        line-height:60px;
        vertical-align:middle;
        margin: 0px;
        padding: 0px;
        cursor: pointer;
        cursor: hand;
        font-family: Arial, Tahoma, Verdana, Calibri;
        font-size: 28pt;
        text-align: center;
        background:#404040;
        border: 2px solid #ababab;
        color: #dadada;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
    }
    input:hover  { font-weight:bold;}
    input:active { border: 2px; }
 
    .btnType1{
        background: -moz-linear-gradient(top, #707070, #505050 48%, #bababa 50%, #303030 52%, #101010);
        background: -webkit-gradient(linear, center top, center bottom, from(#707070), color-stop(0.48, #505050), color-stop(0.5, #bababa ), color-stop(0.52, #303030), to(#101010));
    }
    .btnType2{
        background: -moz-linear-gradient(top, #dadada, #505050 5%, #bababa 50%, #bababa 50%, #303030 52%, #101010);
        background: -webkit-gradient(linear, center top, center bottom, from(#707070), color-stop(0.48, #505050), color-stop(0.5, #bababa ), color-stop(0.52, #303030), to(#101010));
    }
    .btnType3{
        background: -moz-linear-gradient(top, #dadada, #707070 5%, #515151 50%, #bababa 50%, #303030 52%, #101010);
        background: -webkit-gradient(linear, center top, center bottom, from(#707070), color-stop(0.48, #505050), color-stop(0.5, #bababa ), color-stop(0.52, #303030), to(#101010));
    }
    .btnType4{
       color:#505050;
       background: -moz-linear-gradient(top, #f0f0f0, #bababa 10%, #cacaca 46%, #909090 48%, #dadada 52%, #cacaca 54%, #cacaca 90%, #ababab);
       background: -webkit-gradient(linear, center top, center bottom, from(#f0f0f0), color-stop(0.1, #bababa ), color-stop(0.46, #cacaca), color-stop(0.48, #909090), color-stop(0.52, #dadada ), color-stop(0.54, #cacaca), color-stop(0.90, #cacaca), to(#ababab));
    }
    .btnType5{
        color:#505050;
        background: -moz-linear-gradient(top, #f0f0f0, #cacaca 48%, #707070 50%, #cacaca 52%, #fafafa);
        background: -webkit-gradient(linear, center top, center bottom, from(#f0f0f0), color-stop(0.48, #cacaca), color-stop(0.5, #707070 ), color-stop(0.52, #cacaca), to(#fafafa));
    }
    .divClear { clear:both;}
   </style>
  </head>
  <body>
    <input type ="button" button value="A" class="btnType1" />
    <input type ="button" button value="L" class="btnType1" />
    <input type ="button" button value="E" class="btnType1" />
    <input type ="button" button value="X" class="btnType1" />
    <input type ="button" button value="A" class="btnType1" />
    <input type ="button" button value="N" class="btnType1" />
    <input type ="button" button value="D" class="btnType1" />
    <input type ="button" button value="E" class="btnType1" />
    <input type ="button" button value="R" class="btnType1" />
    <div class="divClear"></div>
    <input type ="button" button value="B" class="btnType2" />
    <input type ="button" button value="E" class="btnType2" />
    <input type ="button" button value="L" class="btnType3" />
    <input type ="button" button value="L" class="btnType3" />
    <input type ="button" button value="2" class="btnType4" />
    <input type ="button" button value="0" class="btnType4" />
    <input type ="button" button value="1" class="btnType5" />
    <input type ="button" button value="1" class="btnType5" />
 </body>
</html>
设计说明

可以通过使用列表 2 中显示的以下 CSS 代码块来实现盒子阴影效果

列表 2. 使用 CSS 实现盒子阴影效果
/* add shadows */
-moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
box-shadow: 5px 5px 10px rgba(0,0,0,0.3);

添加工具提示。可以通过使用 HTML 元素 "abbr" 或 "acronym" 向按钮添加上下文相关的帮助（也称为工具提示）来实现进一步的增强。在这种情况下，不需要任何 Javascript；弹出文本将对应于 abbr 标签的 title 属性。列表 3 展示了此功能的示例实现，适用于 Calculator Volta 2011

列表 3
<nav>
    <menu id="menu1" class="oscMenu">
    <li>
        <a href="http://www.webinfocentral.com" title="Return to the front page">HOME</a>
    </li>
    <li id="active">
        <a href="http://webinfocentral.com/VOLTA/Manual.aspx" title="Read Instruction online">INSTRUCTION</a>
    </li>
    </menu>
</nav>

关注点

浏览器兼容性

在线计算器 Volta 兼容所有支持 HTML5、CSS3 和 jQuery 版本 2.0x 的主流 Web 浏览器

  • Mozilla FireFox v.23+
  • Google Chrome v.28+
  • Safari v.6+
  • IE9+
  • Opera v.15+

桌面版本

第一个工程计算器软件桌面版本是作为比赛提交，通过英特尔公司在 Ultrabooks 应用创新大赛 (AIC 2012) 期间提供的直接转换工具（HTML5 转换为 Windows 应用程序）创建的。它在英特尔的在线应用商店中放置了一段时间。

通过使用 Microsoft .NET framework (WPF/XAML/C#) 在 Visual Studio 2010 中完全重新编程应用程序，获得了更好的结果。

Engineering Calculator VOLTA-814D

演示截图：适用于 Windows 的 Calculator Volta-814D 实现了无边框 WPF 窗口，并通过 XAML 进行图形增强，类似于使用 HTML5/CSS3 的原始在线版本

历史

  • 2010 年 12 月：科学计算器 ZENO-5000 已发布（HTML5 Web 应用）
  • 2011 年 2 月：在线电气工程计算器 Volta-2011 已发布 (HTML5)
  • 2012 年 3 月：计算器 VOLTA-2011 已在新发布的 Apple iPad 上进行测试
  • 2012 年 10 月：计算器 Volta-2013 提交至 AppInnovation 大赛（应用提交获奖者）
  • 2013 年 1 月：适用于 Windows 的计算器 Volta-814D 已发布
  • 2013 年 4 月：在线计算器 VOLTA 已在 Azure 平台 [7] 上进行测试

参考文献

  1. 科学计算器 ZENO-5000
© . All rights reserved.