Wikidot Design & Development

Wrap-around ribbons with CSS

Now with semantic code

A while ago, back in 2010 when I was an innocent wee-little CSS newbie, I wrote a piece about creating a ribbon header with 'pure' CSS3, with what I thought was some pretty good code. That article got tweeted by @smashingmag, which generated a lot of traffic to my humble little site. It didn't take long before visitors started to point out better ways of achieving the same effect. Only now, finally, am I writing about the more semantic method of creating CSS ribbons.

Ribbons with CSS

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.

The markup is super-simple.

<div class="ribbon">
    <h3>Header text</h3>
    <p>Body text</p>
</div>

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;
}

Customise the colour of CSS code

Change the way you look at CSS codes on your site by customising the colour of selectors, declarations, numbers and more.

#selector {
      property: value;
      property2: #fff;
      property3: 120px;
}

Through the magic of the internet, when you put some CSS on your wikidot site wrapped between [[code type="css"]] and [[/code]] (ie. in a code block), the code is automatically coloured, to help differentiate between different code items. But did you know that you can change the colour of those items? Just use the CSS selectors outlined in the table below in your custom theme to add some style to code blocks on your wikidot site.

Selector Changes colour of Example (bold)
.code .hl-default Default text If no other colour is specified
.code .hl-code Default text If no other colour is specified
.code .hl-brackets Curly Brackets #top-bar {
.code .hl-identifier Selectors #side-bar {
.code .hl-reserved Declaration Property border-top: none
.code .hl-special Pseudo Classes a:hover
.code .hl-string Declaration Value background: none
.code .hl-number Numbers width: 100%
.code .hl-var Variables color: #d5d5d5

There are more selectors than displayed above that are currently supported at wikidot, but I'm still trying to work out what some of them do. Once I've worked it out, I'll let you know.

Animated Polaroid Images

So now that you have yourself some cool polaroid images, it’s time to take it up a level and add some animations for those viewing with Safari or Chrome.

Below is what we're aiming for - if you're using a webkit browser, you should see the image gently increase in size when you hover over it. If you're using a mozilla browser, the image will just jump to the bigger size.

giraffe200.jpg

A lovely Giraffe


The first thing we’re going to do is scale up the image when the user hovers over it, using the :hover pseudo class. So from the code for the original post, we’ll change the following lines.
.polaroid-image {
    -webkit-transform: rotate(3deg) scale(1);
    -moz-transform: rotate(3deg) scale (1);
}
 
.polaroid-image:hover {
    -webkit-transform: rotate(3deg) scale(1.1);
    -moz-transform: rotate(3deg) scale (1.1);
}

Now when anyone using a mozilla or webkit browser hovers over the image, it will instantly jump in size. A nice effect, but we can do better…
giraffe200.jpg

A lovely Giraffe

Polaroid Images

We thought we'd start off with something just about every site could use - a polaroid image frame. It's a fairly widely documented effect of CSS3, but nevertheless we're bringing it to you.

First off, this is what the final result will look like.

giraffe200.jpg

A lovely Giraffe

There are two ways of adding this to your site: either to every image on your site, or only to those wrapped in a specific div class. We're going with the second. As for where to put the CSS, if you have a custom theme you can add it in there, otherwise you can just put it in a CSS module on each page you have the image. This is the same for just about every entry we'll post, so take note, because we won't be writing it with every single time.

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.