Layered paper effect using CSS3 box shadows

Just a quick one today. I originally planned to achieve this “layered paper” effect using :before and :after pseudo elements, but then set about trying to do it purely using the CSS3 box-shadow property. That way I’d have an :after free and can add as many “layers” as I want.

Pretty straight-forward, but quite a neat solution I think!

Here’s the end result;

Wow, some layers, woohoo

And here’s the CSS to achieve it (don’t forget to add vendor prefixes if you use this);

/* Layered Paper */
.layers {
	text-align: center;
	padding:1.618em;
	margin-bottom:1.618em;
	font-weight: bold;

	background: #eee;
	box-shadow:
		0 1px 1px rgba(0,0,0,0.15), /* The top layer shadow */
		0 10px 0 -5px #eee, /* The second layer */
		0 10px 1px -4px rgba(0,0,0,0.15), /* The second layer shadow */
		0 20px 0 -10px #eee, /* The third layer */
		0 20px 1px -9px rgba(0,0,0,0.15); /* The third layer shadow */
}

Enjoy!

Pure CSS 3D ribbon

In a recent project I set myself the challenge of creating a pure CSS ribbon effect using as little markup as possible. Why? I’m big on progressive enhancement and love how css3 empowers us to create attractive UIs without using hefty imagery. This is what I came up with;

Everybody loves ribbons

The ribbon is achieved using a single block level element with the class ribbon wrapped around a child element with the class ribbon-content. In this example I’ve used a paragraph containing a strong tag to demonstrate how semantic the code can be;
Continue reading →

CSS only ticket icon

I’m currently working on a project involving tickets / bug tracking (more info on that later) and it has involved displaying quantities of tickets in a variety of situations.

I wanted to make this as intuitive and lightweight as possible so I deduced that a ticket graphic with a numerical value inside would do the job. I also wanted to make it flexible enough to expand and contract based on the size of it’s content which meant building it with CSS, like so:

24

Continue reading →

Animated CSS sale marker

Today I utilised CSS3 animation to make the sale marker on an eCommerce site we’re building stand out more. I was conscious to make the animation subtle – I don’t want to recreate the animated gif here. Take a look:

Sale

This technique currently only works in webkit browsers, other users will simply see the red marker without the animation. The code to create this effect is extremely simple. If you want to replicate it do the following: Continue reading →