Interaction design • webdevelopment • web art • photography

December 2012

24 ways: Flashless Animation

RT @sgalineau: I had never heard of the 'all' CSS property until today

RT @twholman: Oooh! amazingly sexy #javascript chess - - by @JulianGarnier

November 2012

exploring the differences between android v2.3.7 and v4.1.1. glad to now play around with a mobile browser that supports 3d css transforms

RT @smashingmag: "IDs have their place in CSS as well." — In Defense of Descendant Selectors and ID Elements by @zeldman: nd-id-elements/

RT @csswizardry: New blog post: Code smells in CSS: cc. @chriscoyier

October 2012

RT @cubiq: once we recreated all possible objects with CSS can we start using SVG?

RT @paul_irish: Cool: recent StackOverflow question led to someone make a CSS Diff DevTools extension

September 2012

my previous css-only animation (iris - ) is featured on the home page of @CodePen, neato:

css fire flower on codepen: (alternate version revealing the element/shadow structure: )

my phone can't show char ✽ (HEAVY TEARDROP-SPOKED ASTERISK), so fire flower becomes fire squares

made another css-only animation, 124 - fire flower:

July 2012

fixed 123 counter-rotation on ipad by replacing (unsupported?) animation-direction:reverse with separate animation rule

123 (css animation) - combined my old fave, border-style dashed, w/ border-radius 50%. Only works in Chrome, it seems:

hover effects in my css-only anim 120 now also triggered on ipad touch events, thanks to replacing div's with a's

June 2012

3D Thumbnail Hover Effects via

RT @attasi: I built a CSS 3D lighting engine. It's called Photon. What do think?

RT @keithclarkcouk: Just to see what it would look like: A 3D logo with lighting using webkit CSS masks, gradients and 3D transforms:

RT @twholman: The new twitter logo with #css - - Don't forget to mouse-over!

fun with Chrome css filter: javascript:void(deg=0,setInterval(function(){'hue-rotate('+(++deg)+'deg)'},55))

May 2012

RT @jordanmoore: Source shuffling - serving the right image for the right device using @adactio's Conditional CSS - images-based-on-media #rwd

April 2012

Responsive CSS3 Slider Without Javascript by @teapoted

RT @NickSherman: The Neue Haas Grotesk site is an experiment in SVG type specimens. Zoomable, prints at high res, defaults to GIFs in IE

RT @chriscoyier: Mario animation (via rapid media query changes) by @btraut

March 2012


a css-only (no js) mouseover animation using :hover, border-radius, transform and transition properties:

October 2011

RT @LeaVerou: Quick #usability tip: Make disabled controls more obviously disabled with :disabled { cursor: not-allowed; }

July 2011

December 2009

24 ways - the advent calendar for web geeks [via]

June 2006

Slashdot - Håkon Responds to Questions About CSS and... [via]

November 2005

Position is Everything - In search of the One True Layout [via]

September 2005

CSS Table Gallery [via]

June 2005

new feeds view

I'm having a lot of fun styling my new simple and lean feeds view. Check it out in a browser that supports modern CSS (i.e. not IE) and observe li:hover, ::after and content: attr(href) in action...

Well, it seems is offline for a bit after being sold to some unknown party, so the feeds view might not get updated for quite some time. Anybody know any other good centralized weblog update trackers? I tried BlogRolling for a while but it only seemed to indicate one new updated weblog per day.

Update 2: is back, yay! Turns out it's been acquired by Yahoo!.

May 2005

position:fixed comment form (scroll down to see the effect) [related] [via]

Designline - A Design Timeline animation

February 2005

a maze puzzle written entirely in css [via]

January 2005

css Zen Garden, 1996 Geocities style [via]

S5: A Simple Standards-Based Slide Show System [via]

How to display <ul> elements as a flat comma-separated list (now in effect in the main menu and links list in the left-hand column):

ul.links { list-style: none; margin: 0; padding: 0; }
ul.links li { display: inline; }
ul.links li:after { content: ","; } 
ul.links li:last-child:after { content: ""; }

The advantage of this is that changing the default separator from a comma to | or - or whatever now means only having to change one character in the stylesheet.

Note: Internet Explorer doesn't support the css content attribute or :after and :last-child pseudo-classes, so the commas won't appear in IE.

November 2004

Onload image fades without Flash [related] [via]

October 2004 [via]

Zooiblog - Scrolling Drop Shadows [via]

naar voren - structuur in de chaos

Negative(!) text-indent is in effect in the quicklinks list (over there on the left of the front page). Handy... applying a style like padding-left: 10px; text-indent: -10px; to an element makes all lines of that element appear indented except the first one.

Skinning Gmail with a Custom Stylesheet [via]

Shaun Inman of the Dead

September 2004

Link presentation and Fitts' Law

Web development mistakes [via]

July 2004

fixed width font in Gmail

Does Gmail have a setting somewhere to make message text appear in a fixed width font? 'Cause if it does, I sure can't find it...

To force it to use a fixed width font anyway, I added the following to userContent.css in my Firefox profile:

