Monthly Archives: June 2011

Rounded corners using CSS3

Posted on by

Rounded corners for a div or any container holding your contents in your page looks cool, isn’t it. Good news is that  the latest versions of all the major web browsers support CSS3. So you can use the CSS3  border-radius property directly to create rounded corners. For example to create a 10 pixel border radius this is how it would look. And this works for all browsers.

{
border : 1px solid #afafaf;
border-radius: 10px;
}

There is not much of a work you need to do as you would have done earlier with complex code for handling background images for rounded corners.

CSS3 border-radius compliance for all browsers

Here is an image that shows the compliance table for all major browsers (latest versions at the time or writing this entry). Click here to see a very nice compliance test.

CSS3 compliance table for border-radius

Continue reading →

Inline SVG support in HTML5 compatibility test

Posted on by

We know that we can write inline SVG or SVG tags directly in HTML5 document, but not all browsers support that. Here is a compatibility table that displays the support of inline SVG in HTML5 in modern desktop and mobile web browsers.

Inline SVG support in HTML5 in browsers

Image courtesy : http://caniuse.com

You can try running this small piece of code in browsers other than the ones that support inline SVG (this should run fine in latest versions of Firefox, IE and Google Chrome).

Continue reading →

Creating dynamic SVG elements in JavaScript

Posted on by

While I was working on a HTML5 project I found this problem of creating SVG (Scalable Vector Graphics) elements
dynamically in JavaScript. For example creating vector circles inside a for loop and adding them to the page. HTML5
supports inline SVG, so you can directly use <svg>your code</svg> inside <body> to create vector graphics. But I had the task of creating them in the script. So I have put forward a small example and here is how to do it.

To create a vector circle of radius 50,

var svgNS = "http://www.w3.org/2000/svg";

var myCircle = document.createElementNS(svgNS,"circle");
myCircle.setAttributeNS(null,"id","mycircle");
myCircle.setAttributeNS(null,"cx",100);
myCircle.setAttributeNS(null,"cy",100);
myCircle.setAttributeNS(null,"r",50);
myCircle.setAttributeNS(null,"fill","black");
myCircle.setAttributeNS(null,"stroke","none");

Continue reading →

Build HTML5 mobile touch applications

Posted on by

The scene is changing and it seems new people are hopping onto HTML5 quicker than to Flex and Flash. HTML5 is quick and easy to learn and low in maintainence. With the world moving onto mobile devices, HTML5 is not far behind in catching up with it. So, now we can develop mobile applications that look and run as native applications in mobile devices and guess what they are cross platform, it can run on iOS, Android, Blackberry. Thanks to Sencha for providing a JavaScript framework called the Sencha Touch which can create and deploy touch applications. Try the Kitchen sink application (www.sencha.com/products/touch/demos/) that they have created, it showcases all the built in functionalities and UI elements. Test the application on Google Chrome as other browsers are giving some problems. Also you can check out the demo on iPods and iPads.

I have been involved with HTML5 for quite a some time now and have been fiddling with Sencha recently. I will post some demos soon. Its quite good, try out. Here is a video to get you started