This post is a super-simple one about creating post-it style buttons using just css. The usual ie7,8 crap applies.
For a recent project, I was looking into creating a nice stylised button. However, this had to be editable from the CMS, allowing a user to just pick a picture, a title and a url. So no image editing should need to be done. Here’s what it should look like…
I was mucking around with this and created the following jsfiddle – http://jsfiddle.net/BhbrL/840/ . And below is what it does look like.
The main things used in it are border-radius, box-shadow, clip and transform. The first 2 I’d used plenty of times, but this was a good chance to play with clip and transform.
Clip works by specifying a rectangle that is applied to an absolutely positioned image. You define coordinates for top right bottom left. I did this so that the image selected by the user won’t break the container. The only limitation is percentages can’t be defined for the coordinates but I guess that wouldn’t be possible with an absolutely positioned element. Since the post-it is responsive (try increasing/decreasing the size of the html output window on jsfiddle), there would have to be media queries that defined alternate clipping coordinates.
The transform is used to create the drop shadow. Since its not just a standard drop shadow on the main post-it note container, I created another div that sits underneath it. This has the transform applied to it. Its a simple rotate and skew that, when the box-shadow is applied to it, allows the shadow to just poke out from the edges.
transform: rotate(3deg) scale(1) translate(0) skew(6deg);
(Obviously, for now, the usual vendor prefixes need adding as well)
The only other thing I used was a more specific border-radius on the image to just curve the top left and bottom right bits of the image. That way, all the CMS editor has to do is choose an image. They don’t need to worry about how much filleting to apply to those corners.
Let me know how I could improve it or leave a comment.