CSS Tools

Please be advised that as of June of 2006 I have stopped updating CSS related links on this page. Each new discovery of CSS related articles and tools (as well as other web development related posts) are now being collected as a separate post under the Code section of Soxiam Wiki. You may also check out all pages tagged "CSS".

CSS Tools

• Em Calculator estimates Em size equivalent to px size. Could become useful since more standardistas are adpoting use of Em sizing (vs. px sizing) to define the max width of their layout, a technique which I intend to investigate more thoroughly.
• Clean CSS — yet another CSS cleaner/optimizer.
• CSS Tweak — another CSS optimizer from cssdev.com
• westciv's complete CSS guide
• MODI — Another amazing bookmarklet from Slayer Office. MODI is a mouse-over DOM inspector.
• W3C CSS Validator
• I Like Your Color via Red Alt — Type in the URL and it grabs the interface colors and display them in hex. Freakin' Awsome!
• XHTML Semantic Generator — The XHTML Semantic Generator is a system designed to help developers prototype and test URL's to ensure they contain basic accessibility and usability features present in modern web technologies, and to automatically implement them if possible.
• Special Characters List via manicalrage.net
• Online CSS Optimizer
• 4096 Color Wheel
• ColorCombos — Yet another online color pallet tool.
• COLORlovers — nice collection of user-picked colors & palettes with hex code.
• Weelstyled.com's color scheme generator
• CSS Hacks Browser Support Chart
• CSS Compressor — squeeze the snot of that CSS.

CSS-based design galleries

• CSSElite
• openwebdesign.org is a community of designers and site owners sharing free web design templates as well as web design information.
• CSS thesis
• Wow-Factor
• Web Standards Awards
• W3 Compliant Sites
• Unmatched Style
• The Weekly Standards
• CSS-Mania
• CSS Drive
• CSS Import
• CSS Zen Garden
• CSS Vault
• CSS Beauty
• Stylegala

CSS-based Layout:

• CSS grid calculator allows you to play with CSS layout in a flash app and returns the CSS code for it when you're done.
• Yahoo! UI Library: Grids CSS — "...Grids CSS is a suite of seven web page templates and the ability to nest grids of one to four columns within the content area of those templates."
• How to build dynamic-width pages now — another article on using javascript to change CSS-based layout based on screen resolutions.
• mollio.org has some very nice collection of 1/2/3 column layout templates that validates and allows content column to come first in the source order.
• Layout Gala is a nice experiment of producing many different layouts via CSS with the same HTML markup.
• A very thorough CSS layout generator via positioniseverything.
• clagnut has a good rundown on variable fixed width layout, or commonly referred to as "drop column layout".
• css-discuss compares Three Column Layouts.
• The search for the bullet-proof, flexible, any-order, 3-column layout continues... the latest offering is Matthew Levine's "Holy Grail" technique which was published on ALA and looked very very promising... until it turns out there are some unresolvable bugs including a strange vertical-resize bug in IE. Still it's the best contender for do-it-all solution out there along with the "One True Layout" technique.
• CSS Template collections at intensivstation.ch
• Dynamic Resolution Dependent Layout describes a technique that uses javascript to serve up different CSS based on the browser dimension. This might be useful if you are, for instance, trying to serve up fixed vs. fluid layout based on browser size.
• In search of the One True Layout — Position is Everything investigates a way to order columns logically in the source while displaying them in any order desired. For any number of columns.
• Creating Liquid Faux Columns — a thorough look at creating equal-height, 3-column, liquid layout in CSS.
• Making Simple Work of Complex CSS Layouts — A nice tutorial/presentation on CSS-based layout.
• Flexi-Floats — 3 Column CSS Layout - Fluid, Multi-Column Stretch
• layoutomatic
• Good list of table-less CSS layouts via Coda.
• Jello — another flexible liquid layout.
• Elastic Faux Columns — CSS faux columns via background-position property.
• Progressive Layout — liquid layout with width controlled by JS.

CSS-based Boxes:

