Join James Williamson for an in-depth discussion in this video Creating special effects for buttons, part of CSS: Styling Navigation.
Browser support for many of the new CSS3 features has made it possible for us to add effects…to elements that could really previously only be accomplished by using images.…In this exercise, we're going to explore some of those effects as we enhance the buttons…that we created in our last exercise.…So I've got the buttons file open, but this time it's from the 06_02 directory.…I'm just going to dive right in.…We've got a lot of formatting going on with our button right now, but we're going to add…a little bit more to it.…Just underneath cursor, I'm going to type in border-radius, and I want it to be 0.325 ems.…
So if I preview this in my browser and refresh it, you can see it rounds the corner of my buttons.…There are a lot of different really cool CSS3 properties out there that are starting to…be supported by browsers. One of them is box-shadow.…Let's play around with box-shadow and see what it can do for us.…So I'm going to type in box-shadow. Here's what box-shadow can do for you.…You have four sets of values that you can give it.…
- Organizing menus with lists
- Creating block-level links
- Styling links, link states, and image links
- Defining link dimensions
- Controlling link spacing in a menu
- Creating rollovers
- Clearing floats
- Indicating current pages
- Controlling cursor states
- Building dropdown menus
- Creating CSS-only buttons
Skill Level Beginner
1. Structuring Navigation
2. Link Styling Basics
3. Creating a Vertical Menu
4. Creating Horizontal Menus
5. Dropdown Menus
6. Enhancing Navigation with CSS
Additional resources6m 29s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.