Web-Design and Development Magazine
Web development keeps getting better – there are more increasingly-standardized tools like HTML5 and CSS3, and their features let web designers and developers create advanced and good-looking websites more easily.
But some browsers – mainly Internet Explorer version 6, 7, and 8 – don’t support many of these features, like border-radius, gradients, text-shadow, transparency, CSS animations and transitions, and so forth…
Today we’ll be creating a beautiful vertical CSS3 navigation, without the use of images. Basically we’ll display a circle with an icon in the center. When the user hovers over the circle, it expands and shows a short description.
Now you may be wondering: how are we going to display an icon without images? Well, Drew Wilson’s (fabulous) Pictos font makes this quite simple. Unfortunately (but understandably) it’s not free, you can purchase is for $49 here. Luckily, there are other icon fonts out there like iconic, which you can use for free.
I should also mention that this has been tested using Webkit browsers only (Safari, Chrome). It may work in other browsers but probably with limited support. Check out the demo here!
Today we’ll be creating a bar that pops up at the top of a page, and stays above the content (similar to ‘hellobar’). The popup bar was only tested in Chrome and Safari and may not work in other browsers. The bar can be used to display information, for example your latest blog post, to the user.
The way the bar pops out at the top makes sure it’ll be seen. And after the visitor has seen the information, he/she has the option to hide the bar.
Many of you have probably already seen some of those CSS3 generators that have been poppin’ up? Have you perhaps been wondering how they’re made? Wonder no more, that’s what we’ll be creating today, using CSS3, HTML5 and jQuery.
The CSS3 generator we will be creating is Webkit only, so make sure you open up the demo in a Webkit browser like Safari or Chrome.
The new canvas tag in HTML5 is known for its illustration power. It’s basically an empty element on which you can write and sketch using Javascript. But there’s a hidden power: image manipulation. In our opinion, this is the most important element that differs from SVG. With canvas you can perform operations on pixel based […]