• Spanky Corners from sitepoint is yet another take on generating rounded corner boxes. This approach uses no javascript nor extra markup cruft but it does rely on images to create the corners.
• spiffycorners is yet another way of making rounded corner boxes. It's unique in that it paints anti-aliased corners in CSS without using images or javascript. However it does require a lot of extra markup. Pick your poison.
• Nifty Cube — v3 of nifty corners. New features make it more flexible, less crufty.
• CSS Rounded Corners 'Roundup' via smileycat.com
• There's a detailed tutorial on Onion skinned drop shadow technique which (1) Automatically expand and contract to fit any object, without specifying widths, (2) Allow you to modify the shadow depth with no image manipulation, and (3) Render the same across all browsers without cutting any corners. Except for 3-layer deep markup cruft, it looks like a real winner.
  • This is pretty remarkable. The day Onion skinned drop shadow hits the net, someone felt exactly the way I did: good technique, unfortunate code cruf. So what did sporkmonger do? He found a way to remove all the wrapper div cruft by using some clever javascript. The result is a clean img tag with one CSS class. Absolutely brilliant. Can't get over that it all happened in just one day without any coordination. The Web is still full of surprises for me.
• smileycat has a comprehensive round-up on different CSS techniques for presenting rounded corner boxes.
• If you don't mind the heavy markup cruft (8 nested div's!), dragon-lab's Octopus Engine seems like a really winner for creating wonderful looking custom bordered boxes with shadows.
• DOM Corners — Another way to draw rounded corner boxes. This technique uses images but focuses on reducing the code cruft.
• Scalable rounded edges using definition list markup.
• Table Scroll — two different methods of presenting a long table in a scrolling DIV box.
• CSS PLAY — Many "The power of CSS" demos by Stu Nicholls.
• A good summary overview of CSS layout techniques over at particletree.com
• Airtight Corners — Another CSS technique to create rounded corners. This one uses only one image, but the width of the box must be defined.
• Customizing custom corners and borders via 456bereastreet
• CSS drop shadow — this method gets around IE's negative margin positioning problem by using position:relative; on the inner block element.
• Mimic iframe with CSS via overflow:auto and height properties
• Transparent Custome Corners and Borders — Another rounded corner box by JS. via 456bereastreet.com
• "More" Nifty Corners — v2 of CSS+JS only to round box corners.

CSS-based Menus, Lists and Navigation:

• Hoverbox Menu — image-zoomed navigation using hoverbox technique.
• The ultimate tabbed menu from Dragon Labs — lots of variety, demo's, and downloads.
• Cross browser tabbed pages with embedded links is another good one from stu nicholls. This one shows how to build no-JS, CSS-only tabbed menus that present CSS scroll box content when you hover over them.
• A nice demo of OS X dock like magnification effect on navigation links. Currently only supported on Mozilla based browsers
• A good assortment of vertical tab navigation via exploding-boy.com.
• Centered Tabs with CSS takes Douglas Bowman's "sliding door" tab navigation markup and tweaks it to allow for center justified tabs.
• Simple website menu — This is a simple list-based menu, with CSS2 menu triggers for browsers that support them, and a touch of equivalent javascript for others.
• Deluxe CSS drop down menus and fly-outs
• ADxMenu — a nested unordered list based nav menu. Even has .htc to combat IE/Win issues with li:hover
• Using single-image sprites for mouseover navigation
• CSS unordered list with mouse-over popup info via webreference.com
• CSS tabs with sub-menus via kalsey.com
• more accessible graphic menu
• Drop Down Menu: Horizontal Style
• qooxdoo is an Open Source (licensed under LGPL) DOM-based javascript toolkit. qooxdoo starts where simple HTML is not enough. It can help you get your rich web application interface done easier than ever.
• Floated Minitabs
• Complex Dynamic Lists

CSS and Form Elements:

