Advertise here with Carbon Ads

This site is made possible by member support. ❤️

Big thanks to Arcustech for hosting the site and offering amazing tech support.

When you buy through links on kottke.org, I may earn an affiliate commission. Thanks for supporting the site!

kottke.org. home of fine hypertext products since 1998.

🍔  💀  📸  😭  🕳️  🤠  🎬  🥔

kottke.org posts about CSS

Painting with CSS

Diana Smith CSS painting

Believe it or not, the image above was made using only HTML & CSS by developer Diana Smith. It’s coded by hand and built for Chrome — you can check it out here. The source code and accompanying CSS is not as extensive as you might think.

As Andy Baio notes, Smith’s creations render less well in other browsers. Who knew Internet Explorer 8 for Windows 7 was a Cubist master?

Diana Smith CSS Cubist

You can view several other of Smith’s creations here, here, and here.

See also Tatsuo Horiuchi, the Excel Spreadsheet Artist. (via waxy)


Cascading Style Simpsons (CSS)

Chris Pattle has constructed Simpsons characters completely out of CSS.

Simpsons CSS

We’ve come a long way from #cccccc. And it looks like Pattle avoided the Simpson No-Nos.

Simpsons No Nos


Star Wars opening crawl done with HTML/CSS

Tim Pietrusky made an HTML/CSS version of the opening text crawl from Star Wars.


iPhone in CSS3

iPhone CSS3

Is it real or is it CSS3? Amazingly, the above image was made entirely in HTML and CSS3 by Dylan Hudson. (via ★interesting)


CSS3 solar system

Gorgeous CSS3 animation of the solar system. But here’s what it looks like in IE (tee hee).


3-D effect in CSS

Roman Cortes took Diego Velázquez’s Las Meninas and applied a pseudo 3-D parallax effect to it using only CSS. Awesome. Now redo The Kid Stays in the Picture entirely in CSS.


Using CSS to consistently style forms buttons

Using CSS to consistently style forms buttons across IE, Firefox, and Safari.


Nasty Nets used CSS positioning to “embed”

Nasty Nets used CSS positioning to “embed” one YouTube video into another. “Be sure to hit ‘play’ on both YouTubes.” Reminds me of the animated GIF mashups (more).


New design for A List Apart, the

New design for A List Apart, the venerable Web design site, done with XHTML/CSS (of course) and Ruby on Rails. (via waxy)


Creating styled checkboxes and radio buttons with CSS and JavaScript

Creating styled checkboxes and radio buttons with CSS and JavaScript.


Giant-Ass Image Viewer

Giant-Ass Image Viewer. Python script (+JavaScript and CSS) for cutting up and viewing large images, a la Google Maps.