CSS3-Only Tabbed Area
# Linked to 8 March 2010, 17:46 in Articles 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”.
CSS Word Clock
# Linked to 3 March 2010, 08:17 in Code 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.
How To Provide a Flexible Base for Text
# Linked to 29 January 2010, 15:15 in Code by Kevin Holesh
Dan Cederholm talks about the potential problems with sizing your text in absolute units (pixels) versus relative units (ems and %).
CSS Primer
# Linked to 3 January 2010, 08:20 in Code by Kevin Holesh
Primer undercoats your CSS by pulling out all of your classes and id’s and placing them into a starter stylesheet.
Make it snow CSS3 style
# Linked to 18 December 2009, 13:37 in Code 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.
CSS Browser Selectors
# Linked to 6 December 2009, 22:59 in Code 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.
Using Data URIs in CSS
# Linked to 30 November 2009, 10:10 in Code by Sam Brown
Data URIs allow any file to be embedded inline within CSS. Check out the examples and descriptions.
How to bring CSS3 features into your design
# Linked to 13 November 2009, 11:23 in Code 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.
Dropdown with Flyout CSS Menus
# Linked to 29 October 2009, 08:29 in Code 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.
Accessible, Custom Designed Checkbox and Radio Button Inputs Styled with CSS (and a dash of jQuery)
# Linked to 22 October 2009, 00:29 in Code 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.