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, check the result below;
This snippet was featured on CSS-Tricks.
Enjoy!
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. You can see the result in this jsFiddle;
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 →
I’ve already talked about using {Less} to improve my efficiency in writing CSS so I’m not going to repeat the benefits, as awesome as they are.
Instead I want to share my collection of mixins which, over the last couple of months I’ve honed to near perfection. Continue reading →
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 at the result:
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 →
It seems like a long time since 960.gs was released. A time when every designer and his dog were foaming at the mouth with excitement over the idea of grid based web design. Continue reading →