The Latest HTML5 & CSS3 Techniques: 2012

Sunday, 28 October 2012

SVG Animations - An SVG Animated Button - HTML5!

In this post I'm going to demonstrate some of the new HTML5 techniques, using SVG animations, and integrating them into a nice themed button.

SVG animations aren't fully supported in all browsers yet, for now it's another technique that you can experiment with but can't really use for a work project for example. Unless of course you don't mind building several different versions of the same page and re-directing appropriately for each browser.

Below are two screenshots that I've just captured while hovering over the button. There are some basic circles that have a blur filter applied to them, along with some SVG animated scaling and opacity settings.
There's also a small circle that you can see in the bottom half of the button that moves up, down and across as it follows a path from left to right.

Demo Here.. ( you 'll have to use the latest version of Googles' Chrome browser to see everything working )

This is all done using the latest stuff. I've been visiting the w3.org site to get a better grasp of what's possible so I'd suggest you do the same if you're not sure what's happening.

And this time, rather than post all of the html here, just visit the demo page and view the source code. Be careful though, if you're going to copy it into your own html editor to play around with, it's very easy to mess it up if you change the wrong thing!

I'd suggest you just change the colour changes first, or the timing settings. Of course if you're confident enough, you can study what I've made an play away!

Try increasing the size of the divs and you can make a nice animated page background, which is where I'll be headed next.
If you've been reading up on SVG animation techniques then you can perhaps play around with some of other settings.

Below are a couple of examples. The original settings that I've used here can be found on the demo pages' source code starting at line 82 :-

<div id="Scalex4">
<svg >
<defs>/*This is applying the blur filter*/
<filter height="200%" width="200%" y="-50%" x="-50%" id="svg_1_blur">
<feGaussianBlur stdDeviation="1.4" in="SourceGraphic"/>
</filter>
</defs>
<g>

/*This places the circle within the div at a certain position and are x and y coordinates. I've used the transform="translate" settings to position it, as it seems easier to use the cartesian coordinate system than the standard cy (circle y) and cx (circle x) settings. Try using both for yourself and see what happens.*/

<circle transform="translate(20, 0)" filter="url(#svg_1_blur)"r="5" cy="0" cx="0" stroke-width="0" stroke="#000000" />

Here are the animation settings.

/*The first sets the opacity of the circle to 0 so that the circle isn't showing once the page has been loaded.*/

<animate attributeName="opacity" attributeType="XML"
values="0;"
dur="100ms"
fill="freeze"
repeatCount="1"/>

/*This animates the colour of the circle as the mouse rolls over the div using red, green, blue and alpha values.*/

<animateColor attributeName="fill" attributeType="XML"
values="rgba(255,0,0,1); rgba(255,80,0,0) dur="1800ms"
repeatCount="indefinite"
begin="anim.mouseover"
end="anim.mouseout"/>

/*This changes the opacity value from the value that was set above to 1, and then back to 0 as the mouse rolls over the div.*/

<animate attributeName="opacity" attributeType="XML"
values="0;1;0;"
dur="1800ms"
begin="anim.mouseover"
end="anim.mouseout"
repeatCount="indefinite"/>

/*This scales the circle by a factor of 4.*/

<animateTransform attributeName="transform" attributeType="XML"
type="scale"
from="1" to="4"
dur="1800ms"
begin="anim.mouseover"
end="anim.mouseout"
repeatCount="indefinite"/>
</circle>
</g>
</svg>
</div>

This piece of code is actually taken from a more complete post that I've nearly finished that shows the differences between CSS3, HTML5, SVG and Flash to create themed buttons.

Have a nice day!! :)

Friday, 19 October 2012

Making A Notepad Effect Using CSS - Re-size When You Like

I've seen a couple of different examples of making a notepad using css before but I think the one that I've made is the easiest to work with when you want to re-size it to fit your project.

The ones that I've seen are made by adding css styles to a list. I've decided to use a table instead because it seems to me to be easier to work with.

You can actually let the table cell heights re-size for you when you decide on what size font to use as you're typing....nice!

