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;
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.
Continue reading “Rounded corners using CSS3”
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.
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 “Inline SVG support in HTML5 compatibility test”
While I was working on a HTML5 project I found this problem of creating SVG (Scalable Vector Graphics) elements
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");
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