Demos & Snippets

Pop-up Text Message with Entrance Effects | Created: 19th Nov 18
A responsive, modal text popup in semi-transparent overlay, with zooming, fading, sweeping or dropping effect, thanks to CSS3 keyframe animations.

Full Height Split Screen Panels with Scroll | Created: 5th Apr 17
This CSS-only demo uses viewport units for full height panels on any screen. Additionally, the left sides are fixed size, while the right sides scroll.

Fullscreen 'SiteShow' with Controls (no jQuery) | Created: 6th Aug 16
Fade-in a list of URLs as a fullscreen 'SiteShow'. Individual slide duration, menu with previous, next, play/ pause controls and CSS3 animations.

Sweep-in News Scroller with Controls | Created: 29th Jul 16
A news scroller where messages sweep in and out with a gentle fade. Very light-weight - plain JS previous, next, play/ pause controls and CSS3 animations.

Randomly Loading Images, Divs, Links, etc. | Created: 7th Jul 16
Randomly load any number of images from an HTML list. Load in other things too - try randomly loading ads, featured content, quotes, videos, whatever!

Multi-Category Content Filter (hide or show selected) | Created: 20th Apr 16
Filter page content by class and refine results with multi-category selections. Change the filter behaviour to either hide or show selected items too!

Print CSS: Setting up a Print Stylesheet | Created: 31st Mar 16
Learn how to set up a print stylesheet for your website, so that it looks as good in print as it does on screen (starter CSS, tips and tricks included).

Simple Sweep-in News Scroller (CSS3/JS) | Created: 24th Oct 15
A no-frills, news box where messages sweep in and out with a gentle fade. Light-weight - its powered by a small JS function and animated with CSS3.

JS & CSS3 Content Filter (filter by class) | Created: 20th Sep 15
Create an animated, collapsible content filter for your website content, where categories are filtered by class. CSS3 transitions fade the results into view.

EU Cookie Law Consent Bar (accept cookies) | Created: 21st Aug 15
Comply with the EU cookie law with an 'implied opt-in' consent bar for website users to accept cookies. 'OK' dismisses the bar and hides it for 90 days.

Show 'New' Content Until Visited (link tracking) | Created: 26th May 15
Alert users to new content (added in the last ? days) with a blinking icon that disappears when a page has been read. Visited pages are saved in local storage.

Circular Segment Pie Chart Menu | Created: 11th May 15
An experimental, circular menu, that's cut into rings and segments (like a pie chart). Calculations for skew and rotate transforms are included in the CSS.

Responsive CSS3 Fading Quotes | Created: 24th Mar 15
Fade-in quotes or testimonials elegantly with this CSS3 demo for IE10+ and modern browsers. JavaScript support for IE9. IE7/8 users just see the last item.

Form Focus Tip Box with CSS Fade | Created: 23rd Feb 15
A really easy way to show tip/ hint boxes to users as they fill out a form. Uses the :focus pseudo selector and a gentle fade animation with CSS.

@font-face CSS Demo | Created: 18th Sep 13
@font-face works fine nowadays, but this demo hails from 2013 when problems arose in old Firefox and Chrome. Keeping for posterity's sake.