• Prettier Accessible Forms over at ALA shows you a technique that uses inline-blocks, fieldsets and legends to create an nicely styled form that's also accessible and degrades well.
• formArchitect provides an online tool that creates complex html forms without using tables for layout.
• Semantic horizontal Forms via skyrocket.be
• c82 has a good article on transforming cumbersome select box into a scrollable checklist with some nice-looking examples.
• Form layout using definition list — via clagnut.com
• CSS-only forms that don't suck — good article on lining up those form elements with labels.
• One button, many destinations — collylogic.com on show/hiding form elements via JS.
• Form Text Area Tools — DHTML/CSS that enables functions like word count, maxlength limit, and resizable text area box.
• Styling Form Elements — A great reference to default & styled form pulldown menus, the notoriously difficult element to apply CSS styles consistently across browsers/platforms, can now look like this thanks to some fancy DOM scripting by Aaron Gustafson. The process is explained here.

CSS Image Replacement Techniques

• PHP + CSS Dynamic Text Replacement is a JavaScript-free version of the Dynamic Text Replacement method that can handle word-wrap in a long heading. Could this replace sIFR?
• iIR: img Image Replacement by Aaron Gustafson is a technique to replace one image with another that could be useful for print version of the page, etc.
• Printing CSS background images (sort of) via wg shows you what I thought was impossible: CSS background images that prints. It's pretty clever and uses list-style-image CSS property to make this happen.
• PHP + CSS Dynamic Text Replacement — "...Where the original Dynamic Text Replacement used JavaScript to replace the heading text, PHP+CSC Dynamic Text Replacement uses PHP's output buffering functions to parse the page for heading tags, extract the heading text and assign an inline style that points to the image generation script."
• CSS-Technique: Worn Type is a rather brilliant adaptation of image replacement technique that stretches your imagination. Nicely done!
• (SIMR) Single Image Multi Replacement uses a single image to replace more than one heading
• Image Replacement Maps
• MIR: Malarkey Image Replacement — Yes. Another method. This one is similar to negative text-indent method in theory but uses negative letter-spacing instead. Supposedly works in all but Opera.

CSS Optimization Techniques

• CSS Tweak is an online CSS optimizer with number of settings you can apply.
• CSS Formatter and Optimizer.
• Generating Dynamic CSS with PHP — via digital-web.com.

CSS Browser Support, Bugs and Hacks

• Tom Lee has a tutorial on Max-width in IE Using a CSS Expression. Word of caution: I hear using this method can be rather hairy, in some cases crashing the browser.
• Future-proof your CSS with Conditional Comments from Bruce Lawson is a great comprehensive collection of CSS's that, when combined, addresses most of CSS issues with different browsers.
• IE Word Wrap Doppelganger Bug — Sitepoint on how heading elements could leave a small trail of itself as it wraps to the next line in IE6.
• Images, Tables, and Mysterious Gaps seems like something I should've known already about the behavior of inline elements in strict mode. But of course it took me an hour of agony before finally realizing the ultimate truth: I'm not that smart.
• Easy CSS hacks for IE7 — Some CSS hacks that will work with IE7. Hey, you never know.
• Web Browser CSS Support with updated listings for IE7, Firefox 1.5, and Opera 8.5.
• snook.ca on the "+" CSS hack which you can use to target IE6 and IE7 only.
• On having layout reveals some information and workarounds for IE's strange and proprietary 'rendering-concept': hasLayout — one of the major causes for headache when it comes to how IE decides to pain the boundaries of certain HTML elements:
  • "...A lot of Internet Explorer's rendering inconsistencies can be fixed by giving an element “layout.” John Gallant and Holly Bergevin classified these inconsistencies as “dimensional bugs,” meaning that they can often be solved by applying a width or height. This leads to a question of why “layout” can change the rendering of and the relationships between elements. The question, albeit a good one, is hard to answer. In this article, the authors focus on some aspects of this complicated matter. For more thorough discussions and examples, please refer to the links provided."
