Click here to Skip to main content
Click here to Skip to main content

HTML5/CSS3 graphic enhancement: buttons, inputs

, 27 Oct 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
Aesthetic enhancement of HTML5 web elements via pure CSS3; no image files required

DEMO

You can download and install a FREE Trial copy of the Engineering Calculator VOLTA-814 (latest version 8.14.0.2)

Full retail software package is available at www.ShopDigit.com : now only $4.99 (50% OFF MSRP)

Engineering Calculator VOLTA-814D

Demo screenshot: Calculator Volta-814D for Windows implements border-less WPF window with graphic enhancements via XAML, similar to the original online version utilizing HTML5/CSS3

Introduction

Suggested HTML5 technique does not require any graphic files like .jpg or .png, etc. All aesthetic enhancements, like:

  • rounded corners
  • color gradients
  • borders
  • shadows

are all achieved exclusively via CSS3 styling, resulting in very small digital footprint and fast web page load. Following Demo and sample code snippets demonstrate 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.

Online Demo

Working DEMO is available at: Engineering Calculator VOLTA-2011.

Following are sample screenshots of online Engineering Calculator VOLTA-2011 utilizing aforementioned HTML5/CSS3 graphic enhancements:

Engineering Calculator VOLTA-2011

Fig. 1. Engineering Calculator VOLTA-2011, portrait layout

 

Another version of Calculator VOLTA-2013 adapted for "modern" 16:9 display aspect ratio is shown below in Fig.2:

Fig. 2. Calculator VOLTA-2013, landscape layout adapted for 16:9 display aspect ratio

Dynamic switch to another CSS3 file produced a rounded-corner effect as shown below in Fig.3:

Fig. 3. Calculator VOLTA-2013, landscape layout, rounded corners achieved via CSS3 styling

Another screenshot corresponding to the "light" background (dynamically loaded CSS3) follows:

Fig. 4. Calculator VOLTA-2013, "light" background 

Aesthetic HTML5 Button elements

Note: All aesthetic enhancements are achieved via pure HTML5/CSS3 styling; project does not use any graphic/image files.

Listing 1. HTML 5 Button and Input elements styling via pure CSS (no graphical files)
<!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 box shadow effect could be achieved by using the following CSS code block shown in Listing 2:

Listing 2. Box Shadow effect using 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);

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 

Online Calculator Volta is compatible with all major Web Browsers that support HTML5, CSS3 and jQuery version(s) 2.0x

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

Desktop version

The first desktop version of the Calculator was using a direct conversion tool (by Intel) of its HTML5 into Windows application. Better results were achieved by re-programming the app using WPF/XAML in Visual Studio 2010. The resulting commercial-grade application is shown in the Demo screenshot earlier in this article.

History

  • Dec 2010: Scientific Calculator ZENO-5000 has been released (HTML5 web app)
  • Feb 2011: Online Electrical Engineering Calculator Volta-2011 has been released  (HTML5)
  • Mar 2012: Calculator VOLTA-2011 has been tested on newly released Apple iPad
  • Oct 2012: Calculator Volta-2013 submitted to AppInnovation contest (app submission winner)
  • Jan 2013: Calculator Volta-814D for Windows has been released
  • Apr 2013: Online Calculator VOLTA was tested on Azure platform  [7]

References

  1. Alexander Bell, Engineering Calculator Volta-814D (quick start)[^]
  2. Alexander Bell, Engineering Calculator Volta-814D, User Manual[^]
  3. Alexander Bell, Online Engineering Calculator Volta-2011, User Manual[^]
  4. Alexander Bell, Online Engineering Calculator Volta-2011, Design Notes[^]
  5. Alexander Bell, Scientific Calculator ZENO-5000, Code Project[^]  
  6. New iPad: quick notes from Apple store on Fifth (Mar 17, 2012) 
  7. Alexander Bell, Azure-Volta 2013 Engineering Calculator is up and running! 

License

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

Share

About the Author

