Four CSS features of RoaringApps explained

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
.forum-post-container {
    background-color: #fdfdfd;
    background-image: -webkit-gradient(
            linear, 
            0 0, 100% 0, 
            color-stop(0,#fdfdfd), 
            color-stop(0.2, #fdfdfd), 
            color-stop(0.2, #ccc), 
            color-stop(0.202, #fdfdfd), 
            color-stop(1, #fdfdfd)
    );
    background-image: -moz-linear-gradient(
            left center,
           #fdfdfd 0%,
            #fdfdfd 20%,
            #cccccc 20%, 
            #fdfdfd 20.2%, 
            #fdfdfd 100%
    );
}

2. :before pseudo element - forum buttons

The forum buttons have both a gradient background image and an icon to the left. For a pure CSS solution, you would normally have to choose between one or the other; not any more. Thanks to the :before pseudo element, the button retains the background gradient, while the :before element holds the icon.

RoaringApps forum buttons
.forum-button a {
    padding: 10px 10px 10px 46px;
    position: relative;
    background-color: #c8c8c8;
    background-image: -webkit-gradient(
        linear, 
        0% 0%, 0% 170%, 
        from(#fafafa), 
        to(#c8c8c8)
    );
}
.forum-button a:before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    position: absolute;
    top: 0;
    left: 6px;
    background-image: url(/button-new-discussion.png);
}

3. Inset box shadows - sidebar boxes

CSS3 box shadows are useful for a whole lot more than just creating a drop shadow; in the sidebar boxes, I used them to create a subtle inset effect. In the example below, the first two shadows create the inset, while the last one adds a very subtle, almost unnoticeable drop shadow around the box. I find formatting the code as shown makes it a lot easier to read and adjust later on, even if it does bloat the stylesheet a little bit.

RoaringApps sidebar boxes
.side-box {
    border: 1px solid #cecece;
    background: rgba(240,240,240,0.4);
    -webkit-border-radius: 4px;
    -webkit-box-shadow: 
            0 1px 0 #fff inset,
            1px 0 0 #fff inset,
            0 0 1px rgba(0,0,0,0.1);
}

4. Box shadow border around table - forum category headers

In a table, tr elements do not accept border-radius values - no matter how hard you try, you will always get square corners. This can be a problem if you want to have a rounded border around the outside of a table row, but no borders between the individual cells. To overcome this, we can use box shadows to create faux borders - simply set the blur radius to zero, and define four separate shadows: one for each side of the row.
As you can see in the image below, the first row has no border set, the second has borders on the td element, while the third uses box shadows on the table element.

RoaringApps table header

In the code example below, the first four shadows create the border, while the next two create the inset effect.

table.header {
    background: #f1f1f1;
    -webkit-border-radius: 4px;
    -webkit-box-shadow: 
          0 1px 0 #cecece,
          1px 0 0 #cecece,
          -1px 0 0 #cecece,
          0 -1px 0 #cecece,
          0 1px 0 #fff inset,
          1px 0 0 #fff inset;
}

So there we have it - some of my favourite bits of CSS from RoaringApps.com. I hope you'll find some place for these in your next project, and stay tuned for more blog posts revealing the tricks behind RoaringApps.

Discussion - 2 comments

Arotaritei Vlad avatar

AnonymousArotaritei Vlad 05 Feb 2011 14:02

Nice :))

Edit

Anonymous avatar

khanAnonymousAnonymous 17 Mar 2011 09:19

good continue over work

Edit

Add a new comment

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.