CSS Love Child

24 April 2006

40 comments

A Blue Perspective: CSS Love Child

I'm usually all about creating conflict. So, I thought it's high time that I add some love to the Internet.

On Late Night with Conan O'Brien he loves playing a game where they take two celebrities and "calculate" what their offspring would look like. Well, what if you could do the same with a Web page? You'd end up with a CSS Love Child.

My little bit of Perl scripting lets you take the HTML from one page, add the styles of another, and end up with a hideously mutated beast that can sometimes be amusing, sometimes be revealing, but most of the time looks like a fourth generation hillbilly.

Some observations on the more interesting combinations:

Obviously, as a design gets more complex, the HTML becomes more tailored to producing visual effects and the CSS doesn't apply as well to other sites. So, Joe Clark's uber-simple design translates well across most sites and still remains distinctive – mainly through its unique use of typography – while Khoi Vinh's intricate grid-based design on Subtraction hardly translates to anything else.

It's apparent that layout requires the most individualistic HTML – background images, colours and fonts manage to shine through – while most of the CSS/HTML mashups are reduced to one column, unless there's a happy conincidence in container naming. I don't think everybody's been following Andy's suggestions.

Does this experiment highlight the need for a more semantic Web, or maybe even make a case for further investigation into Web Patterns? I don't know what the hell it does, but it ate up a few seconds of my life :D

If you do manage to find some Internet offspring that would look OK on the cover of Vanity Fair, tell me about it in the comments.

Categories

, ,

