CSSBEAUTY™

CSS background image hacks. Emulating background image crop, background image opacity, background transforms, and improved background positioning.

Box Sizing. A nice trick to force <textarea> to have padding and border that cut into it’s 100% width instead of expanding it.

CSS Counters: counter-increment and Friends. Combine three CSS properties and a pseudo-element to create auto-incrementing counters — similar to what is displayed in an ordered list.

CSS Filters. A 5 minute microslot on how to make sure the browser you want gets the CSS that you want it to have!

Cross-Browser CSS Gradient. Pure CSS gradients that work in these major browsers: IE, Firefox 3.6+, Safari, and Chrome.

Drop Shadow With CSS For All Web Browsers. Explains the use of the drop shadows using CSS and how to get it working in IE.

Anaglyphic Text Effect with CSS. Learn how to create an anaglyphic text effect with some simple CSS.

Optimizing HTML. Reduce your HTML document size by getting rid of redundant structures and employing minification techniques.

Shadows and CSS3. Learn how to use text and box-shadow, along with RGBA to create shadow colors.

The New Clearfix Method. Say goodbye to the age-old clearfix hack and hello to the new and improved clearfix method.

Smoother @font-face embedding in IE 7 & 8. A fix for IE7 and IE8's rendering issue when using embedded fonts. Check out the jQuery plugin as well.

Nice Buttons with CSS3 and RGBA. Learn how to create nice looking scalable buttons by taking advantage of RGBA in CSS3.

Pure CSS text gradient (no PNGs). A technique that allows you to create a text gradient by using only CSS.

Fluid Images. A new technique for dealing with images in fluid layouts.

Image-free CSS Tooltip Pointers. An experimental approach to creating tooltip pointers using polygonal CSS.

Vertical Centering With CSS. Learn five different methods to vertically center objects using only CSS.

Pure Css Line Graph. A solution for creating line graphs using nothing but CSS.

Scalable CSS based breadcrumbs. Simple and scalable breadcrumbs using only one simple graphic, basic CSS styling and an unordered list.

The State Scope Method. A new JavaScript-based method for image replacement.

Web Design+. A nice collection of web-standards solutions for common web development issues and problems .

CSS: Menu List Design. A quick CSS tutorial to show you how to create a menu list using either the CSS border style or a background image.

CSS Sticky Footer. Finally a sticky footer solution that works in all major browsers.

Scrolling Trick with Background Images. Learn how to implement a nice little trick using fixed background images in CSS.

Why Programmers Suck at CSS Design. Tips & Tricks on how to make your web pages look cleaner, more readable and more professional.

CSS Browser Hacks For Firefox, Opera, Safari & Internet Explorer. Target a browser other than Internet Explorer using CSS Hacks.

CSS - An Absolute Mess. Talks about the problems that crop up time and time again with absolute positioned elements in IE6 and how to solve the issues.

How to recreate Silverback’s Parallax. Paul Annett explains how he used the effect to great success on their newly launched Silverback site.

Max and Min Height and Width in Internet Explorer. Max/min-height and max/min-width properties are possible in IE by taking advantage of IE’s proprietary CSS attribute, expression.

CSS - A Recipe for Success. Reproduce a restaurant menu (or recipe) using only CSS.

CSS PNG Image Fix for IE. A modified CSS snippet to automagically replace PNG images with their AlphaImageLoader equivalent in IE6.

Disabling Deprecated HTML Using CSS. Preserving the natural cascade and inheritance in all browsers, while gracefully disabling the HTML we don’t want the client to use.

Graceful E-Mail Obfuscation. Hide e-mail addresses from spam bots while revealing them to readers as real, clickable links.

PNG Transparency for Internet Explorer. A streamlined solution to dealing with semi-transparent PNGs in Internet Explorer 6.

The Positive Side of Negative Margins. Learn how negative margins work and how to apply them in everyday usage.

Conflicting Absolute Positions. Produce a liquid layout that contains a fixed-width, scrolling side panel and a flexible, scrolling main panel.

Web Application Form Design. Learn about the effects of vertical and horizontal labels and the impact color can have on a form.

Scalable CSS Buttons. Dynamic CSS Buttons using PNG, transparency and background colors that degrades nicely and supports full scalability.

Fancy Form Design Using CSS. Learn ways in which you can design a great-looking forms.

Bulletproof graphic link buttons with CSS. Create an image-based button that will expand and contract to fit the amount of text it contains.

Creative Use of PNG Transparency in Web Design. Wonderful ideas for using PNGs in our desings, and why it should become the file format of choice.

70 Expert Ideas For Better CSS Coding. Useful CSS tricks, tips, ideas, methods, techniques and coding solutions.

Managing Style and State. Learn how to change page state on the fly with a bit of JavaScript and CSS.

Accessible Display: None. Using clever CSS to achieve the same visual effect as display: none without the accessibility drawbacks.

Variables in your CSS via PHP. Create color constants in your CSS & randomly generated paths for backgrounds of DIV's.

Easy cross-browser transparency. Create image or layer transparencies easier by using only CSS.

Making Compact Forms More Accessible. Making compact forms more accessible and easier to use.

