HTML5/CSS3 graphic enhancement: buttons, inputs

Introduction

Suggested technique does not require any graphic files like .jpg or .png, etc. All aesthetic enhancements, like: rounded corners, color gradients, borders and shadows are achieved exclusively via CSS3 styling, thus resulting in very small digital footprint and fast web page load. Following code snippet demonstrates novel styling technique using HTML5/CSS3 advanced features: rounded corners, gradients (in particular, color-stop property), shadows applicable to HTML5 elements, in particular, input, button and div elements.

Demo

Working demo of HTML5/CSS3 enhanced web application is available at:

Engineering Calculator VOLTA-2011[^].

Sample screenshot of online Engineering Calculator VOLTA-2011 utilizing the discussed HTML 5 graphic features follows:

Aesthetic HTML5 Button elements

All aesthetic enhancements are achieved via CSS3 styling; project does not use any graphic.

Listing 1

<!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>

Design Notes

The shadow effect could be implemented by the following CSS code block:

Listing 2

/* 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);

Adding Tooltips. Further enhancement could be achieved by adding the context-sensitive help (a.k.a. Tooltips) to the buttons by using HTML elements "abbr" or "acronym". In this case no any Javascript is needed; the pop-up text will correspond to the title attribute of the abbr tag. Listing 3 demonstrates the sample implementation of this feature, pertinent to the Calculator Volta 2011

Listing 3

<nav>
    <menu id="menu1" class="oscMenu">
    <li>
        <abbr title="Return to the front page"><a href="http://www.webinfocentral.com/math/Calculators.aspx">HOME</a></abbr>
    </li>
    <li id="active">
        <abbr title="Read Instruction online"><a href="http://exm.nr/ExmVolt" target="_blank">INSTRUCTION</a></abbr>
    </li>
    <li>
 
        <abbr title="Read online Documentation"><a href="http://exm.nr/VoltDN" target="_blank">DOC</a></abbr>
    </li>
    </menu>
</nav>

Points of Interest

Browser compatibility

Major Web Browsers support new HTML 5/CSS3 features, though recently released Internet Explorer 9.0 (IE9) has limited capability of rendering color gradients and some other CSS attributes (see the following feature matrix):

Rounded corners (works in FF/Chrome/Safari/IE9)
Box shadows (works in FF/Chrome/Safari/IE9)
Color gradients (works in FF/Chrome/Safari)
Text shadows (works in FF/Chrome/Safari)
Text rotation (works in FF/Chrome/Safari)

Calculator VOLTA-2011 tested on new Apple iPad

Read the entire article on Examiner: New iPad 3 is here: quick notes from Apple store on Fifth (Mar 17, 2012)

More reading on this topic is available online at [1...3].

Announcement

Updated version of Engineering Calculator VOLTA-2012 is currently under development. See the project submission to "Ultrabooks" contest.

References

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

DrABELL

Chief Technology Officer Infosoft Int'l

United States

Member

Follow on Twitter

Dr. A. Bell has 20+ years of SW/EE experience, published 200+ tech articles and authored 37 inventions; Win/Web veteran, currently focused on: HTML5, CSS3, Javascript, jQuery, SQL, Windows 8, .NET, C#, WPF, Ultrabooks, Mobile. Developed popular Silverlight Media Player, 3 Fractions Calculator and best YouTube API for ASP.NET (#1 Goog). Sample pubs/projects:

Article Top

Poor

Excellent

Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Aesthetic enhancement of HTML5 web elements via pure CSS3; no image files required

Type	Tip/Trick
Licence	CPOL
First Posted	14 Feb 2011
Views	106,280
Bookmarked	64 times

JavascriptjQuery
Web-DevelopmentCSS3, +