Author Archives: Chris Smith

About Chris Smith

Web developer specialising in frontend UI design @chris22smith

Highlighting Matching Text in Search Results with jQuery

Following on from a previous post Easy Search As You Type List Filtering with jQuery, I’ve added a new function/feature to this script – the ability to highlight the matching text in the search results. Here’s the pen: See the … Continue reading

Posted in filter(), jQuery, slice() | Tagged , , , , , , , , , , , | 1 Comment

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