CSSBEAUTY™

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

@font-face tip Define font-weight and font-style to keep your CSS simple.

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.

25 HTML5 Features, Tips, and Techniques. A primer of the things you must know.

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.

Make Your Mockup in Markup. Is it time to ditch Photoshop and start designing in the browser?

Cleaner Code with CSS3 Selectors. Learn how CSS3 selectors can be used to get some of the junk out of our front and back-end code.

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.

Type-Inspired Interfaces. A few tips on taking cues from type to design interfaces and interface elements.

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.

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

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

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.

Recession Tips For Web Designers. A few tips for web designers and developers to take into 2009. Also make sure you check all the articles on 24ways for 2008, good reads.

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

Everything You Know About CSS Is Wrong. Learn how to quickly and easy produce table-like grid layouts using CSS.

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

Fix Your CSS . This article address some common problems and misconceptions when using position:fixed.

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.

Creating Sexy Stylesheets. 10 CSS tips culled from surveys with 12 top designers.

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

Better Web Forms: Redesigning eBay's Registration. A demonstration on the do’s and dont’s of effective form design.

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.

Using multiple classes within selectors. Creating a multiple class selector may make the selector more specific or give it additional weight. This means it will overwrite less specific selectors.

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.

Rediscovering the Button Element. A nice write up on styling the <button> element.

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

CSS hover effect. Nice write up on how to accomplish a stylish hover box effect.

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

Form Field Hints. A nice way to give the user feedback by showing hints for each input field.

Setting Type on the Web to a Baseline Grid. Learn how to work with typographic baselines on the web.

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.

Markup as a Craft. Carefully crafting your markup is like making a lucrative investment in the future of your code base.

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.

Designing simple, accessible forms. Keeping forms simple in order to attract and retain clients, while also ensuring they are in keeping with your site.

Rich Typography. An example of what you can do by combining and tweaking type using css.

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.

Beginner's guide from a seasoned CSS designer. A must bookmark for those hoping to refine web design and development skills.

Understanding CSS Specificity. Specificity can be tricky. Here's a quick approach that can help you out if you are having specificity issues.

Advanced Accessibility Techniques. Techniques you can implement to achieve advanced accessibility beyond the W3C guidelines.

8 steps to serving better (X)HTML. A summary of 8 steps any web developer can take to improve their page code.

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

Using a Background Image Grid to Lay Out Your Web Site. Apply the grid to the body of your page as a background image and use it to precisely line up your layout.

The Importance of Maintainable JavaScript. Eight step plan that shows how to make your scripts easier to maintain.

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.

Schillmania Rounded Corners: Perhaps the best, most pragmatic implementation of rounded corners with images and css using standard module formats.

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.

Well Educated CSS. Creating more efficient sites by taking advantage of the id and class attributes in the body tag.

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

Design View - Design Test. Andy Rutledge invites readers to take the knoweldge challenge. Will you pass muster? Go find out.

Automatic Scaling of Base Font (ASBF ). A way to get 1em to equal the same # of pixels on all browsers for identical scaling on all browsers.

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

Projecting your CSS. Make your site more usable and also provide Opera with a fullscreen mode experience by utilizing the projection media type.

A Designer's Guide to Prototyping Ajax. A number of techniques and guidelines to help your team design for Ajax—rapid prototyping.

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.

Hierarchical Sitemap with Dashed Lines. CSS tutorial showing how to use a nest unordered list to create a hierarchical sitemap.

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

CSS Code Visual Grouping Techniques. A collection of basic and sensible coding practices that help create visual and logical groupings in your stylesheet.

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.

Unitless line-heights. Eric Meyer explains how the property line-height can accept unitless number values, and why they're a better choice than united values.

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.

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

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

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.