HTML/CSS

CSS Tools

부니기 2008. 5. 24. 02:23

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

CSS-based design galleries

CSS-based Layout:

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.
  • My Favorite Nifty Cube — v3 of nifty corners. New features make it more flexible, less crufty.
  • My Favorite 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.
    • My Favorite 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.
  • My Favorite 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:

CSS and Form Elements:

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.
  • My Favorite 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
  • My Favorite 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 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.
  • My Favorite 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.
  • My Favorite 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.
  • My Favorite 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.
  • My Favorite 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: