Back to the Massive Link Collection Series. This article focuses purely on CSS, and includes a list of my collection of articles and links that I’ve discovered over the past year that I’ve found to be very useful and helpful. These links, in combination with playing around with the Firebug extension for Firefox, will help you master CSS (assuming you’ve already gotten some initial experience with the language).
Once again, a description of these posts: I provide a list of links that I have collected over the past year, as well as all of the Firefox tags that I use to keep them indexed. This gives you a ton of easy and quick resources. If you are unfamiliar with Firefox’s bookmarking system and want to know how to truly take advantage of this post, click here.
Also, be sure to check out the other posts from the series if you haven’t yet:
- Useful Javascript, jQuery, and AJAX Tutorials and Resources - Massive Link Collection Part #1
- Design Tutorials, How-tos, and Resources for Photoshop and Illustrator - Massive Link Collection Part #2
- Web Design Inspiration | Galleries, Websites, And More - MLC#3
Hacks, Fixes, & Techniques
- Using CSS to Fix Anything: 20+ Common Bugs and Fixes – 2 column, center, centering, column, css bugs, double margin, double margin float, fix, form, ie fixes, ie hacks, min-height
- Powerful CSS-Techniques For Effective Coding | CSS | Smashing Magazine – button, css, css table, dock, dock menu, favicon link, file input, hacks, hover, recipe, reset, site map, sitemap, speech bubbles, step menu, table, table of contents, techniques, transparency
- Spiffy Corners - Purely CSS Rounded Corners – css, rounded corners
- CSS 2.1 selectors, Part 1 | 456 Berea Street – css, selectors, selector
- Create Custom Search Bars with Image Replacement using CSS – css, custom search bar, search, bar
- Scalable CSS Buttons Using PNG and Background Colors | David’s kitchen – css, scalable buttons, scalable css buttons
- 30 Exceptional CSS Techniques and Examples | Six Revisions – css, hacks, techniques
- CSS Decorative Gallery – css, gallery, website gallery
- Mozilla Webdev » Blog Archive » Cross-Browser Inline-Block – block, css, display, float, gallery, grid, inline, layout
- Safari’s text-shadow anti-aliasing CSS hack Revision · Komodo Media – font, hack, render, safari, shadow, text, weight
- Firefox 3.5 for developers - MDC – box, css, firefox, mozilla, opacity, shadow, text
- SonSpring | Hoverbox Image Gallery – box, css, enlarge, hover, rollover
- 20 CSS Short Hands You’ll Love – browser, cross, font, opacity, shorthand, transparency, transparent
- 10 astonishing CSS hacks and techniques – block, border, browser, cross, css, display, height, inline, min, rollover, transparency
Navigation & Menus
- Stu Nicholls | CSSplay | CSS demonstrations – css, menu, layout, box, opacity
- Dynamic Drive CSS Library- Horizontal CSS Menus – css, menu, horizontal
- CSS Image Rollover Advanced Menu – css, image rollover, navigation, navigation rollover, rollover
- CSS: Menu List Design – css, food, list, menu, restaurant
- Designing the Digg Header: How To & Download – click, clickable, digg, dropdown, menu, navigation
Fonts
- » 8 fonts you probably don’t use in css, but should – Web Design Marketing Podcast & Blog – common font, css, font, web font
- Better CSS Font Stacks :: Unit Interactive – css, font, stack
- Common fonts to all versions of Windows & Mac equivalents (Browser safe fonts) - Web design tips & tricks – common, css, default, font, fonts, mac, system, windows
Transparent PNG Methods
- PNG-8 Alpha Transparency with Fireworks – fireworks, css, png, fix, transparency
- 24 ways: Transparent PNGs in Internet Explorer 6 – css, hack, javascript, png, transparency, transparent
- Unit Interactive :: Labs :: Unit PNG Fix – css, fix, hack, ie6, javascript, png, transparency
- DD_belatedPNG Medicine for your IE6/PNG headache! – javascript, css, png, transparency
CSS3
- Take Your Design To The Next Level With CSS3 – background, border, box, corner, css3, face, font, multiple, opacity, radius, rounded, selector, text-shadow, transparency
- Push Your Web Design Into The Future With CSS3 | CSS | Smashing Magazine – css3
- 20 Useful Resources for Learning about CSS3 - Six Revisions – css3
- Web Designer Notebook » An Ode To Border-radius – border, corner, css, radius, rounded
Layouts, Positioning, & Templates
- Joomla Templates: Creating a Pure CSS Template | Part 4 - webreference.com – css, template
- CSS Dock Menu – css, dock, menu
- Open Source Web Design - Download free web design templates. – css, templates
- Alternative Style: Working With Alternate Style Sheets :A List Apart – alternate, alternate style sheet, css
- Horizontal and vertical center – css, hacks, horizontal center, vertical center
- Faux absolute positioning demo – absolute, positioning, css, layout
- Web Design Resource - 25 Sites to download Free Web Templates – css, layout, template, website
- CSS Layouts: 40+ Tutorials, Tips, Demos and Best Practices – css, demo, hacks, hover, layout, max-height, max-width, min-height, min-width, png, structure, transparent, tutorial
- Dave Woods - Freelance Web Designer UK » CSS Fixed Footer – absolute, bottom, css, fixed, footer
Other Styling & Miscellaneous
- CSS Redundancy Checker – checker, css, redundancy, tool, verify
- A List Apart: Articles: Return of the Mobile Style Sheet – css, handheld, javascript, mobile, sheet, style
- CSS Drive Gallery- CSS Compressor – compress, compression, compressor, css, tool
- Form Elements: 40+ CSS/JS Styling and Functionality Techniques &ndash auto, autotab, checkbox, css, dropdown, fancyform, field, form, help, helptext, html, javascript, live, option, resize, select, slider, tab, text, validate, validation
- Beautiful Forms - Design, Style, & make it work with PHP & Ajax | Noupe – design, form, forms, jquery, style
- Top 10 CSS Table Designs | CSS, Events | Smashing Magazine – background, css, filter, ie hack, table, tables
- Tiling Backgrounds in Internet Explorer - Snook.ca – background, cell, hack, ie, row, table
- 8 CSS Techniques for Charting Data - Six Revisions – bar, css, graph
- CSS-Tricks #52: Building a Print Stylesheet – css, print, sheet, style, stylesheet
- Video: An Introduction to CSScaffold | Anthony Short | Web Design & Development – css, csscaffold, framework, php, scaffold
- CSS Image Map Techniques and Tutorials | Design Reviver – CSS Image Map Techniques and Tutorials | Design Reviver
- Learn How to Style Articles for Print and Email - Nettuts+ – article, css, e-mail, mail, print, sheet, style, web
- CSS Browser Selector – browser, conditional, css, select
Thanks for this Joren! It really is a pretty extensive list here, should be useful in the up-coming projects that I have on the go.
I just came from looking for a good page on Bing and came to yours. I have to say these templates are great. Thanks for telling us about them in your post. I will be sure to add this to my favorites.
congratulations, very good!!!