Submit a CSS related link →

Posh CSS

For the modern day web designer.

Tutorials

Better Page Corner Ads with CSS3 Transforms

# Linked to 13 May 2010, 09:10 in by Sam Brown

A corner ad should be triangular, and so should its clickable area. CSS3 now makes that possible.

Read more at www.impressivewebs.com →

Center Multiple DIVs with CSS

# Linked to 11 May 2010, 09:43 in by Sam Brown

At some point, you may have a situation where you want to center multiple elements (maybe <div> elements, or other block elements) on a single line in a fixed-width area. Centering a single element in a fixed area is easy. Just add margin: auto and a fixed width to the element you want to center, and the margins will force the element to center.

There really should be a similar simple way to center multiple elements evenly spaced.

Read more at www.impressivewebs.com →

The CSS 3 Flexible Box Model

# Linked to 24 April 2010, 17:20 in by Kevin Holesh

CSS 3 introduces a brand new box model in addition of the traditional box model from CSS 1 and 2. The flexible box model determines the way boxes are distributed inside other boxes and the way they share the available space.

Read more at hacks.mozilla.org →

Creating a Realistic Looking Button with CSS3

# Linked to 18 April 2010, 20:17 in by Levi Figueira

The whole idea is to use a combination of subtle effects to create a three dimensional object. Mike Rundle covers some of the ideas used here in his post about subtlety in interfaces. I’m hoping to expand a bit more on that. The idea is that:

  • The button is set into the canvas.
  • The texture of the button is different from the canvas and the surface is slightly raised.
  • And the text of the button is pressed into it.

Read more at blog.anomalyinnovations.com →

Cross-Browser CSS Gradient

# Linked to 14 April 2010, 13:59 in by Sam Brown

This post will show you how to code for the CSS gradient to be supported by the major browsers: IE, Firefox 3.6+, Safari, and Chrome.

Read more at www.webdesignerwall.com →

Rounded corners on images, CSS-only

# Linked to 2 April 2010, 09:15 in by Sam Brown

Admit it, even though rounded corners are widely seen as overused, you love playing with border-radius. A common complaint is that you can’t use that CSS3 property on images. Define any value, and the images will still display as nature intended: straight corners. For a project I’m working on, it would’ve been really nice having certain images displayed with rounded corners, so I started looking at the options…

Read more at maxvoltar.com →

CSS Opacity: A Comprehensive Reference

# Linked to 25 March 2010, 10:00 in by Sam Brown

This reference is going to provide a detailed overview of CSS opacity, along with some code examples and explanations to help you implement this useful CSS technique in your projects equally across all browsers.

Read more at www.impressivewebs.com →

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 →