One of CSS3′s most popular features is border-radius. The ease of just being able to specify your rounded corners in CSS is very appealing compared to using JavaScript or a bunch of bloated HTML to accomplish a simple effect. So here I will describe a CSS-only method we can use today that works in all four major browsers. Sadly, this does not include Internet Explorer, so I will include an alternative solution for it too.
It’s here! A working version of the SVG image replacement script.
This script substitutes specified images and background images with SVG images for web browsers that support them. This makes it perfect for anyone who would like to start using SVG for their site design, but wants to make sure it will look okay for browsers that do not yet support it.
There’s changes in the wind in the world of visual web technologies, and they show a beautiful future for what might soon (and to some degree now) be possible with the use of web standards.
Specifically, I’m talking about web alternatives to that ever popular Adobe Flash plug-in. Note that I won’t be talking about Microsoft’s Silverlight here, since it has many of the same shortcomings as Flash does.
There seem to be three major ways Flash is being used today: For online videos, as a web page interface, and for web-based games. Upcoming standards being developed and implemented for each of these uses.
(more…)
Here’s a demo of a div with a simple 10px radius 1px border that works in Opera 9.5, Firefox 2+ and Safari 3 beta. It uses -moz-border-radius for Firefox, -webkit-border-radius for Safari and an SVG background for Opera 9.5. The SVG file this time is actually a modified version of a new method Holger Will came up with.
Of course, it doesn’t work quite that easily. The CSS3 corner method uses a border, but for Opera we don’t want that border to appear because it already exists in the SVG file. Additionally, we’ll have to change the position and padding slightly so the border appears in the exact same place.
(more…)