Posh CSS

Spiffing CSS

Pat Dryburgh — Sat, 07 Apr 2012 00:17:38 PDT

Brits, take control of the web. Spiffing allows you to write your CSS and stylesheets in conformance to proper British English (also known as correct English) grammar and spelling regulations.

Pixel Perfect Tracking and Alignment

Pat Dryburgh — Sun, 11 Mar 2012 08:24:37 PDT

When you open up your tracking, the text will always push out to the right as letter-spacing is applied from the left. As a result, if you’re centering your type, it will be a few pixels further to the right than it should be.

Taking care of this is simple, but easily overlooked. Just add a negative left margin that is equal to the value you assigned for letter-spacing.

Interactive CSS3 Lighting Effects

Pat Dryburgh — Tue, 13 Dec 2011 01:07:07 PST

An experiment by Tom Giannattasio in using CSS3 to create interactive lighting effects. Best viewed in Safari. (via Ben Bodien)

CSS Mask-Image & Text

Pat Dryburgh — Thu, 03 Nov 2011 12:04:21 PDT

There are currently 2 webkit CSS properties that I’ve grown to love and hope gain more traction & browser support. My favorite would have to be background-clip:text, but it currently degrades poorly. A close second is mask-image, which you can apply to text.

CSS Drop-Shadows Without Images

Pat Dryburgh — Sat, 09 Apr 2011 04:42:03 PDT

Drop-shadows are easy enough to create using pseudo-elements. It’s a nice and robust way to progressively enhance a design. This post is a summary of the technique and some of the possible appearances. (via Mark Forscher)

Create a vertically centred horizontal navigation

Sam Brown — Mon, 31 Jan 2011 19:00:00 PST

There is a way to have a centred horizontal navigation without knowing an explicit width, and without adding CSS. It’s also remarkably easy.

CSS background image hacks

Sam Brown — Mon, 17 Jan 2011 22:30:36 PST

Emulating background image crop, background image opacity, background transforms, and improved background positioning. A few hacks relying on CSS pseudo-elements to emulate features unavailable or not yet widely supported by modern browsers.

3D Text

Pat Dryburgh — Fri, 07 Jan 2011 01:50:54 PST

It is unbelievable to me that this is created entirely with CSS. From Mark Otto: “3D text using nothing but CSS. No extra markup, no :before or :after mess, and no images. Just progressively enhancing CSS to add some flair to your work.”

Flexible Nav

Levi Figueira — Fri, 31 Dec 2010 00:39:11 PST

Remember when you needed Flash to create cool navigation menus? Ya, me neither… ;)

Controlling text size in Safari for iOS without disabling user zoom

Sam Brown — Tue, 21 Dec 2010 20:50:25 PST