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.

    If you've got some vitriol that just has to be spat, then contact me.

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