Category Archives: border-radius

CSS Rubber Stamp Effect

Here’s a CSS effect to add a rubber stamp type marker over existing content. It uses the pseudo element :after to add the text content to an element with the appropriate class, in this case, .sample. A few little points … Continue reading

Posted in :after, border-radius, box-shadow, css, display, opacity, positioning, rotate, text-shadow, transform | Tagged , , , | Comments Off on CSS Rubber Stamp Effect

Creating simple character icons in CSS using ems

Here’s a quick way of bringing headings and otherwise dull content to life by using simple CSS to create simple single-character icons. Firstly, a quick example: And here’s the code, CSS first: .circled { font-weight:bold; width:1.5em; height:1.5em; line-height:1.5; border-radius:1.5em; text-align:center; … Continue reading

Posted in border-radius, css, display, line-height | Tagged , , , , , , , , , , , | Comments Off on Creating simple character icons in CSS using ems

CSS3 – Creating a Quick Effects Stylesheet

I’ve found myself using the same few CSS3 effects time and time again. Rather than recode these effects into every project I’ve created a quick effects stylesheet, a mini library, of the effects I use most often. Continue reading

Posted in border-radius, box-shadow, css, opacity, text-shadow, transform | Tagged , , , , , , , , , | Comments Off on CSS3 – Creating a Quick Effects Stylesheet