Creating menu using CSS3 is quite easy and fun. To create a circle for each menu item you need to work with border-radius. While creating the circular menu I used the "CSS3 Simple Horizontal menu". While doing it removed unnecessary CSS code.
To create a circle using border-radius property make sure that values for height, width and border-radius are same.
For example if the height and width of the menu is 90px, then the border-radius should be kept to 90px as well.
I have created the code using the jsfiddle. If you want to change it according to your need "Click here".
Note: The border-radius property is supported in : IE9+, FF 4+ , Opera 10.5 +, Safari 5+ and chrome.
For older version of FF and Safari -moz and -webkit prefix are used.
HTML
CSS
After completing the code menu would look like as follow:
Result
To create a circle using border-radius property make sure that values for height, width and border-radius are same.
For example if the height and width of the menu is 90px, then the border-radius should be kept to 90px as well.
I have created the code using the jsfiddle. If you want to change it according to your need "Click here".
Note: The border-radius property is supported in : IE9+, FF 4+ , Opera 10.5 +, Safari 5+ and chrome.
For older version of FF and Safari -moz and -webkit prefix are used.
HTML
CSS
After completing the code menu would look like as follow:
Result
No comments:
Post a Comment