Wikidot Design & Development

Lined Paper with CSS

Let's make some lined paper with CSS. The technique is quite simple - all we need is a repeating background gradient to give the effect of lines across the paper, and a pseudo element on the left to give the ruled margin.

Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti.

And here's the CSS:

.paper {
    font: normal 12px/1.5 "Lucida Grande", arial, sans-serif;
    width: 300px;
    margin: 0 auto 10px;
    padding: 6px 5px 4px 42px;
    position: relative;
    color: #444;
    line-height: 20px;
    border: 1px solid #d2d2d2;
 
    background: #fff;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
    background: -webkit-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
    background: -moz-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
    background: -ms-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
    background: -o-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
    background: linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
 
    -webkit-background-size: 100% 20px;
    -moz-background-size: 100% 20px;
    -ms-background-size: 100% 20px;
    -o-background-size: 100% 20px;
    background-size: 100% 20px;
 
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
 
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.07);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.07);
    box-shadow: 0 1px 2px rgba(0,0,0,0.07);
}
.paper::before {
    content: '';
    position: absolute;
    width: 4px;
    top: 0;
    left: 30px;
    bottom: 0;
    border: 1px solid;
    border-color: transparent #efe4e4;
}

Enhancing the pagepath field

Increase the usability of the pagepath data form field with a little bit of CSS trickery.

When I first started using the pagepath field in Wikidot data forms not all that long ago, I could not for the life of me figure out how it worked. I would enter a new name in the field and save the form - but where was that name I just entered? It was nowhere to be seen. Editing the form would confirm that it had not been saved - but why not? I'm sure I entered it.

The trick, of course, is to press the enter key after inputting the new page name. However, as far as I am aware, this is not documented anywhere. If I couldn't work it out, given I'm rather literate with the Wikidot way of life, what chance does an anonymous visitor have of knowing what to do when faced with the pagepath field. Enter CSS to the rescue.

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.