Great Links from the Week of February 01 to February 08

Published February 8, 2008 by CSS Newbies.

Pure Css Data Chart | Css Globe

In this great article from CSS Globe, Alen Grakalic explains how to create a very attractive bar chart using nothing but a XHTML definition list and a whole lot of CSS. There is plenty of detailed instruction and images along the way, so it’s fairly easy to follow along. While this probably isn’t the most practical way of going about creating a bar chart — I would have probably at least resorted to Javascript to help out — it is a fantastic example of thinking outside of the box (box model?) and showing how versatile CSS really is.

Tags: css, data, chart

Span-Free Gradient Text Effect

Sam Rayner expands on Nick La’s article describing how to create a nice gradient text effect (letters fade from light to dark, top to bottom) using CSS and a PNG. Mr. Rayner’s contribution removes the extra non-semantic <span> tag from the code and makes clever use of the :after pseudo-element. However, Mr. Rayner’s version does not work in IE6 or IE7, so if you need your gradients to show up across all browsers, you’re better off learning Mr. La’s technique.

Tags: css, text, gradient, pseudo-element

The Incredible Em & Elastic Layouts with CSS

Jon Tan(gerine) has posted a fantastically well-written and detailed article on the art (and science!) of laying out a website using ems instead of pixels. Even if you’re not ready to tackle such a layout (it is, admittedly, more complicated than using pixels), this article provides a detailed understanding of how ems function as a unit of measurement on the screen.

Tags: css, ems, measurement, layout

2 Responses

  1. Free Makeup Samples (reply)

    I am not sure where you are getting your info, but great topic. I needs to spend some time learning more or understanding more. Thanks for great info I was looking for this Great Links from the Week of February 01 to February 08 for my mission.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>