Category Archives: css

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

Simple User Message with Dynamic Reading Speed

Here’s a quick user message, which uses jQuery to fade in, pause and then fade out. The clever bit is that it works out how long to display the message based on its length. The JavaScript function takes a string … Continue reading

Posted in box-shadow, delay(), jQuery, Math.ceil, Regex | Tagged , , , , , | Comments Off on Simple User Message with Dynamic Reading Speed

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