While I was coding the Notepad theme, I've learned some new CSS3 features and now I would like to share it with you. View the demo to see a Mac-like multi-level dropdown menu that I've created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow will not be rendered.
Preview
The image below shows how the menu will look if CSS3 is not supported.
One Gradient Image is Used
A white-transparent image is used to achieve the gradient effect. Because the new CSS3 gradient feature is not supported by all browsers yet, it is safer to use a gradient background image.
The instensitiy of the gradient can be changed by shifting the background image up or down. Also, the gradient color can be easily adjusted by changing the background color.
CSS Code
I'm not going to explain the CSS line by line. The images below explain the key points on how this dropdown is coded.
Update Apr 13 2010: Pure CSS Dropdown (No Image Used)
The following demo used CSS gradient and IE gradient filter instead of the gradient image. It works for Webkit browsers, Firefox 3.6+, and IE.
very Good !!
awesome tutorial.
nice tutorial…
thank you
I love your menu and appreciate also that you have demo!
Excellent tutorial..Thanks..
Wow, such a great tutorial and it’s great to see such accessible, beautiful design – thanks!
Thanks, for a great post. I have learned so much from this (and your site) about CSS.
Thanks Again
can i download the source, thanks
I love your idea about using a transparent gradient image with varying intensities to control on-screen gradients. Very reusable and friendly. I like to use PNGs for transparency; however, since you are applying it as a filter without rounded corners, a GIF would work just as well and be supported by older versions of IE?
Excellent tutorial. I have learned so much from this about CSS.
Thanks, for a great post…
Can anyone clear me up the usage of ” > ” in CSS, I’ve have never seen nor used them in my css, is it a new feature in CSS 3 ?
A child selector matches when an element is the child of some element. A child selector is made up of two or more selectors separated by “>”.
once again awesome. thanks very much. Its easy to pull the code if you view the source of the demo. All you need to do is grap the gradient image. You can work out where it is.
cheers
Great tutorial, loved it. Been looking all over the web maybe someone can help. Say I wanted the items underneath my projects to be all different colors, how would I go about doing that? Have one roll over with blue, then another yellow or anything like that. Thanks again for the tut and any help.
Excellent post. Keep up the working and looking forward to more great articles in the future.
wow..i can try it now..thanks
I´m new with css and css3 and want to learn more about it. Like how the HTML-code is in this tutorial.
This is very useful! Thank you!
Thank you!
Very Excellent tutorial.
Very helpful annotations there. Sometimes I get lost when I’m coding.
nice.. ill try it soon.. thanks.