Using CSS3 transitions and delay to produce a sliced image rollover 'poster' change.
A single level dropdown with top level rollover images.
Two methods to indicate text-overflow. One using CSS3 and the other using a small graphic.
Using CSS3 transitions to produce a smooth zoom on hover icon menu.
How to fit images of unknown size into boxes of known size using just CSS.
Using CSS3 adjacent sibling selector to produce a Click Slideshow.
A CSS only dropline menu with current page selection and override when hovering other tabs.
Mapping of irregular shapes using just css. With hover effect and popup information panel.
Using CSS3 adjacent sibling selector to produce a Clickbox Gallery.
Using CSS3 general sibling selector to produce a left/right click gallery.
Using CSS3 and keyframes to produce an interactive marquee
Using Microsoft filter to produce a dropdown menu with drop shadows and gradient fill overlays
Using Microsoft filter to produce a drop shadow for all versions of IE to match the css3 shadows of Firefox etc.
Using Webkit keyframes to produce an analogue clock. A small javascript routine is used to set the correct time on page entry.
Using Webkit keyframes to produce an auto-run digital time to show how long you have been on a page.
Using Webkit keyframes to produce an auto-run slideshow with pause facility using absolutely NO javascript. For Safari and Chrome at the moment.
In collaboration with Javier Román Cortés I have produced an infinite zoom-in set of images animated with nothing more than Safari CSS webkit styling. To celebrate 20 years of Photoshop.
Using CSS3 to produce a multi purpose dropdown menu system that can contain any information.
The previous demo adapted to have a continuous left to right rolling can.
Using CSS3 to produce a slide up/down multi column lists menu system
Using CSS3 'general sibling' selector problems when using :hover in Safari and Chrome
Using CSS3 styles to produce a tabs menu with no graphics and no extra markup
The Image Magnifier of 2005 revisited to improve quality and make simpler and smoother.
Using CSS3 styles to produce a sliding information panel over images.
Using CSS3 styles to produce buttons without graphics and no extra markup.
Using CSS3 styles to produce an animated fade-in menu with curverd corners, drop shadows and gradient fills.
Using CSS3 styles to produce an animated slide down/up menu identical to javascript versions.
Using the same NEW method as the previous menu to have the sub line appear above the top level links. This one has simpler styling.
Using the latest no hack system to have top level images and dropdown boxes cntaing images and text
Using the same NEW method as the previous menu to have the sub line appear above the top level links.
A dropline menu using a totally NEW method that requires NO hacks and works in all browsers. Also allows tabbing.
A revised and simplified 'Slideshow' that now eorks in Safari(PC) and Chrome.
A practical use of CSS play's 'Clickbox'. A CSS only version of Lightbox that now works in Safari(PC) and Google Chrome.
Back to the very basic styling to produce this no hacks dropdown/flyout menu.
CSS play's 'Clickbox' version of Lightbox that now works in Safari(PC) and Google Chrome.
A small restyle to make this menu system more robust and have an easy menu trail style.
The multi level dropdown/flyout menu with the path through the menu highlighted.
A skeleton flyout menu with the path taken through the menu highlighted..
The previous menu with the ability to adjust the widths of all levels and center each level.