This is the only thing you need to remember for each new line of text. Instead of hitting 'Enter' just pick the table row you're already typing into and split it into however many lines you need.

I've also set the border-bottom to a dotted line just to give it a more authentic feel, kind of like a perforated line or a neat tear that you get when you've folded the paper.

The font I've used is from Adobes' font tool, you'll need to add the source for the javascript file.

Place this just before the closing </head> tag if you want to use it, it's used to make it look like somebodys' handwriting:

<script src="http://use.edgefonts.net/lobster-two.js></script>

After creating the css for your page, all you have to do is add the table and assign the appropriate css classes to it!

Here's the HTML:

<html>
<head>
<style type="text/css">

</style>
</head>
<body>
<table width="40%" border="0" cellpadding="0" cellspacing="0" class="testimonial">
<tr>
<td class="notes"> </td>
</tr>
<tr>
<td class="notes"> </td>
</tr>
<tr>
<td class="notes"> </td>
</tr>
</table>
</body>
</html>

If you want, you can place the table inside a div and place it anywhere onto your page. And of course you can set the table width and height attributes to whatever you like without having to re-arrange all of the styles!!

Have a nice day!!!

Sunday, 7 October 2012

Drawing Buttons And Text - The New HTML5 Standards And The Welcome Introduction Of CSS3

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.

Less requests for things like images also reduces the time needed to download a web page, most noticeably when the user is downloading using their networks' data connection.

Let's say, for example, you have a website that has been branded and you have the same logo more than once on either a single page or every page.
Once the logo image has been downloaded on the first visit, any subsequent visit to another page can have the image placed by using the HTML 'drawImage' method. That's one less request!

You can see this in action here CWC. The original image has been requested, downloaded and placed in the top right corner.

But I've also used the image in the header of the price list and scaled it down to fit. Without the new HTML5 I would've had to use a separate image that has been scaled down using my imaging software.

Now, I know that you might think that I can just place the image as is, and then adjust the size of the image properties using my html editor. This is ok but the images rarely get scaled down properly and you lose the original quality.

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.

I'll give an example of something I'm sure most people have, or will have, experienced on one New Years' Eve.
Do you remember sending a text message wishing your friends or family a happy new year?
Did you notice that it seemed to take a long time to deliver, or that you received one several hours after midnight?
It's all based on the computer and the software used to send out those messages. If you send a text, somewhere along the line it will be placed in a queue.
If there's only ten in that queue, you probably wouldn't have noticed the delay even if you were at the bottom of that queue.
Now imagine the same thing but with a queue that's suddenly grown enormously due the amount of people sending a message at midnight. Obviously you'll have a quite a while to wait if you're near the bottom.

Now apply this example to the amount of requests to a server, the less requests sent the smaller the queue and the faster yours and everyone elses requests get dealt with.

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've created page as a test using HTML5, the latest css and some jquery.

Take a look at the source code (http://www.blueflux.eu/HTML5.html) 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 IE9 and Opera )

**Some of the syntax has changed recently for things like gradients with css and I'll be updating the HTML5 page very soon.**

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

For a nice gradient as a background image I've had to use a very large image up to, and over 2000 pixels wide to cover wide screens as well.
Now you can use css to do it. The following example will create a gradient background from black to white starting from the top of the page:

#bkgnd{

background-image: linear-gradient(top, #000 35%, #fff);
background-image:-moz- linear-gradient(top, #000 35%, #fff); /*Firefox*/

background-image:-webkit- linear-gradient(top, #000 35%, #fff);/*Chrome and Safari*/

background-image:-o-linear-gradient(top, #000 35%, #fff);/*Opera*/

background-image:-ms-linear-gradient(top, #000 35%, #fff);/*Internet Explorer 10*/

}

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. Although this really only applies to the complete image.
Try it for yourself by adding the drop shadow to your design, then compare the file sizes.

If you want to have drop shadow effects within the image itself, then these will need to be created along with the image during the design process.

Remember, that the drop shadow will be applied to the entire div or image that you are using.
Let's say you have an image of a single upper case letter, perhaps as a logo. You can't apply the drop shadow to the letter itself, instead you'll have a shadow applied as if it's a square or rectangle surrounding the letter.

I know, why don't I just use css: text-shadow? Well, this still doesn't work with IE9.
What about some java plug-ins? Maybe, if I can find one that works yes.....with all browsers!!
So, is it design everything as an image and just use that, or try and achieve the same effect with some css and possibly two, maybe even three different plug-ins for one thing?

I have thought about creating a design, like a logo using all of the newly available goodies. From what I can see, this will involve an enormous amount of layers.

Let's go back to the drop shadow on the text:

To start with I'll need a canvas to draw some text like 'HTML5' using 'fillText' and I'll make that text red using 'fillStyle'.
Now all I need to do is create another canvas, draw the same text but this time in grey and position it at the next lowest z-index with the left and top offset, to make it look like a drop shadow.

So now I've created a simple letter/logo without using any images.

If I elaborate on this whole idea and decide to draw using svg as well. I can most probably make a very nice little design that, when finished, will all be drawn by the browser once the html web page file has been downloaded. Total page requests - 1.

Now there is a reason why I'm not posting an example of such a design..........with the amount of time and the amount of layers that will be put onto the html editor design page to achieve this ( not forgetting drawing with an svg editor as opposed to my usual design software ), I figure that I may as well design the whole thing as an image and place that on my web page anyway!

It's always going to be up to you with how you intend to design your site and finding a balance between the time it's going to take and the real difference in download times for each individual page.

My primary concern is graphic design to be used on the internet and animating that design for certain projects. So sitting down and tearing through each draft of an idea, amending and re-designing it when things don't work out is a damn sight easier with the software I'm using now.

I haven't even attempted to fully animate anything I've designed using css/html because of the difficulties I've already encountered just by having more than one thing at a time running in one layer. Rotating, moving and perspective are all good but will only take you so far if you're interested in better things.

For all the good stuff, I'll be using Adobes' Flash technology as it is an excellent piece of software that already has very efficient communication between layers/pixels within layers i.e. motion and shape tweens to name but a few.
No right-click & 'Save as' on my designs either..........

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.

Here's an example, I'd like to create a header for my web page that has a title of - 'HTML5 & CSS3'. I would like to have a drop shadow on the text, and I want a gradient for the header background:

This is the image.

Here's the css and html:

<style type="text/css">
#bkngd{/* The main layer being used to hold the other canvas' and have the gradient fill */
position:absolute;
left:0px;
top:0px;
width:800px;
height:50px;
background-image: linear-gradient(top, #8b0202, #fff 50%, #fff 10%, #8b0202);
background-image:-moz- linear-gradient(top, #8b0202, #fff 50%, #fff 10%, #8b0202); /*Firefox*/

background-image:-webkit- linear-gradient(top, #8b0202, #fff 50%, #fff 10%, #8b0202); /*Chrome and Safari*/

background-image:-o-linear-gradient(top, #8b0202, #fff 50%, #fff 10%, #8b0202); /*Opera*/

background-image:-ms-linear-gradient(top, #8b0202, #fff 50%, #fff 10%, #8b0202); /*Internet Explorer 10*/

z-index:1;
}
#text{ /* The canvas containing the red text at the front*/
postion:absolute;
left:0px;
top:0px;
width:800px
height:50px;
z-index:2;
}
#textShadow{ /*The canvas containing the dark grey text being used to create the text-shadow*/
position:absolute;
left:3px; /*offset to create a drop shadow effect*/
top:3px;
width:800px;
height:50px;
z-index:1;
}
</style>
<body>
<div id="bkgnd">
<canvas id="textShadow"></canvas>
<canvas id="text"></canvas>
</div>

<script type="text/javascript">
var c=document.getElementById("text");
var ctx=c.getContext("2d");
var d=document.getElementById("textShadow");
var dtx=d.getContext("2d");
ctx.font="42px Napa SF"; /*use standard fonts if you don't know to use font kits. e.g. Arial*/
ctx.textAlign="end";
ctx.fillStyle="ff0000";
ctx.fillText("HTML5 & CSS3", 680, 40);
dtx.font="42px Napa SF";
dtx.textAlign="end";
dtx.fillStyle="606060";
dtx.fillText("HTML5 & CSS3", 680,40);
</script>
</body>

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 drawing software, however these can now be created using the latest HTML techniques.

N.B. After running a few tests: On IE & opera you can't see the button highlight that I've added. From what I can tell, Firefox and Chrome are working fine.

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.

When I have completed the objectives of this blog, I''l be comparing quality, practicality and the reasons for using flash on your site when it comes to having the edge over your competitors on the world wide web!

Thursday, 20 September 2012

Using Adobes' Flash For Web Design

Coming Soon!

This is the reason why I need Adobe Flash for my web design!

Take a look at the picture below. Now look at the top-right half of the cell with the blue flowery pattern and notice that there is no box-shadow being applied compared to the bottom half.

My website is currently undergoing a very big overhaul using some of the latest techniques. The smaller screenshots demonstrate a glowing and transition effect when you hover over each section with your mouse ( or stylus/finger using Samsungs' 'floating technology' ) that are also created using the new css3 methods. The books you can see to the right of a section will have the page flip effect applied to them. However, these effects all work better by using Adobes' Flash technology.

I've already experienced some problems when attempting to apply bookmark tabs and have the css styles applied at the same time. This is due to the complexity of having the styles applied and the design of the page.
To give you an idea, let's say I have the bookmark/binder placed into a set of table cells. One thing overrides another or just doesn't show. This includes using background images, inserted images and information with links for the bookmarks, using diffrerent combinations of each to achieve the desired effect- "he's crashed he's crashed he's crashed!!..."

So, looks like I'll be using Flash for all of the good stuff!!

Have a look at this post about one of the reasons why you're going to need to use flash if you want the edge!

http://bluefluxgraphicdesign.blogspot.co.uk/2012/08/why-i-don-like-apple.html

Saturday, 11 August 2012

Why I Don't Like Apple! - And Why I Love Adobes' Flash!

Blueflux Graphic Design

So, after several years of self-teaching on computer science, web design, graphic design on a computer and a few others I decided to start my career in graphic design for the internet.
After looking at everything that was available, Adobes' Flash looks like the obvious choice of software. As I can use it to not only animate my designs, but also allow users to interact with my adverts. Then Steve Jobs decided that he wouldn't allow Flash to run on any of Apples' mobile devices, stating that it doesn't perform well on their iPhones or iPads despite being offered a 'lite' version by Adobe which would've allowed for my work to be displayed.
I made a decision when I first started to design my own website for my business that I wanted a picture gallery that you could navigate both forwards and reverse. I went looking all over the internet for such a photo gallery and quite simply couldn't find one! But I wasn't going to give up because this is what I wanted, and it got me a little curious as to why I couldn't find one. So I thought 'I'm going to make one myself' and I succeeded!! Take a look on my homepage ( with a desktop PC ) http://www.blueflux.eu/index.html .
For those that are unknowledgeable with computers, because of the way that they are designed, computers don't like going backwards very much, which is also the reason that I found it impossible to find a working example of such a photo gallery on the internet.
It's because of my quest for such a photo gallery and the fact that I succeeded that I now have my eyes wide open whenever I see any news or new electronic product releases.

************************************************ You see, not only does my my photo gallery work very efficiently going backwards, but with a little bit of tweaking I can make it do the same going up and down. And this method gives me great control with anything on ANY computer,allowing for some very neat efficient tricks with computer graphics. ************************************************

So, it seems to me that some companies already hold the licenses for this kind of computer graphics manipulation ( and have done for years ) and is probably another reason why it's hard if not impossible to find through an internet search.

Apples' decision to refuse to allow Flash to be displayed on their mobile devices without compromise and stating some particularly lame excuses as to why has set me back years.
Apple likes to portray products as high end by using top quality materials and giving an impression that their software is also high end without stating the truth about other software that has been available for years from other developers.

If I don't see an honest statement about why my career and other Flash developers careers were put in jeopardy by such a decision, I'll never forgive them.

'Flash Is Dead'

Thanks for reading and think again when your holding your mobile or tablet about what's really going on.

You can check out the discussionI had on the Creative Design Pros Group on LinkedIn a while back:
Creative Design Pros Group - Discussion On Flash

21st October 2012 - It seems like things are looking better since I first posted this blog entry ( Flash based Adobe Air is now running on Apples' mobile devices ). Well done..

Martin (aka piKKee - pronounced 'picky' e.g./i.e Here comes the attack - '..leave this to me, I'll pick off all the leaders...')
Like · Comment · Share

Monday, 6 August 2012

Can You See All The New CSS3 Tricks? Or Shall I Use Flash Instead?

There has been some very big changes over the last 6-12 months. The main ones being the new HTML5 standard for web design and CSS3.
This includes new and modified techniques for things such as video and audio playback, forms and server communication.
But most importantly for me and my new website, css animations.

So, are you using some or any of the new CSS3 or HTML5 techniques that have been released?
I can tell you now that the first thing you need to do, run some tests on every browser you can and don't forget mobile browsers.

Main concerns - transform: rotate
perspective
gradient fills ( ok within a canvas, but not directly in css )

I've been trying them out on my website, when I've finished I think it's great. That is of course when it's running on the computer and my favourite browser I'm designing it on!

The next thing I do is try it out on Internet Explorer 9, Chrome 21 or even Dolphin Browser HD ( which is what I like to use on my Samsung Galaxy Note ).
Some of it works, some of it doesn't....

Probably one of the worst things that I noticed is the lack of support with IE9 ( and lower versions ) for css animations. Here's a quick example:

<html>
<style type="text/css>

#rotation{
position:absolute;
left:10px;
top:10px;
height:100px;
width:100px;
background-colour:#333333;
animation-name:myRotate;
animation-duration:3s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinte;
animation-direction:normal;
animation-play-state:running;

-webkit-animation-name:myRotate; /*Chrome and Safari*/
-webkit-animation-duration:3s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinte;
-webkit-animation-direction:normal;
-webkit-animation-play-state:running;

/*add the prefixes for Firefox, Opera and IE10 in place of '-webkit-' : -moz-, -o-, -ms-.*/
}
@keyframes myRotate{
0% {transform: rotate(0deg); top:10px; left:10px}
100% {transform; rotate(360deg); top:10p; left:10px;}
}
</style>
<body>

<div id="rotation"></div>

</body>
</html>

I have a small animation running in the top left corner of my homepage which uses the same method, so this is one thing I need to fix before I can launch the site.
So far I've looked at finding some Jquery plug-ins and have come across the same kind of problems. What works for one browser, doesn't work for all browsers.

Ok, so why not use a variety of different plug-ins so that it works on every browser? Well, head over and read one of my other posts that explains one of the reasons why these new standards were brought out in the first place.

Three different plug-ins = 3 more requests for my web page.

As you can see, I'm hitting plenty of hurdles when trying to finish my website and having it running smoothly and efficiently.
My primary concern is graphic design and animation, so I need to have the least amount of hurdles to jump when someone is downloading my homepage ready for viewing.

You can also see that I have Adobes' Flash Technology running on my site, and there's more to add. I'd like to put some stunning animated visuals on my site for obvious reasons, so continuously running into problems as I am with css animations is becoming a bit of a nuisance.

Take my new page, which hasn't been uploaded for viewing yet so take a look at the image below:

The object on the right of the page is going to be a flipbook filled with various objects. I've already tried it with css but have hit a snag when trying to place bookmark tabs into the binder.
The page just doesn't know what to do with what I've tried because of the confusion between layers and table cells, which is why I'll be using Flash to build it instead, and fortunately for all you Apple boys and girls you'll be able to see it when it's finished via flash based Adobe Air...

When l started to test and practice these new methods l decided on making a single web page that contained the most useful methods to me.
It hasn't been updated for a while but it' s worth a look just to help illustrate my point, head over to view it and try all the major browsers - HTML5.

You see, although the new standard has been out for a while, the majority of browsers and some of the popular ones have yet to catch up or just perform badly!
So I'm just waiting and watching....

l like to use my Samsung Galaxy Note for general browsing.

I've got a variety of browsers that l can use when testing my site, here's a list:-
-Default Android Browser
-Dolphin Browser for android (easily my favourite )
-Firefox (the latest beta release for android)
-Opera
-Googles' Chrome

As far as my homepage goes, I've designed a small but effective animation in the top left corner.
The animation consists of two bursts of sunrays and some basic cloud highlighting followed by a silhouette of a small orbiting planet. This fits in with the theme of my site nicely.

But....it lags badly on Firefox and Opera. So far, Dolphin Browser is way out in front along with Chrome for Android and Androids' default browser. The latter all have the rotation animation running nice and smoothly.

Have a look at my homepage using Firefox from a laptop. Take a look at the moon rotating at the top left. The clouds are rotating too but you can see the moon skipping from frame to frame and it looks bad, it's even worse on their mobile browser.

AND!! I've got a question mark icon on the left-hand menu with a rotating contour. Have a look at this with all of the major browsers...what?!! It's going left to right and up high in Opera, but looks ok with their mobile browser and has stopped working altogether with mobile Firefox!!?

So, I've gotta just hang on in there until all the developers do their thing and l get to push as far as l can on a webpage (mobile devices included).

Or I can use Adobes' Flash or Air for all the nice little bits..........

Thanks for reading!
Martin

Monday, 23 July 2012

Just Me....

Enjoying my little break from 10-12 hour days in front of the computer...I can feel my brain relaxing....ahhhhhh!

Saturday, 19 May 2012

Another Problem With SVG & Web Design!

Drawing text with HTML5 is ok, but put it inside an SVG canvas and you can't apply your css rules to it. I thought I'd carry on and adjust the link properties of the 'HTML' button but it turns out I'll need to keep the text outside of the main radio panel and position it within its' own layer if I want to adjust not only the basic colour of the link text, but also any other css rules. Take the example below: HTML5

Place this anywhere on your page and you can set your link preferences as you normally would, with css. However, place it inside an SVG canvas and it Just defaults to black. This only seems to affect the colour though, the link still underlines when set. This is one example where IE works better than chrome. With IE the link behaves normally when you hover over it with your mouse, but try it with chrome and you only get the underline and no little hand.

Saturday, 7 April 2012

Choose Carefully! Not All Browsers Are Up to Date

Recently I've been trying out some of the new HTML5/CSS methods.

However, I've noticed that not all of the most popular browsers have implemented the latest technologies.

Applying some of the new styles may keep your web page up to date, but be careful and check that your new page works on every browser.

One of the most frequently used objects on your page will be buttons, the obvious way to navigate around your site.

Creating a smart and eye pleasing button, or a whole row of buttons for navigation adds to the whole look of the theme you've decided on for your web page.

A lot of people use their mobile devices for casual browsing of the internet, so using the new techniques instead of using images can be the difference between fast download times and a impatient user redirecting and trying another site.

The same goes with using page or menu gradients without the use for images to achieve the same effect.

So, if your building your own site, check your CSS against as many browsers as possible or you could be publishing content that isn't being seen the way you intended.

Martin

BlueFlux Graphic Design

A Simple Web Page Using HTML5 & CSS3

Friday, 6 April 2012

Drawing A Button HTML5 and CSS3 - No Images Used

Save on download times for your websites and blogs.

Below is a relatively tidy button rendered through your browser using only HTML (no images).
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:
nb: if you are seeing a faint border around the button, this has been applied by blogger and not part of the HTML posted below.

These styles are all applied using inline css, if you want to apply them using a css file just use the following syntax:

<style type="text/css">
#hLight{
height: 52px;
position: absolute;
left:116px;
top: 82px;width: 101px;
z-index: 2;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
box-shadow: 0px 0px 3px 2px #a3a3a3 inset;
-moz-box-shadow: 0px 0px 3px 2px #a3a3a3 inset; /*firefox*/
-webkit-box-shadow: 0px 0px 3px 2px #a3a3a3 inset; /*Chrome and Safari*/
-o-box-shadow: 0px 0px 3px 2px #a3a3a3 inset; /*Opera*/
-ms-box-shadow: 0px 0px 3px 2px #a3a3a3 inset; /*Internet Explorer 10*/
}
#buttonHL{
position: absolute;
top: 0px;
left: -1px;
width:100px;
height:50px;
z-index:3;
opacity:0.5;
-moz-opacity: 0.5;
filter: alpha(opacity=50);
}
#buttonHLTxt{
font-size: 16px;
font-weight: bold;
left: 28px;
position: absolute;
top: 15px;
z-index: 4;
width:20px;
height:50%;
}
#buttonHighlight{
position: absolute;
left: 115px;
top: 81px;
width: 99px;
height: 50px;
background-color: red;
border: 2px solid #000000;
box-shadow: 0px 0px 3px 3px #333333;
-moz-box-shadow: 0px 0px 3px 3px #333333;

-webkit-box-shadow: 0px 0px 3px 3px #333333;

-o-box-shadow: 0px 0px 3px 3px #333333;

-ms-box-shadow: 0px 0px 3px 3px #333333;;

z-index: 1;
}
</style>

<body>
<div id="hLight">
<div id="buttonHLTxt">
<div align="left">
<a href="http://www.w3schools.com/html5/default.asp" style="color: black;" target="_blank">HTML</a>
</div>
</div>
</div>

<div id="buttonHighlight">
<canvas id="buttonHL"></canvas>
</div>

/*javascript for creating a fill gradient ( using HTML5 )*/

<script type="text/javascript">


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>
</body>

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 http://www.blueflux.eu/HTML5.html

This post was written as all the new methods were being released. Since then I have cleaned up the html to make it easier for anyone reading this to understand, and copy and paste the code into their own HTML editor to experiment with themselves.

There is also more support for CSS3 in most of the modern browsers available.
Instead of using the HTML5 Gradient, you can use CSS to do it instead, below is an example of a gradient fill:

( Support for this technique is still limited for example on IE9 and Opera and using HTML5 instead seems to have more support within all the browsers rather than using css. )

This will apply a gradient from one colour to another, starting at the top, and will be blended in half way down the height of the div( or canvas ) to the second colour:#FFFFFF.

#buttonHL{
position: absolute;
top: 0px;
left: -1px;
width:100px;
height:50px;
opacity:0.5;
-moz-opacity: 0.5;
filter: alpha(opacity=50)
background: linear-gradient(top, #AA8800, #FFFFFF 50%);
-moz-background: linear-gradient(top, #AA8800, #FFFFFF 50%);
-webkit-background: linear-gradient(top, #AA8800, #FFFFFF 50%);
-o-background: linear-gradient(top, #AA8800, #FFFFFF 50%);
-ms-background: linear-gradient(top, #AA8800, #FFFFFF 50%);
}

This will create a gradient that has another colour blending into and out of the centre of the div

background: linear-gradient(top, #AA8800, #FFFFFF 54%, #AA8800 10%,#AA8800);

-moz-background: linear-gradient(top, #AA8800, #FFFFFF 54%, #AA8800 10%,#AA8800);

-webkit-background: linear-gradient(top, #AA8800, #FFFFFF 54%, #AA8800 10%,#AA8800);

-o-background: linear-gradient(top, #AA8800, #FFFFFF 54%, #AA8800 10%,#AA8800);

-ms-background: linear-gradient(top, #AA8800, #FFFFFF 54%, #AA8800 10%,#AA8800);

***This is supported in all but Internet Explorer 9 and below and a few mobile browsers like Dolphin HD for Android.***

There is now greater support for the border-radius property:

border-radius:1em;/2px;

But again, support isn't 100% so you'll have to do the same as me and many other developers and make up your own mind on how to design your site and the best techniques to use to cover the wide variety of browsers that people use today.