• Negative text-indent and underline — No matter how far on the left the real text is, the underline will be stretched all the way to the right in some PC browsers, namely the Firefox.
• IE6 Multi Class Bug — Again, something that could've brought to my attention last week!
  • "...Internet Explorer fails to render backgrounds for elements that have both an ID and a class defined. For instance, #photos.background1 will display the corresponding background in IE6 for Windows, but once that has been defined, #photos.background2, #photos.background3, etc. will not be displayed."
• Ten more CSS tricks you may not know — includes few IE bug fix techniques
• The "Holly" Hack — taming IE/Win CSS display bug by assigning a dimensional value such as height:1%;
• CSS tests — a great list of all the CSS gotcha's under one roof.
• max-width in IE using VERY little known IE-only CSS "Dynamic properties"
• List of @import hacks to hide CSS from different browsers.
• Essentials of CSS Hacking For Internet Explorer — an excellent list of quick hints on safeguarding your CSS against IE.
• Web browser standards support — Charts comparing IE 6, Firefox 1.0, and Opera 8.
• Full CSS property browser compatibility chart
• The perils of using XHTML properly — Potential pitfalls of declaring application/xhtml+xml MIME type.
• IE Double Float Margin Bug.

Misc CSS Tips and Tricks:

• Hot Dates with CSS shows how to make blog dates look like small calendar pages.
• A nice demo of experimenting with CSS-only solution to imagemap with popups using unordered list.
• Clagnut shows you how to have Line breaks in tooltips by using the carriage return entity &#013. How utterly simple!
• Styling check boxes and radio buttons only with CSS uses 100% CSS solution (via attribute value selector and positioned background images) to serve up customized form elements. It's semantically correct and degrades well for browsers that doesn't support this method (IE), but is it also accessible?
• Stuart Robertson's CSS text shadow technique seems like one of the easiest-to-implement techniques I've come across. It uses :before pseudo element and supports both Safari and Firefox browsers.
• From "holy crap why didn't I think of that" file... Airbag has a simple but great idea of using a ruler background images in CSS to check DIV sizing during development.
• CSS Colors: Take Control Using PHP is a wonderful tutorial from Barely Fitz on how to use PHP variables to represent colors in your CSS which you can then manipulate — quickly changing all the colors from a single source, generating new colors via algorythm, etc.
• Web Graphics has a CSS3 demo on using :target pseudo class to style anchor link targets.
• Dynamic Drive, a long time favorite DHTML code snippet depot of mine, has started a new spin-off: CSS Drive.
• A More Accessible Map — a new tutorial on ALA shows how to create an accessible map with tooltips via CSS and JS.
• Styling horizontal rules with CSS — "...Don’t waste hours trying to style horizontal rules consistently across different browsers. Instead wrap your HR in a DIV, set the HR to display none and style the surrounding DIV instead.". Now why the heck didn't I think of that?
• CSS image preloader technique from maratz.com — using background image CSS property on images to serve as image place holders.
• stefanhayden.com shows a neat (and easy) way to make sure the client fetches new CSS with HTML update: just add a variable at the end of the CSS with each update.
• Wrapping text around curves via CSS if you don't mind the markup cruft.
• codylindley.com's Pushpin Header Technique "...is a CSS solution for creating a stationary header out of the thead of a table while the table’s tbody remains scrollable"
• hovebox image gallery via sonspring. It's sort of like mini-lightbox that enlarges the thumbnails on hover. Very nice.
• Beautifully Numbered Lists looks nice except that it's not really an ordered list. Instead it used definition lists inside the ordered list for presentation — which means true standardistas might object.
• In what could only be catagorized under Uber-Anal department, ollicle.com how to alter CSS line-height based on paragraph width via javascript for optimal readbility.
• From "I didn't know that" file... wg tells us that using − instead of a dash character prevents some browser from wrapping the words connected by it.
• Eric Meyer, the man with CSS skillz that payz da billz, reveals something I've never heard of before: line-height property can use unitless values! The differences between united vs. unitless declarations are well described in his article but I can't believe that I had it all wrong. I've been telling everyone that "You must declare unit for ANY measurement values unless it's zero".
• loudandlonely has an interesting article on how to obscure your email address via CSS by using some clever a:link:before and a:link:after pseudo-elements.
• digital-web has a good run down on things to consider when using CSS typography.
• 456bereastreet takes a first crack at explaining CSS3 selectors
• Another good "footer at the bottom" using only CSS demo.
• Pup's Box Flow Hack shows you how to allow even block items to flow around floating boxes.
• Simple(r) CSS Image Switcher — Unlike the orginal CSS image switcher, this version doesn't use nested unordered lists. Instead, it uses just one unordered list, with the link image placed inside the anchor.
• Another very nice tutorial from 24ways. This time it's Curly Quotes Without Images, a technique popular in citing blockquotes with enlarged quotation marks in the beginning and at the end of the quote. But without using background images.
• FACE is an interesting javascript-powered / CSS-controlled page animation technique.
• Defining CSS constants using PHP is a good article on using PHP to allow constants ('variables') in CSS. For instance you can use this technique to define a repetitive color in CSS as a variable. That way you only need to declare it once and only change that one instance should you want to change that color. Very handy.
• 24ways has a good article on using z-index attribute.
• apples-to-oranges.com has a fantastic tutorial on how to create great looking bar graphs with CSS
• Image map for detailed information showcases use of CSS to provide an image with mouse-over-section for detailed notes.
• From the "How the heck did I miss this" department: cssQuery a powerful cross-browser JavaScript function that enables querying of a DOM document using CSS selectors. All CSS1 and CSS2 selectors are allowed plus quite a few CSS3 selectors.
• Bulletproof logos via simplebits
• Css Color Chart
• Check marking visited links
• CSS Gradients Demo — creating gradient background effect in CSS using server-side constants technique developed bu Shaun Inman.
• Creating s star rating using CSS
  • CSS Star Rating Part Deux is a follow-up to the aforementioned technique that adds the starting "state".
  • And here's an external article which wraps it all up with a tutorial on how to use CSS star rating with PHP and database.
