In this tutorial I`m going to show you how to create a simple, but very stylish vertical menu using some CSS3, a bit of jQuery, a custom text font and the most impressive icon font you can find at this moment, which is FontAwesome.
Combine all of these with a nice color scheme and you get a beautiful UI element, ready to be used in your projects!
We`re all using web browsers to navigate on internet. Most of you(to be more specific, 65% according to my analytics) are using Chrome and Safari to navigate through this website. These 2 browsers have something in common: they are both built on the WebKit platform, or in other words, they are WebKit browsers. Although Google and Apple assigned them already some quite nice UI elements, some people thought that there is room for more.
There are some great solutions to drop-down navigation menus, like the superfish jquery plugin for example. Many of them are using a lot of files and resources to generate the drop-downs but sometimes you don`t need all of them. I want to show you how to create your own simple, but stylish drop-down menu, using the new HTML5 tags and the awesome CSS3 styles.
CSS3 buttons brings with them some awesome styling features, like rounded corners, gradients and borders, but also brings a lot of headaches to those who want to implement it inside web pages, due to Internet Explorer lack of support for these great features. If you feel guilty for making use of CSS3, don`t be, because I`m going to show you how you can create web elements only with CSS3 which are compatible with all browsers.
Today, I want to show you how to create some beautiful CSS3 buttons which make use of the latest CSS3 features and, most importantly, pass the cross-browser compatibility test, which means they will look awesome in modern browsers, like Chrome and Firefox, but also will look pretty good in older browsers, even IE6.