Timeline Style Blog Comments

Today I came across an interface of blog comments in a timeline fashion made in pure CSS by Nicolas Gallagher and thought of sharing it on here. The markup is laid out extremely well with the use of new HTML5 semantic elements like article for the comments and section to wrap it up all.

The timeline bar is the ::before pseudo element of section while the dot markers are the same of each article. The speech bubble is simple to achieve, infact it's a common trick these days. You just set some backgrounds and borders on one of the pseudo elements, position it absolutely with proper offsets, and specify some width, height and css transforms if needed.

Take a look at this article on Nettuts to learn a lot of tricks achieved with simple borders in CSS2 and CSS3.