Creating A Button Using HTML5 & CSS

With the growth of the internet, more mobile devices and the increased amount of traffic, there are some new methods such as css3 and HTML5 which can be used to minimise the amount of requests sent by the users' browser.

This, in turn, reduces the amount of information needed to be sent over both phone lines and mobile networks and increases the amount of work done by the users' computer.

All this adds up to less traffic to and from one user, less data usage for mobiles and leaves more bandwidth for other users as more and more people get connected to the internet.

Another concern arising from increased bandwidth is how able we are to maintain the integrity of the cables that are layed down across the sea bed of some of the biggest oceans like the Atlantic.

More traffic and increased bandwidth causes the cables to heat up, distort and possibly break.This will mean repair and replacement along the sea bed which takes a lot of time and money.

Using a lot of images is one of the obvious file size concerns when designing a website, so using gradients, drawing a few shapes and possibly drawing some text can save on webpage download time and bandwidth.I have created page as a test using HTML5, the latest css and some jquery.

Take a look at the source code ( go to the page and push 'control + U' together) to see the different technique needed for drawing within the same canvas, and the problems that arise by using this technique.
Such as the conflict between fill styles and the inability to apply rounded corners to any svg/HTML5 type gradients...(currently,working with the latest internet explorer).

I've also used some of the new css techniques, some of which don't yet work in all of the most popular browsers, however they all currently work in the latest Firefox and Chrome browsers.

I have tried to avoid using any images so as to try out some different gradient techniques using both the HTML5 canvas & java method aswell as the HTML5 svg method.However, in order to use the drawImage method I've had to.

One thing I like to use when designing a site is the use of drop shadows. This adds some depth and texture to any page.
By using the css box-shadow method to add drop shadows to images and layers, you can use an image without any shadow effect and have it applied to the image by the users' browser.This will reduce the size of the image file that needs to be sent.

I also love to use gradients, but instead of creating a rectangular image and applying gradients with my imaging software, I can now use either of the HTML5/Java or SVG techniques

Using these methods may seem a little tedious at first, but once you've got a few frequently used gradients perfected, you can just re-use them for any other site and change the colouring very easily.

Using transparency effects is a common method for applying some texture to a graphic .Laying a slightly transparent white (or any other colour) shape over the top of a black shape can create a button with some highlighting.

I would usually use an image created using my usual drawing software, however these can now be created using the latest HTML techniques.

This is the HTML/CSS needed for the button, you may need to adjust some of the positions to align everything, until I post a neater version.

<div id="hLight" style="border-radius: 3px; box-shadow: 0px 0px 3px 2px #a3a3a3 inset; height: 53px; left: 114px; position: relative; top: 23px; width: 101px; z-index: 12;">
<div class="style3" height="50%" id="buttonHLTxt" style="font-size: 16px; font-weight: bold; left: 28px; position: relative; top: 15px; z-index: 15;" width="20px">
<div align="left">
<a href="http://ww.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: 113px; position: relative; top: -48px; width: 99px; z-index: 11;">


<canvas height="50" id="buttonHL" style="-moz-opacity: 0.5; filter: alpha(opacity=75); opacity: 0.8; position: relative; top: -36px;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>

Unfortunately, I am unable to apply any rounded corners to this button using this method, which would bring you right back to using an image!! This also applies to the svg gradient fill technique.( currently tested and working with the latest internet explorer)

This is why the entire page gradient fill cannot be rounded off...big potential bandwidth saving and a common personal page design technique has just bitten the dust!

(N.B. I have now seen an svg gradient fill and rounded corners using css working on Internet Explorer and Google Chrome.)

However, it is possible to use the latest webkit for grading the page,as with the main page background. As far as I'm aware this only works with Googles' Chrome, this method has been used to apply it to the 'inside' layer.

I have also used some of the opacity techniques in the main title, the outer glow is created by applying a css box-shadow at co-ordinates x,y (0,0)/

The title text has been drawn using the fillText method.

There's still more to be added to my dedicated HTML5/CSS web page, as well as this blog. Such as some more advanced animation techniques like making a div follow a certain path across the page.

Conclusions so far: Some methods are available to use that work in the most popular browsers, it's well worth while taking the time to start implementing some of these methods and save bandwidth and download times for everyone.

Thanks for reading..

Martin
BlueFlux Graphic Design