Show HN: My imageless one page website, thanks to CSS3 | Hacker News Reader

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

7 pointscollypops12 comments

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.

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.

You can view it at: http://colin-gourlay.com/

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!

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?

I'd love to hear your thoughts.

View on HN

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.

For me, it was just an experiment. The blur is just an attempt at shadow effects. I know I've insulted the style gods with this one, but I'm just messing around. I don't consider it anywhere near my best work, but I learned something from it.

This post on HN is just to round off the whole experiment and get some feedback before I put up something more permanent.

I'm glad you like the 2009 site!

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).

Well that's why SVG is implemented.

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

Now you even support more browsers.

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.

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

That was one of the main reasons behind it. Viewports are getting larger/smaller and sharper all the time, so we'll soon get to a point where we want our sites to scale, but we'll be limited by fixed-size images.

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...

Clickable link: http://colin-gourlay.com/

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...

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).

Recreating logos with poor substitute fonts = ew.

Reply on news.ycombinator.com