SysChat is a free online computer support community. Ask questions, share resources, contribute knowledge and discuss technology. Join our growing community to access all features. Register Now!

SysChat » Articles » Save On Download Times For You Website - Draw A Button Using The Latest HTML5 & CSS3

Articles

Computer and Technology articles

Comment
 
LinkBack Article Tools

Save On Download Times For You Website - Draw A Button Using The Latest HTML5 & CSS3

Published by mhookem
05-19-2012

Wi-Fi Save On Download Times For You Website - Draw A Button Using The Latest HTML5 & CSS3

Save on download times for your website, blog and Facebook page posts (You can use currently available HTML apps for your facebook page)

Below is a relatively tidy button rendered through your browser using only HTML (no images).

My Opinion On The Latest HTML5 & CSS Techniques: Drawing A Button HTML5 and CSS3 - No Images Used

If you consider how many buttons and menus you may need to use for your web page, it can all add up to a lot of bandwidth savings.

Here's the HTML:

HTML Code:
<div id="hLight" style="border-radius: 3px; box-shadow: 0px 0px 3px 2px #a3a3a3 inset; height: 52px; position: absolute; left:116px; top: 82px; width: 101px; z-index: 12;">
<div class="style3" height="50%" id="buttonHLTxt" style="font-size: 16px; font-weight: bold; left: 28px; position: absolute; top: 15px; z-index: 15;" width="20px">
<div align="left">
<a href="http://www.w3schools.com/html5/default.asp" style="color: black;" target="_blank">HTML</a>

</div>
</div>
</div>

<div id="button highlight" style="background-color: red; border: 2px solid #000000; box-shadow: 0px 0px 3px 3px #333333; height: 50px; left: 115px; position: absolute; top: 81px; width: 99px; z-index: 11;">

<canvas height="50" id="buttonHL" style="-moz-opacity: 0.5; filter: alpha(opacity=75); opacity: 0.8; position: absolute; top: 0px;left: -1px;" width="100"></canvas></div>

<script type="text/javascript">
<!--button highlight-->

var b=document.getElementById("buttonHL");

var btx=b.getContext("2d");

var brd=btx.createLinearGradient(0,0,0,40);

brd.addColorStop(0,"#000000");

brd.addColorStop(1,"#FFFFFF");

btx.fillStyle=brd;

btx.fillRect(00,00,100,50);
</script></div>
</div> 
This button has been drawn using the HTML5 gradient fill method. Unfortunately, there seems to be no support as yet, for rounding corners of the canvas.
So, I have used another div and applied an inset box-shadow to make it look like the corners are rounded.
However, there is some support for rounding the canvas corners when using the SVG gradient method.
This will be my next post.

For a more detailed look go to www.blueflux.eu/HTML5.html


Comment




Article Tools

Similar Threads
Article Article Starter Category Comments Last Post
How to Download an Entire Website for Offline Browsing DominicD How To 3 03-12-2011 11:04 PM

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is on
Smilies are on
[IMG] code is on
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are on



» Ads



1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54