Join James Williamson for an in-depth discussion in this video Using CSS in place of images, part of Applied Responsive Design.
Occasionally, the correct approach to responsive images is to really not use images at all.…In the case of buttons, icons, and patterns, it's sometimes just as effective to use a pure…CSS solution that can solve some of the scaling and resource-management problems that plague images.…To show this off, we are going to be working with the contact.htm file found in the 04_03 folder.…Now, if I preview this page in a browser-- I am going to scroll down a little bit.…I want you to focus on the right-hand column over here, where it says This month's contest.…
So right down here, we have a little link that people can click to enter our contest.…I think I want to make that a little bit more attractive, maybe draw a little bit of interest to that link.…In the past, I probably would use some type of an icon or an image or something there…instead of just a direct link, but now with a lot of capabilities we have with CSS3, we…can do that type of a graphics approach without ever using an image.…So I am going to go back into the contact.htm file, and I am going to switch over to my main.css,…
- Creating mockups
- Structuring page regions
- Defining default styles and media queries
- Building desktop, tablet, and mobile layouts
- Structuring and styling menus
- Dynamically replacing menus
- Creating a responsive image gallery
- Adding phone functionality
- Testing responsive sites
Skill Level Intermediate
1. Planning Responsive Designs
2. Building Responsive Layouts
3. Responsive Navigation
4. Creating Responsive Media
5. Enhancing Sites for Mobile
6. Managing Resources
Additional resources4m 10s
- 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.