Wikidot Design & Development

Four CSS features of RoaringApps explained

From a site filled with CSS3 goodness, here’s some handy little tricks for you to try out.

While developing RoaringApps.com over the past couple of months, I came across some neat little tricks, both in CSS and wikidot. In the next couple of posts, I plan to share these little gems with you. Today, it's four of my favourite CSS discoveries.

1. Linear gradients for vertical divider - forum posts

The forum post containers have a dividing line running vertically down the left side, separating the author’s info from the content of the post. Using border-right on the post info div soon runs out when there’s a long post, so I turned to linear gradients to make sure the line runs all the way from top to bottom. The trick is to use multiple colour stops, with two sharing the same percentage value to give an instant (rather than gradual) change of colour.

RoaringApps forum post
Site design © BMC WebDesign, 2011. All rights reserved. All tutorials on this site are free for commerical use, subject to conditions outlined in the disclaimer.