

Show HN: My imageless one page website, thanks to CSS3 - collypops

I recently rebuilt my website as digital business card, which serves a simple purpose: Say hello, then point people in the direction of the places I inhabit on the web.<p>At the time I was playing around with the HTML5 boilerplate and Google web fonts, and it inspried me to try to implement the logos of the sites I link to with CSS rather than images.<p>You can view it at: http://colin-gourlay.com/<p>You'll need a modern browser to see the effects in action, but if you're still using IE6/7/8,I hope you can still appreciate the degraded appearance!<p>Is it effective? Are CSS + custom fonts not quite up to the challenge of simple image replacement like this? Am I just not doing it effectively?<p>I'd love to hear your thoughts.
======
DanielStraight
I don't see any reason to replace logos with text, even if it can be done. You
did it reasonably well, I just don't see the benefit.

Couple that with your abuse of stylized text (why is everything blurred?) and
width that doesn't fit in my preferred browser size, and for me the 2009 site
is WAY better.

~~~
jbrennan
I think the benefit of using styled text over images is they scale up nicely,
instead of becoming pixelated. On the desktop this maybe isn't so important,
but it makes a nice difference if you're zooming in on a mobile browser (or
using a high-resolution display like iPhone 4's display).

~~~
tintin
Well that's why SVG is implemented.

    
    
      <img src="my_svg_logo.svg" alt="">
    

Now you even support more browsers.

~~~
jbrennan
Maybe I'm misinterpreting (or just have my facts wrong) but I thought SVG is
generally poorly supported among browsers, even today. I seem to think WebKit
browsers have decent support for it (though I remember it being sluggish in
desktop Safari, and broken in Mobile Safari), and I'm not sure about IE
support.

Conversely, the newer CSS text effects seem to have better support. But I
could be wrong. I'm not a web developer, it's just what I seem to remember.

~~~
tintin
True, but the support will be better than using CSS for logo's.

------
jkap
When you said it was imageless, I assumed that you meant you base64'd
everything into one CSS file to avoid multiple requests.

I think that would look a lot better, and it can degrade well for IE7 and
under.

[http://www.phpied.com/mhtml-when-you-need-data-uris-in-
ie7-a...](http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-
under/)

------
collypops
Clickable link: <http://colin-gourlay.com/>

------
runjake
I really don't like it at all. All the blurriness gives me a headache. The Y
Combinator CSS looks pretty cruddy.

I understand that you're doing a lot of experimenting, but it's probably
better suited for test.html, instead of index.html...

------
petervandijck
The fact that it's CSS is cool, but apart from that (if you're not aware of
that), it _looks_ really bad (ie. the almost but not entirely right logos
etc).

------
unconed
Recreating logos with poor substitute fonts = ew.

