CSS Tools

Várias feramentas para se trabalhar com CSS

CSS-based design galleries

CSS-based Layout:

CSS-based Boxes:

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:

Fonte: http://www.soxiam.com/Notes/CSSTools


2 comentários sobre “CSS Tools

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )


Conectando a %s