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"><!--circle fading, changing to red and scaling by a factor of 4-->
  <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"/><!-- more than one count and it messes up-->
</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!! :)

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.

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">
<!--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>
</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.