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.
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…
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.
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.
