Ever wondered how use CSS Sprites in your own web projects? Today, Tom Green (our resident Adobe expert) is going to walk through how to create CSS sprites in Fireworks and then put them to use in Dreamweaver. If you haven’t used CSS Sprites before, or if you’re just looking for an easier way to implement them, look no further!
Link: TutsPlus
CSS Coverage is an extension for Firebug which allows you to scan multiple pages of your site to see which CSS rules are actually used in your site.
This extension requires Firebug.
How does it work?
- Open up the first page of the site you want to check and press the “Scan” button in the “CSS Coverage” Firebug tab.
- In case of a rich (Ajax or DHTML) site, open up as many divs/popups/tabs in the page as possible and press “Scan” again.
- Visit other pages of your site and press “Scan” again.
Each time you press “Scan”, the CSS files that are included in the current page are shown with the number of times the rules has been found applied on your page before it.
Link: addons.mozilla.org
Please, choose and upload the image files you want to use in your css sprite and click “Create CSS Sprite”.
The application will join all your images files into a single file and will generate the corresponding CSS and HTML code along with the rollover effect if any choosen.
Link: ss-sprit.es
CSS pseudo-classes are used to add special effects to some selectors.
Example:
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
Link: W3Schools