Submit a CSS related link →

Posh CSS

For the modern day web designer.

Code

CSS3-Only Tabbed Area

# Linked to 8 March 2010, 17:46 in by Pat Dryburgh

When you think of “tabs”, your mind might go right to JavaScript. Watch for a click on a tab, hide all the panels, show the one corresponding to tab just clicked on. All major JavaScript libraries tackle tabs in some way. But there is a way to accomplish this same idea with “pure CSS”.

Read more at css-tricks.com →

CSS Word Clock

# Linked to 3 March 2010, 08:17 in by Sam Brown

A little experiment I built: a word clock using CSS3 transforms and a little Javascript to run the actual clock. Useful? Maybe not. Fun? Definitely.

Read more at dtott.com →

How To Provide a Flexible Base for Text

# Linked to 29 January 2010, 15:15 in by Kevin Holesh

Dan Cederholm talks about the potential problems with sizing your text in absolute units (pixels) versus relative units (ems and %).

Read more at www.youtube.com →

CSS Primer

# Linked to 3 January 2010, 08:20 in by Kevin Holesh

Primer undercoats your CSS by pulling out all of your classes and id’s and placing them into a starter stylesheet.

Read more at primercss.com →

Make it snow CSS3 style

# Linked to 18 December 2009, 13:37 in by Ross Chapman

It’s cold and snowy down here in Brighton, so to celebrate the falling white stuff (and of course the various festivities at this time of year) Clearleft’s very own Natbat has made a snowy CSS3 animation surprise for all you Safari and Chrome users out there.

Read more at clearleft.com →

CSS Browser Selectors

# Linked to 6 December 2009, 22:59 in by Kevin Holesh

CSS Browser Selector is a very small javascript with just one line which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser.

Example:

.ie .example { background-color: yellow }
.ie7 .example { background-color: orange }
.gecko .example { background-color: gray }

Think of the potential use of these classes to target modern browsers for advanced CSS3 properties while still styling an older browser like IE6 in an appropriate and compatible way.

Read more at rafael.adm.br →

Using Data URIs in CSS

# Linked to 30 November 2009, 10:10 in by Sam Brown

Data URIs allow any file to be embedded inline within CSS. Check out the examples and descriptions.

Read more at nimbupani.com →

How to bring CSS3 features into your design

# Linked to 13 November 2009, 11:23 in by Sam Brown

Top web browser (such as Firefox 3.5 and Safari 4) have introduced some cool features you can already use. Now, with just a few lines of css you can do things you used to do with images and javascript.

Read more at welcome2thesky.com →

Dropdown with Flyout CSS Menus

# Linked to 29 October 2009, 08:29 in by Ross Chapman

This page will be expanded over the coming year to show how the same simple nested unordered list can be styled in different ways to produce professional quality dropdown / pullup menus.

Read more at www.cssmenus.co.uk →

Accessible, Custom Designed Checkbox and Radio Button Inputs Styled with CSS (and a dash of jQuery)

# Linked to 22 October 2009, 00:29 in by Kevin Holesh

Whew, what a title! This method for adding custom styles to checkboxes and radio buttons is the best I’ve come across yet because of its degradability. When JavaScript is enabled, users see custom input checkboxes and radio buttons as shown below; when users are browsing with JavaScript disabled or with a screen reader, they simply interact with standard, unstyled input elements.

Read more at www.filamentgroup.com →