Comments

  1. 1/40

    Mike D. commented on 24 April 2006 @ 02:23

    WOW! Very very nice!

    The funniest thing about all of this is that "old and tatty JSM" is how I have Stan listed in my Address Book.

  2. 2/40

    The Man in Blue commented on 24 April 2006 @ 02:29

    Hmmmm ... I think I should start having more descriptive address book names as well. Like, "Aluminium sign Mike" :P

  3. 3/40

    Jason Santa Maria commented on 24 April 2006 @ 04:33

    Mike, you promised you'd never tell! This is fun to play with... even if the Bowman/me photo is terrifying as hell.

  4. 4/40

    James AkaXakA commented on 24 April 2006 @ 06:04

    Haaaaaaaaa!

  5. 5/40

    Matt Dempsey commented on 24 April 2006 @ 06:47

    That was great fun! I spent the last half hour playing with that, thanks a lot!

  6. 6/40

    kimblim commented on 24 April 2006 @ 06:58

    I like it :) Played around with it for a while and had lots of fun..

  7. 7/40

    Jeff Croft commented on 24 April 2006 @ 08:06

    Hah! Very fun to look at! Thanks for doing this, and many thanks for including my site. :)

  8. 8/40

    Evdawg commented on 24 April 2006 @ 11:01

    I have to say, you're an absolute genius.

  9. 9/40

    Andrew K commented on 24 April 2006 @ 12:20

    Now you owe me two monday's worth of productivity.

    You're a very bad man :)

  10. 10/40

    Richard@Home commented on 24 April 2006 @ 20:20

    Fantistic stuff. Interesting to note that Google, for all its dodgy markup (50 errors at last count), seems to fair the best when given another style.

  11. 11/40

    Faruk Ates commented on 24 April 2006 @ 20:47

    Wow, this is genius! :-)

    I really like how many of the dropdown options work really well with my own body/markup. My CSS doesn't seem to work on any other site (beyond a very select few things) but the other way around produces a lot of nice, semi-usable layouts. Quite cool.

    I also really like that FACE still works with half of them. :-)

  12. 12/40

    Dennis Bullock commented on 24 April 2006 @ 23:48

    Wow some of those are interesting combos. Like a red headed step child.

  13. 13/40

    Cameron Moll commented on 25 April 2006 @ 04:15

    "This is fun to play with... even if the Bowman/me photo is terrifying as hell."

    This post is worth it for that photo alone...

  14. 14/40

    Mike Bryan commented on 26 April 2006 @ 10:38

    It's kinda scary when your site looks better with other site css.

  15. 15/40

    Lachlan Hardy commented on 26 April 2006 @ 17:20

    Hell, this post is worth it just for a form button that says "Procreate!"

    As with everyone else, I have just spent far too long on this... And (leaving aside the horrendously outdated design, code *and* content), my site doesn't look too bad with Bowman CSS - http://themaninblue.com/experiment/CSSLoveChild/?body=-&bodyAlt=www.vna.com.au&face=-&faceAlt=stopdesign.com

    Maybe I should get him to do my next re-design? ;)

  16. 16/40

    The Man in Blue commented on 26 April 2006 @ 17:29

    I thought you already had a killer re-design waiting to burst forth, Lach.

  17. 17/40

    The Man in Blue commented on 26 April 2006 @ 17:29

    Yes, burst forth like an alien exploding from your stomach.

  18. 18/40

    Brock commented on 26 April 2006 @ 18:34

    Yeah ! Great experiment :D

  19. 19/40

    Lachlan Hardy commented on 26 April 2006 @ 18:50

    I did. But after the comments you made about how ugly my baby was, I threw it all out - bath water and all

  20. 20/40

    prestiti commented on 27 April 2006 @ 02:15

    neat experiment eheh!

  21. 21/40

    P.J. Onori commented on 27 April 2006 @ 03:56

    This is frankly is as genius as it is addictive. Great idea.

  22. 22/40

    David commented on 27 April 2006 @ 08:58

    maybe i am missing something, but all i get is garabage when i look at any of them, or i get an unstyled page. can i send you some screen shots?

  23. 23/40

    Robert Szilagyi commented on 27 April 2006 @ 18:19

    Perfect!! Very creative and funny idea!
    Have a nice day!

  24. 24/40

    Erwin Heiser commented on 28 April 2006 @ 10:10

    Aw man this is just too funny! Laughing my ass off :-)

  25. 25/40

    Andy commented on 28 April 2006 @ 21:56

    So you're the guy who is adding funny sauce to web design! ;)

  26. 26/40

    Jason Bates commented on 29 April 2006 @ 08:38

    Really nice clean layout, the blue works really well (:

  27. 27/40

    Johan commented on 29 April 2006 @ 12:06

    how does it work? does it join styles and mark-up?

  28. 28/40

    The Man in Blue commented on 29 April 2006 @ 21:16

    Yeah Johan, it runs over the "body" site for the mark-up, takes out all the style information, then gets the style information from the "face"site and transplants it on.

    Have to change a few references to absolute, etc.

  29. 29/40

    Marko Mihelcic commented on 30 April 2006 @ 23:28

    wow nice thingyee Cameron!

  30. 30/40

    Julian Schrader commented on 2 May 2006 @ 05:52

    Great tool! Nice effects... ;-)

  31. 31/40

    Michel Bozgounov commented on 3 May 2006 @ 19:28

    Nice idea, nice implementation... :)

    Good work! %THUMBSUP%

  32. 32/40

    David commented on 4 May 2006 @ 00:23

    Interesting and entertaining experiment. Just a note, though: "Bruce" Maeda's name is John, noto Bruce.

  33. 33/40

    The Man in Blue commented on 4 May 2006 @ 03:10

    Dunno where the hell I got "Bruce" from.

  34. 34/40

    dspt commented on 4 May 2006 @ 06:17

    Nice toy
    Having suckerfish for menu makes my site offsprings hardly compartible with other css.
    too bad cyrilic sites don't get through the parser well.

  35. 35/40

    Sugar commented on 5 May 2006 @ 22:47

    Lol! Now that's what I call, "mad scientist experiment".

    Very interesting!

  36. 36/40

    MISTY commented on 7 May 2006 @ 02:40

    WOW THAT IS SO COOL

  37. 37/40

    Chris Vasey commented on 7 May 2006 @ 09:10

    This is great. Is there a way to learn from this or to make use of it in a design way?

  38. 38/40

    Greeny commented on 12 May 2006 @ 22:45

    Face/Off

  39. 39/40

    cory commented on 14 May 2006 @ 03:00

    I made an app like this a little while ago. I called it CSS Mashups. It doesn't do nearly as good a job as CSS Love Child does (I'm impressed here--I always had trouble with specifically-named elements. Custom IDs and Class names kind of ruined my mashed-up results), but mine is open source so if you're curious how it all works you can check it out.
    http://corybantic.us/projects/cssmashup

  40. 40/40

    Thomas commented on 15 May 2006 @ 23:49

    Cool!

    41. Leave your own comment

    Comments have been turned off on this entry to foil the demons from the lower pits of Spamzalot.

Monthly Archives

Popular Entries

My Book: The JavaScript Anthology

The JavaScript Anthology

The JavaScript Anthology contains over 100 solutions to common Web development challenges such as drag-and-drop interfaces, client-server communication with AJAX/remote scripting, DHTML animation, and many more.

All code used in the book is unobtrusive and accessible, and a key focus is placed upon creating modern, cross-browser scripts.

RSS feed