Submit a CSS related link →

Posh CSS

For the modern day web designer.

Tutorials

CSS3-Only Tabbed Area

# Linked to 8 March 2010, 23:00 in by Sam Brown

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”. Let’s tackle this traditionally JavaScript project with only CSS.

Read more at css-tricks.com →

Progressive enhancement: pure CSS speech bubbles

# Linked to 8 March 2010, 11:00 in by Sam Brown

Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. This tutorial contains various forms of speech bubble effect created with CSS2.1 and enhanced with CSS3. No images, no JavaScript and it can be applied to your existing semantic HTML.

Read more at nicolasgallagher.com →

CSS3 Loading Spinners Without Images

# Linked to 4 March 2010, 11:00 in by Sam Brown

While playing around with css-transform to make various shapes, I saw a way to create animated image-less loading spinners such as used in a lot of webapps and of course on the iPhone.

Read more at kilianvalkhof.com →

CSS3 box-shadow and image hover effects

# Linked to 25 January 2010, 11:38 in by Sam Brown

An interesting way of applying the box-shadow property is to use it for image link hover/mouseover effects. That’s not the only use of course but I think it’s a good one. In this case, more advanced browsers will see the drop shadow applied but other browsers will see a slightly less decorative effect.

Read more at www.cvwdesign.com →

How to Create a Cool Anaglyphic Text Effect with CSS

# Linked to 4 January 2010, 10:01 in by Sam Brown

Let’s take a look at how to create a cool anaglyphic style text effect for sprucing up your web designs, while taking into consideration semantics and avoiding the repetition of any markup.

Read more at line25.com →

Shadows and CSS3

# Linked to 15 December 2009, 19:53 in by Pat Dryburgh

Applying text-shadow to elements is easy, and coupled with RGBA it works beautifully. Since both text-shadow and RGBA are supported by Safari, Firefox, Konqueror, and Opera, why not start playing with them now?

Read more at owltastic.com →

Realigning For A Beautiful Web using HTML5, CSS transforms and transitions

# Linked to 3 November 2009, 18:18 in by Kevin Holesh

Example of using CSS transitions to add a visual treat to Webkit browsers. CSS transitions are coming to Firefox in 3.6, but for now, this tutorial only works in Webkit browsers.

View the live example on the For A Beautiful Web homepage.

Read more at forabeautifulweb.com →

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

# Linked to 30 October 2009, 03:25 in by Kevin Holesh

The name might be a little misleading, because sprites aren’t little images like you might be picturing, a sprite is actually one big image.

This article will show you how to use CSS Sprites to cut down on HTTP requests and improve the efficiency of your web page. Also, it suggests the handy tool SpriteMe to automate the heavy calculations and eliminate the need for Photoshop.

Read more at css-tricks.com →

Using Rounded Corners with CSS3

# Linked to 26 October 2009, 16:39 in by Kevin Holesh

As CSS3 gets closer to becoming the new standard for mainstream design, the days of rounded corners through elaborate background images is fading. This means less headache and time spent working out alternatives for each browser.

This article compares the current browser implementations of the border-radius CSS3 property.

Read more at buildinternet.com →

The Ultimate Guide to Creating a Design and Converting it to HTML and CSS

# Linked to 26 October 2009, 12:13 in by Ross Chapman

This screencast will serve as the final entry in a multi-part series across the TUTS sites which demonstrates how to build a beautiful home page for a fictional business. We learned how to create the wireframe on Vectortuts+; we added color, textures, and effects on Psdtuts+; now, we’ll take our completed PSD and convert it into a nicely coded HTML and CSS website.

Read more at net.tutsplus.com →