Automatic merging and versioning of CSS/JS files with PHP. Merges files on the fly whilst also versioning the merged file automatically as the various component files change.

Vertical Centering with a Shiv Div. Vertically center blocks in browser windows using a bit of markup and CSS.

Inline image quotes. An easy and effective way to create inline image quotes with CSS.

Wake up and smell the IE7!. This article delves into the specifics of what IE7 means for your page content and styling.

Dynamic CSS Changes. Three methods for changing the appearance of a site through the use of JavaScript, and how to make them work together.

In search of the missing run-in value. Taking advantage of a little-known CSS value, the run-in display.

Highlight Microformats with CSS. A way to highlight microformats using a custom stylesheet in Camino, Safari or Omniweb.

CSS Browser Selector. A script that allows you to create browser specific CSS to target specific browsers.

20 pro tips. Tips and tricks you should be using to give your work that all-important professional edge.

15 Things you can do with Yahoo! UI. Slicken up your web apps with these tips and tricks using the Yahoo! User Interface library.

Dotted image border. A simple technique for achieving various border effects using a little pattern background image.

Understanding “Any order columns”. How to have three columns in one order in the source document— but laid out in any order we want using CSS.

Microsoft, ActiveX and noscript. Clever flash embedding method addressing the latest Microsoft debacle.

Stripe your tables the OO way. A new and improved Zebra Table technique for alternating colors between rows.

JavaScript instead of Target="_blank". Using semantic XHTML and unobtrusive JavaScript to create a nice pop-up window that works in Strict doctypes.

CSS Caching Hack. A way to trick browsers to download a new CSS file each time.

Simultaneous cross plattform/browser CSS styling. Auto reload the html file and ever touch the browser again to reload while coding CSS.

CSS Curves. A simple tutorial on how to create textual curves using only CSS.

Clearing floats without structural markup in IE7. Utilizing the overflow method as an appropriate solution for all versions of Internet Explorer.

CSS Problem Solving SxSWI. Ethan Marcotte's SXSW presentation "Float like a Butterfly".

CSS Problem Solving. Dave Shea's SXSW presentation on how to solve certain CSS problems.

Creating a Block Hover Effect for a List of Links. Recreating the hover effect seen on Veerle's newly redesigned site.

Clearbits. A small spinoff of the Bitcons icon set that allows for CSS-based coloring and framing.

Scalable logos. Make your logo scale up or down when the user resizes the text, without lose of quality. via Help Pile.

Wicked Worn & Bulletproof Liquid. Two techniques merged together - one a graphic design trend, the other a web standards coding philosophy.

Outline property for image-replaced links. Remove the outline border when an image-replaced link is clicked, while controling dimensions of the outline border.

Nested lists used to create a simple folder metaphor. Example showing how to make a folder analalogy using a nested list.

Removing Dotted Links. Getting rid of the dotted outline that wraps links that have negative value applied to text-indent.

CSS Star Rating Part Deux. Follow up to the original article, this time the system is more flexible.

Clearing floats with Display:table. Wrap the content in a div container and add display:table.

CSS tricks for custom bullets. Styling links, bulleted lists, and more using the background property.

Printing CSS background images. Including graphics via the CSS' "lists" functionality for print.

CSS Checklists an alternative to Select Boxes. Replace that cumbersome select box with a scrollable checklist.

"Z's not dead baby, Z's not dead". Positioning together with z-index and alpha transparent PNG images.

Top 12 CSS Articles/Tricks of 2005. Hand picked from monthly archives (one for each month).

CSS Text FX. A new technique for creating slanting text with CSS. Would work well with the Worn Type Technique.

Centered Tabs with CSS. Create a flexible, centered alternative to floated navigation lists with inline box.

CSS for Bar Graphs. Great write up on how to create some attractive bar graphs using CSS. Via css help pile.

CSS Technique: Worn Type. Placing a repeating pattern image on top of the text.

0° CSS Shadow Technique. Apply shadows to block elements with the shadow appearing below and on both sides of the object.

Single Image Multi Replacement. (SIMR) Uses a single image to replace more than one heading...

CSS Resizable Underlines. A new method of applying underlines using only CSS. In response to Colly's CSS Challenge.

Snook's Resizable Underlines. Apply underlines to paragraph text that stretch the whole width of the column (without using justified text).

Ten more CSS tricks you may not know. Follow up the the previos article.

CSS Star Rating. Tutorial on how to create a Star Rating System using CSS.

CSS tests. List of CSS tips, tricks, hacks, all well categorized.

How to style a restaurant menu with CSS. Nice tutorial by the guys over at WB.

CSS Scale Image Html Tutorial. Enabling CSS image scaling by using ems.

yDSF - Robust CSS Drop Shadows. Another method of applying soft alpha-blended drop shadows that scale with the size of the box.

Hide CSS using @import. Table containing different @import rules and supporting browsers.

Avoiding classitis. Nice turorial on reducing the amount of classes in your code for easier site maintenance.

ARC. An experiment using Javascript and CSS to customize the appearance of radio buttons.

CSS tips and tricks, Part 2. Followup.

CSS tips and tricks, Part 1. For those starting out with CSS.