DrABELL
President Infosoft International Inc
United States United States
Dr. A. Bell has 20+ years of Software and Electrical Engineering experience: Win/Web veteran published 300+ articles and authored 37 inventions, currently focused on: Windows 7/8, HTML5, CSS3, jQuery, .NET, ASP.NET, WPF, C#, SQL, 'Big Data', AI, Speech Technology and Mobile apps. He participated in App Innovation Contest (AIC 2102/2013) with several winning submissions. Sample pubs follow:
  1. Edumatter M12: School Math Calculators and Equation Solvers (contest winner)
  2. Engineering Calculator VOLTA-2013 (contest winner)
  3. HTML5 Best Practices: Table formatting via CSS3
  4. Engineering Calculator VOLTA-814D
  5. SQL generates large data sequence
  6. Aggregate Product function extends SQL
  7. Watch Your Mouse!
  8. Top-100 Digital Cameras
  9. WebTV Project: Embedded YouTube Player (Goog #1 YouTube API for ASP.NET)
Dr. Bell is personally credited for 10+ Enterprise level projects w/total code base exceeding 250k lines.
Follow on   Twitter

Comments and Discussions

 
General5 Votes Pinmembersobo12329-Oct-14 7:00 
GeneralRe: 5 Votes PinprofessionalDrABELL29-Oct-14 17:31 
GeneralMy vote is 5 PinmemberSoma Subramanian5-Sep-14 23:51 
GeneralRe: My vote is 5 PinprofessionalDrABELL6-Sep-14 3:03 
GeneralMy vote of 5 PinmemberHumayun Kabir Mamun5-Sep-14 22:00 
GeneralRe: My vote of 5 PinprofessionalDrABELL6-Sep-14 3:03 
QuestionVery Nice! PinmemberPaul Conrad30-Aug-14 7:42 
AnswerRe: Very Nice! PinprofessionalDrABELL30-Aug-14 8:31 
BugAlmost perfect PinmemberMember 986188819-Aug-14 21:31 
GeneralRe: Almost perfect PinprofessionalDrABELL30-Aug-14 8:31 
GeneralMy vote of 5 PinmemberRene Pilon15-Sep-13 11:36 
Wild!
GeneralRe: My vote of 5 PinprofessionalDrABELL15-Sep-13 13:19 
GeneralMy vote of 5 PinprofessionalRanjan.D27-Aug-13 7:53 
GeneralRe: My vote of 5 PinprofessionalDrABELL27-Aug-13 9:41 
GeneralMy vote of 5 PinprofessionalAmir Mohammad Nasrollahi20-Aug-13 7:22 
GeneralRe: My vote of 5 PinprofessionalDrABELL20-Aug-13 7:50 
GeneralMy vote of 5 PinmemberSachin_Sharma(10)17-Aug-13 11:32 
GeneralRe: My vote of 5 PinprofessionalDrABELL17-Aug-13 15:06 
GeneralMy vote of 5 PinprofessionalBrian A Stephens27-Jun-13 7:38 
GeneralRe: My vote of 5 PinmemberDrABELL27-Jun-13 14:30 
GeneralMy vote of 5 PinmemberJan Zumwalt15-Jun-13 17:33 
GeneralRe: My vote of 5 PinmemberDrABELL16-Jun-13 8:37 
GeneralMy vote of 5 PinmemberLoRdPMN7-Jun-13 8:23 
GeneralRe: My vote of 5 PinmemberDrABELL7-Jun-13 11:46 
GeneralMy vote of 5 PinmemberAmitosh Swain5-Jun-13 7:07 
GeneralRe: My vote of 5 PinmemberDrABELL5-Jun-13 9:25 
GeneralMy vote of 5 Pinmembersravani.v5-Oct-12 1:04 
GeneralRe: My vote of 5 PinmemberDrABELL5-Oct-12 3:16 
GeneralReason for my vote of 5 nice article Pinmembernikhi _singh13-Feb-12 19:09 
GeneralRe: Many thanks for your note/vote! PinmemberDrABELL13-Feb-12 19:39 
GeneralReason for my vote of 5 cool PinmemberJucer10-Feb-12 16:19 
GeneralRe: Reason for my vote of 5cool PinmemberDrABELL4-Oct-12 14:11 
GeneralReason for my vote of 5 so easy, so simple and clean Pinmemberitaitai1-Nov-11 23:25 
GeneralRe: Many thanks! PinmemberDrABELL2-Nov-11 5:38 
GeneralImpressive design :) Pinmemberkiran dangar30-Sep-11 4:06 
GeneralRe: Thanks! PinmemberDrABELL30-Sep-11 16:53 
GeneralReason for my vote of 5 Very nice! PinmemberSpliffa27-Sep-11 5:44 
GeneralRe: Thank you! PinmemberDrABELL27-Sep-11 6:20 
GeneralReason for my vote of 1 to good Pinmemberbhupatpatel17-Sep-11 9:30 
GeneralRe: Frankly speaking, it's a bit confusing: why did you rate my ... [modified] PinmemberDrABELL17-Sep-11 10:49 
GeneralReason for my vote of 5 Nice graphics. Pinmemberjknickel13-Sep-11 21:51 
GeneralRe: Many Thanks! PinmemberDrABELL14-Sep-11 2:28 
GeneralReason for my vote of 5 very helpful Pinmemberitaitai13-Sep-11 20:34 
GeneralRe: Thank you! PinmemberDrABELL14-Sep-11 2:27 
GeneralSorry. Clicked the wrong place, in error. Still. A great p... PinmemberSteve Stark12-Sep-11 16:48 
GeneralRe: Thanks! :) PinmemberDrABELL13-Sep-11 3:15 
GeneralReason for my vote of 5 Nice looking calculator, thanks for ... PinmemberBrianBissell6-Sep-11 6:31 
GeneralRe: You are very welcome, Brian! Regards - AB PinmemberDrABELL6-Sep-11 8:08 
GeneralReason for my vote of 5 Amazing, very-very good article DrAB... PinmemberKurniawan Prasetyo5-Sep-11 22:32 
GeneralRe: Many Thanks! PinmemberDrABELL6-Sep-11 1:57 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.141220.1 | Last Updated 27 Oct 2014
Article Copyright 2011 by DrABELL
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid