bc-vnt Posted October 5, 2012 Report Posted October 5, 2012 (edited) IntroductionSuggested 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 (NO IMAGE FILES USED): Browser compatibilityMajor 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)Note: the directive <!DOCTYPE HTML> at the top of the page code is quite important to ensure that the page will be rendered properly in IE9. 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 NotesThe 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 InterestAnnouncement Updated version of Engineering Calculator VOLTA-2012 is currently under development. See the project submission to "Ultrabooks" contest.Calculator VOLTA-2011 tested on new Apple iPadRead the entire article on Examiner: New iPad: notes from NY Apple store - New York online learning | Examiner.comReferences1 : Online Engineering Calculator Volta-2011 - New York online learning | Examiner.com2 : Online Engineering Calculator Volta-2011, Design Notes - New York online learning | Examiner.com3 : Scientific Calculator ZENO-5000 - CodeProjecthttp://www.codeproject.com/Tips/157607/HTML-5-CSS3-aesthetic-enhancement-buttons-input-bo Edited October 5, 2012 by bc-vnt Quote