• Image Placement Technique — Yes. Not "replacement" but "placement".
• FooterStick — how to force the footer of a webpage to stick to the bottom of the viewport.
• Shaun Inman's CSS-SSV — using PHP variables in CSS.
• CSS scroll box fade using alpha-channel PNG
• Styling visited links with :after pseudo class
• Footnotes with CSS and JS
• Restaurant menu layout in CSS via web-graphics.com
• CSS scale image — using em values to scale the images in CSS. via bigbaer.com
• Slantastic — create irregular shaped boxes.
• yDSF - Robust CSS Drop Shadows
• CSS sliding photo gallery — an interesting way to present equal-sized images on mouse hover
• alsacreations.com — Nice collection of CSS tutorials that covers most of the basics.
• Using CSS selectors to apply Javascript functionality — 'click here to delete' demo
• Flickr-style image map with only CSS
• Web Color Schemes — via returnofdesign.com
• Making the jump to tableless design — Andy Budd's presentation at @media 2005.
• CSS Help Pile
• Simple Clearing of Floats — various methods of clearing floats.
• Visited links styling — via webdesign.maratz.com.
• mandarindesign's text tricks.
• Sweet collection of CSS how-tos — via maratz.com
• HoverHelp — DHTML/CSS tool tips on hover.
• How-to: Giving To Hiram‚ masthead — Nice masthead design in CSS. via cameronmoll.com
• :focus and :not — 9rules.com discusses two less-known CSS pseudo clsses.
• Dusntan
• welstyled.com -- CSS articles and tips including "min-height hack", "the underscore hack", "single line vertical centering", "photocards". etc.
• Couloir Slideshow Script — Wrong. It ain't Flash. Just pure javascript/CSS goodness.
• WASP list some international sites that are inspired by CSS Zen Garden Project
• Creating "slants" effect in CSS with border properties.

출처: http://www.soxiam.com/Notes/CSSTools