div.msg div.mb {
  font-family: monospace !important;
  font-size: 12px !important;
(Firefox's 'View Selection Source' came in real handy trying to figure out these classnames; regular View Source is a pain on Gmail because the whole thing's Javascript-generated.)

using text-overflow: ellipsis [via]

June 2004

colour subdomains updated

Rather than appearing as blank pages of a single colour, the colour subdomains now have an info footer showing calculated dec/hex/percentage values, as well as a row of lighter/darker variations.

test: purple, 144.200.180, cc9966, f0f, activecaption Bending the Matrix [via]

May 2004

using :visited and expression() to detect any visited link

There's been some talk (see Anne, CollyLogic) about it being possible to use the :visited pseudo-class and background-image urls to detect if a user has visited a particular link.

Luckily for Internet Explorer users, they are unaffected because IE doesn't support the [href=] selector. Unfortunately, there's another method that does work in IE and is even more dangerous...

read more »

Son of Suckerfish Dropdowns, a css dropdown menu with minimal use of js

CollyLogic: ticked off visited links

January 2004

integrating javascript into stylesheets

Ben Nolan's non-link element hovering trick for Internet Explorer (that normally only allows :hover styles on links) is pretty handy, but what really impressed me about it is his way of integrating arbitrary Javascript functions into the stylesheet itself:

body {
  background: url("
      document.body.onload = function(){
        ...custom js here...
By specifying a rule like this in the browser's user stylesheet, it might even be possible to run a custom set of Javascript commands on opening of any visited website. (Although my brief attempt at making this work proved unsuccessful.) [via webgraphics]

October 2003

the house that css built

3D Border Demo 2 - LEGOish drawing of a house, built entirely using css borders. Impressive! Made by Design Detector. [via]

Speaking of stylish <ul> listings, check out IF THEN ELSE (who also caught the redesign bug this week)'s take on it; scroll down a bit and hover over the leftside menus. By already showing a tiny border in the default link state, and increasing the border size on hover, it looks like LEDs lighting up. Pretty colours!

Update: check out his newly added HOW-TO.

September 2003 - max-width in Internet Explorer - using the IE expression() syntax to simulate the css max-width property, which works in Mozilla/Opera but not in IE.

Listamatic - css examples for styling basic <ul> lists. I like this trick where a fat border-left is used to create a neat hover effect. [via]

July 2003

Creating slanted edges with CSS borders - neato; there's even an animated example of a vector-like pattern: by overlaying the "slant" with a slightly offset slant of similar size but coloured like the background, it's possible to create lines of any angle or length in regular DHTML -- without having to resort to IE-only VML code. [via Arthur is verweg!]

May 2003

Captain Cursor and His Cursor Styles - from this Webmonkey article dated 23 Sep 1997.

Simon Willison has been posting a couple of interesting CSS tutorials lately. [via]

December 2002


November 2002

Wow, I just came across a <font>-tag in a script of my own from december 2000. Possibly the last time I ever used one...

October 2002

Hmm... My adding of body{overflow:hidden;} to the stylesheet of various dhtml animations of late is causing Phoenix (and probably any Gecko-based browser) to display a blank page... Removing the overflow-property makes them work again.

Could it be this trick of hiding the scrollbars has the nasty effect of altering the width/height of the body- or html-object, thereby messing up my dhtml item placement routines?

Aha, adding height:2000px; (or another pixelvalue that's sure to be higher than the window height) to the body{...} style seems to fix things. Still, weird; I don't remember having to do this in earlier Mozilla versions.

August 2002

Idea: faking css attribute selectors in Internet Explorer by using IE's special Javascript expression() properties

Example: setting the background of all <input>-tags to yellow, but only if they're of type 'text':

/* standards-compliant; works in Mozilla */

/* alternative for Internet Explorer */
    this.type=='text' ? 'yellow' : 'transparent');

July 2002

One example and another example of positioning custom top/right/bottom/left corners with css. [via Simon Willison]

Apparently, IE5.0 Mac doesn't support multiple classnames if you start the param with whitespace, like so:
<div class=" class1 class2">
(discovered after forgetting to trim some php-vars.)

March 2002

To the person Googling for "removing line break after h1", try adding h1{margin-bottom:0px} or h1{display:inline} to your stylesheet.

January 2002

If your site has a white background, please also indicate so in your stylesheet. Don't assume people have their default browser background set to white (mine's #C0C0C0 - making plenty of pages look unintentionally gray).

December 2001

I actually sorta like the Flash of Unstyled Content (= the delay before a linked stylesheet is applied to a loading page). It can be very satisfying to see a page 'jump' from unstyled oldskool plaintext to pretty modern design. [via Weblog Wannabe and others]


November 2001

The CSS equivalent of <nobr> is white-space: nowrap;
[via Wouterd]

October 2001

Couldn't get this to work in Mac IE5:
clip:rect(0 100 100 0);

Turns out I had to use 'px' unit indicators:
clip:rect(0px 100px 100px 0px);

August 2001

A List Apart has more CSS goodness today. [via Low]

July 2001

'height: 100%' discussion at
[via massless]

view-source: for a little ascii-art. Stylesheets can get a bit overcomplicated; for optimum maintainability, I divided this one into three sections: layout, type and colour. Also tried using indentation to enhance readability.

June 2001

CSS pixel talk at lgf [via Zeldman]