The transition is a very powerful property. I set some width for the icon menu and add border style to make them look good. I will also apply some basic styling for li and hyperlink. If the visitor’s browser does not support gradients, it will just ignore the rules and go with the background color. First I will supply a background color, which acts as a fallback, and then added two CSS3 radial gradients (for Firefox and Chrome/Safari respectfully) as background images. Also menu even perfectly usable in browsers as old as IE6 or IE7.įor the styling of the body background. This will work on browsers which support CSS3 transition animations effects.
Our basic HTML structure is ready and now we move to create an awesome CSS3 effect and styling the list of icons. The icons are used from Font Awesome The Styling By default, these spans are hidden and are only shown when you hover the icon.Īs for as i it used for the different icon for each link. Inside each li we have a hyperlink with a span and i inside it. Remember that we make three different variations for these lists which called Left, Right, and horizontal icons list. It provides you an easy way to style the icons and semantically correct. The menu organized as an unordered list ul, li which is most used and best practice for navigation. I will create a list of menus so you can use a mini menu on your site if you want. These browsers are Safari, Opera, and Chrome which together take only a small part of the browser market. The next better thing in the next generation of browsers will have more powerful tools like 3D transformation.Īt this moment, Only three browsers fully support the CSS3 animations and they have the ability to animate CSS3 properties. Now all the latest version of browsers do support all the advanced CSS3 properties. It allows you to create animated menus, slider, tabs and much more without using any javascript. I will create a set of icons list and when user mouse over an icon the text will be shown on the right side of the icon with CSS3 animation slideout effect. Do you want to display text when hover an icon or button? In this quick tutorial, I will you how you can easily do this by just using HTML and CSS.
0 kommentar(er)
