3 ms·
Show HN: My imageless one page website, thanks to CSS3
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.
- collypops 16y agoClickable link: http://colin-gourlay.com/ http://colin-gourlay.com/
- DanielStraight 16y agoI 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.
- collypops 16y agoFor 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!
- jbrennan 16y agoI 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 16y agoWell that's why SVG is implemented. <img src="my_svg_logo.svg" alt=""> Now you even support more browsers.
- jbrennan 16y agoMaybe 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 16y agoTrue, but the support will be better than using CSS for logo's.
- collypops 16y agoThat 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.
- petervandijck 16y agoThe 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).
- runjake 16y agoI 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...
- jkap 16y agoWhen 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-and-under/ http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-a...
- unconed 16y agoRecreating logos with poor substitute fonts = ew.