- Photo galleries
- Avatar Parade
Simple image display using :hover. - What's on TV
Another method of displaying images using :hover. - A photograph gallery
A photo gallery using thumbnail images. - A photograph gallery - with links » 20-02-2009
A photo gallery using thumbnail images amd linking to large images. - A photograph gallery - using <object> » 06-06-2009
A photo gallery using the object element. - A mixed gallery - using <object> » 22-06-2009
A mixed gallery using the object element. - Photo Gallery Mk.II
A photo gallery with horizontal scrolling. - A gallery using :target » 25-11-2011
A gallery using :target with no browser window jump and no cycling back though the image using the 'back' button. - A film strip scrolling gallery » 29-06-2009
A three stage image gallery using negative/positive thumbnails, landscape/portrait images and descriptive text. - A film strip scrolling gallery » 30-06-2009
As the previous demo but in a vertcal format - Vertical Slide Gallery » 16-06-2009
A photo gallery with vertical scrolling. - Zoom effect gallery » 28-08-2009
A photo gallery with a hover zoom effect. - Sliding photo-galleries
Compressed images that expand on :hover. - Two step photo-gallery
Hover for medium size image and click for full size. - Click gallery for slow connections
Click to produce full size images. - Multi-page photo gallery
Multiple pages of images using :hover and click. - Multi-page photo gallery MK.2
Another version of above. - Multi-page photo gallery MK.3
Another variation of the one above. - Cross browser CSS slide show
A method of displaying portrait and landscape images. - CSS play - 'Slideshow' » 13-01-2010
A 'click' Slideshow compatible with Safari(PC) and Chrome. - CSS play - 'Hover/Click Slideshow' » 18-03-2011
A 'hover/click' Slideshow with animation. - Simple CSS photo-album » 31-07-2006
A simple method of displaying images. - An art gallery » 02-08-2006
A catalogued art gallery. - Another slide show » 27-08-2006
A three step slide show. - A clipped gallery » 11-11-2006
A gallery using the 'clip' style. - Gallery 100 » 23-12-2006
A gallery of 100 images. - Simple slideshow » 26-02-2007
A simple slideshow - Complex slideshow » 02-03-2007
A more complex slideshow - Photo Strip Gallery » 30-03-2007
Photo Strip Gallery - Photo Scroll Gallery » 01-04-2007
Photo Scroll Gallery - Simplest Photo Gallery » 15-04-2007
The simplest possible gallery - Not so Simple Photo Gallery » 08-03-2008
Not so simple gallery - Sliding list gallery » 18-12-2007
A sliding list photo gallery - Sliding list click gallery » 11-02-2008
A sliding list click photo gallery - Click gallery with permanent images » 27-09-2009
A method of having a click gallery where the images stay on screen. - Click gallery with permanent images v2 » 25-11-2009
A method of having a gallery with descriptive text using previous/next navigation. - Click gallery with permanent images v3 » 26-11-2009
A method of having a gallery with descriptive text using previous/next image previews. - Click gallery with permanent images v4 » 28-11-2009
A method of having a gallery with descriptive text and a left/right sliding set of thumbnail images. - Click gallery with permanent images v5 » 30-11-2009
A method of having a gallery with descriptive text and a up/down sliding set of thumbnail images. - Click gallery with permanent images v6 - NO JUMP » 16-11-2011
A permanent image gallery without the jump to top of window. - Click gallery with permanent images v7 » 21-06-2012
A permanent image gallery without using :target, iframes, objects and javascript. - Click gallery with permanent images v8 » 22-06-2012
Another permanent image gallery without using :target, iframes, objects and javascript. - Click gallery with zoom and flyout » 16-10-2012
A permanent image gallery with a zoom and flyout action - A gallery with permanent images » 27-06-2012
A permanent image gallery using just :hover - A gallery with permanent images v2 » 28-06-2012
A permanent image gallery using just :hover - version 2 - A CSS gallery by numbers » 10-11-2009
A CSS gallery using a set of numbers and a hover/click state. - CSS play - Clickbox » 08-01-2010
CSS play 'Clickbox', the CSS answer to 'Lightbox' - Using CSS play - Clickbox » 11-01-2010
A practical example of CSS play 'Clickbox', the CSS answer to 'Lightbox' - CSS playBOX » 31-05-2010
CSS playBOX - The Ultimate CSS Lightbox - CSS playBOX v2 » 01-06-2010
CSS playBOX v2 - The Ultimate CSS Lightbox with additional features - cssplayBox » 12-04-2011
An update to the previous lightboxes with animation - oneBox » 27-05-2011
Using :before/:after and content: to produce a lightbox with minimal code. - html5 oneBox » 20-10-2011
The oneBox lightbox re-coded and styled to make use of html5 'tabindex' and :focus. - Cssplay - radioBox - lightbox » 26-06-2012
The html5-oneBox brought up to date with CSS play's latest techniques. - Content:100 » 30-05-2011
Using :before/:after and content: to produce a gallery of 100 images. - Content: gallery » 30-04-2012
The previous gallery updated for the iPad etc and now with captions. - CSS play Slide Show » 27-07-2012
A CSS slide show with permanent image changes. - CSS play Rotary Slide Show » 30-07-2012
A CSS rotary slide show with permanent image changes. - CSS play Dragonfly Slide Show » 06-08-2012
A CSS Dragonfly slide show with permanent image changes. - CSS play Swipe Slide Show » 15-08-2012
A CSS Swipe Left/Right slide show with permanent image changes. - CSS play The BIG Slide » 20-08-2012
A CSS full screen slide show with permanent image changes. - CSS play STU'slide » 24-08-2012
A CSS multi function slide show with permanent image changes. - CSS play Radar Gallery » 31-08-2012
A CSS radar swipe action slide show with permanent image changes. - CSS play STU'slide version 2 » 26-09-2012
A CSS multi function slide show with permanent image changes - version 2. - CSS play thumbnail gallery with reflow » 26-11-2012
A CSS thumbnail image gallery with reflow of thumbnails when viewing the large images - CSS play anysize gallery » 28-11-2012
A CSS gallery for images of different sizes - CSS play anysize gallery version 2 » 29-11-2012
A CSS gallery for images of different sizes - CSS play thumbnail slideshow » 30-11-2012
A CSS slideshow using PHP to generate thumbnails and code - CSS play stacking slideshow » 30-12-2012
A CSS 3D animated stacking slideshow - CSS play animated 3D cube gallery » 19-01-2013
A CSS 3D animated cube gallery for IE10 - CSS play 'GO Slide' Slide Show » 11-08-2012
A CSS ONLY Slide Show that shows the power of CSS. - A CSS ONLY Light Box » 06-03-2009
A Light Box style gallery using CSS - A CSS CLICK Light Box » 06-03-2009
A Light Box style gallery 'click' version
- Image manipulation
- Em size images compared
Various image sizes and resolutions compared. - Thumbnails
Using opacity to show which images have been visited. - Magnify image
Hover over an image to see a larger version. - Image magnifier with bounce » 22-12-2011
A simple image magnifier with the addition of a 'bounce' animation. - Running with sprites
Using :hover and :active/:focus to display a three state image. - Fun with background images
how to manipulate background images with CSS. - A panoramic image scroller
How to display a scrolling panoramic image. - An image magnifier
Enlarging sections of an image using :hover. - An image magnifier v2 » 26-02-2011
Enlarging sections of an image on hover. - An image magnifier v3 » 29-06-2012
Enlarging sections of an image on click with persist. - Scan and Magnify an Image » 15-10-2012
Scan a small image to reveal a 2.5x enlarged section. - Gradient magnifier
Gradually enlarge in image by scanning a gradient. - Dynamic gradient magnifier
Similar to above but using a simple :hover. - Image zoom » 29-08-2009
An image magnifier with zoom feature. - Image magnifier » 25-08-2009
A simple method of dynamically magnifying an image - Safari webkit demo » 13-08-2008
A demo of Safari webkit transitions - Centering images » 15-10-2006
Centering images of unknown size. - Image Fit and Shrink Technique » 11-04-2010
Shrinking images of unknown size as necessary to fit boxes of known size. - A gallery using FaST » 14-04-2010
Using the FaST method to produce a sliding gallery with images of different sizes. - An image enlarger using FaST » 26-07-2010
Using the FaST method to produce an image enlarger. - Image Manipulation » 07-02-2011
Using CSS3 to animate sets of thumnail images - Image Rotation » 09-05-2011
Using only CSS and html to cycle through a set of images - Image Enlarging » 06-09-2011
Animating an image enlarge demo with text and links. - Image Enlarging with focus » 08-09-2011
Enlarging an image using just :focus. - Image information panels » 09-09-2011
Show/hide information panels for images.
- Image replacement
- Image replacement
Image replacement for images off and css off. - Active/focus - image replacement
Image replacement removing the active/focus dotted borders.
- Image maps
- Image Map
A CSS method of producing an image map. - image map for detailed information
Another image map producing a magnified image with text. - Image map menu
Adapting an image map to produce a menu - The ultimate image map - maybe
An irregular shaped image map - Return of the image maps
Image maps, another small step - The Menu menu
Image map on the menu again - Image mapped map
Image mapping map locations - Image Map Revisited » 05-03-2010
Applying the latest techniques to an image map - Scrolling image map » 09-10-2007
Scrolling image map - Circular hot-spots » 13-01-2008
Image map with circular hot-spots
- Text manipulation
- Character codes
Character entities and their codes. - A CSS Font
A font using just CSS. - A CSS only font» 03-08-2012
An updated font using just CSS - A definition list bar chart
Creating horizontal bar charts from definition list information. - Cross-browser tabbed pages
Using tabs to show and hide alternative page information, conmplete with links. - Cross-browser tabbed pages v2 » 18-02-2009
The previous demo with default page open - CSS tabbed pages with persist » 30-05-2012
CSS only tabbed pages with persist and other features - CSS tabbed pages with persist no :target » 23-06-2012
CSS only tabbed pages with persist without :target - A selection box » 14-10-2006
An assortment of multiple choice information. - A class act
Showing how classes can be combined in your markup. - Show me some more...
A CSS method of showing more information. - More over the top... » 18-04-2007
More information over the top. - Show me more/less latest.. » 21-03-2011
Using CSS3 and the latest developments to produce an updated version. - Show me more/less latest.. » 22-06-2012
Using CSS3 and the latest developments to produce an improved version. - Wrapping text around images
A method of wrapping text around a jagged image contour. - Tracking your images
Another method of wrapping text. - Centered image in text » 09-10-2012
Centering an image in between two columns of text - Drop CAPITALS
How to procduce a first letter drop capital. - Minimum font sizing » 22-10-2006
How browsers handle minimum font sizes. - :first-letter BUGS » 08-01-2007
Browsers bugs using the :first-letter pseudo-element. - No dotted link border » 21-02-2007
Removing inline link dotted border. - CSS only speech bubbles » 11-03-2007
A CSS only version of the speech bubble. - Background color change » 11-05-2007
Changing background color on hover. - Background color change v2 » 20-09-2010
Changing background color on hover using HTML+TIME for IE5.5 and IE6. - Styling inlne links as blocks » 19-10-2008
How to make your inline links look like blocks. - Styling inlne links as blocks » 21-10-2008
A semantically correct version of the previous demo - Styling inlne links as blocks » 23-10-2008
A sliding doors version of the previous method - TTF fonts for web pages » 20-10-2009
TTF fonts for your web pages in 5 browsers. - @font-face smoothing » 25-09-2011
A simple method of making @font-face fonts look less jagged. - CSS3 Text Overflow - 2 methods » 23-04-2010
Two methods to style text-overflow. - CSS solid text with shadow » 30-08-2011
Using CSS to style solid text with shadow and no extra markup - CSS swipe color changes » 05-02-2013
Using CSS to style gradual changes of color and gradient effect to text.
- CSS3 demonstrations
- CSS3 Photo Slide » 27-01-2010
CSS3 styling to produce a left/right slide show - CSS3 Zoom Gallery » 27-01-2010
CSS3 styling to produce a zoom/fade photo gallery - CSS3 Buttons » 27-01-2010
CSS3 styling to buttons with no graphics and no extra markup. - CSS3 Photo Info » 27-01-2010
CSS3 styling to have an information panel slide up over an image. - CSS Image Information Panels » 25-03-2011
CSS3 styling to produce Image Information Panels with slide animation. - CSS3 Animation » 01-02-2010
CSS3 styling to animate a series of image frames. - CSS3 Can Roll » 02-02-2010
CSS3 styling to animate and apply a curved overlay. - CSS3 Duff Roll » 03-02-2010
CSS3 styling to continuously animate and apply a curved overlay. - CSS3 Parallax scrolling » 03-02-2010
CSS3 styling to continuously animate a parallax scrolling demo. - CSS3 3D Spheres » 06-02-2010
CSS3 styling to produce 3D Spheres without using any graphics. - CSS3 Zoom » 09-02-2010
Using Safari webkit keyframes to produce and infinite zoom-in effect. - CSS3 Auto-run Slideshow » 10-02-2010
Using Safari webkit keyframes to produce and an auto-run slideshow with slide action and pause control - NO javascript. - CSS3 Auto-run Slideshows » 14-09-2011
Using transitions and keyframes with step() to produce three types of auto-run slideshows - CSS3 Digital Timer » 11-02-2010
Using Safari webkit keyframes to produce and an auto-run digital timer. - CSS3 Analogue Clock » 11-02-2010
Using Safari webkit keyframes to produce and an auto-run analogue clock. - CSS3 Marquee » 16-02-2010
Using Safari webkit keyframes to produce and an auto-run interactive marquee. - CSS3 Marquee #2 » 14-05-2012
Using keyframes to produce and an auto-run interactive marquee with start delay. - CSS3 Animated cubes » 19-02-2010
Using Safari webkit keyframes to produce a set of never ending sliding cubes. - CSS3 Click Gallery » 21-02-2010
Using CSS3 general sibling selector to prodcue a left/right click gallery. - CSS3 Clickbox Gallery » 23-02-2010
Using CSS3 adjacent sibling selector to produce a Clickbox Gallery. - CSS3 Click Slideshow » 31-03-2010
Using CSS3 adjacent sibling selector to prodcue a Click Slidesow. - CSS3 Sliced Rollover » 25-04-2010
Using CSS3 to produce a sliced image rollover with delay. - CSS3 Image Enlarger » 26-04-2010
Using CSS3 to produce a smooth image enlarger. - CSS3 Enhanced Photo Gallery » 08-08-2010
Using CSS3 to enhance a simple Photgraph Gallery. - CSS3 Enhanced Picture Gallery » 14-08-2010
Using CSS3 to enhance a simple Picture Gallery. - CSS3 Animated Slideshow » 22-11-2010
Using CSS3 to enhance a slideshow. - CSS3 Click Slide Gallery » 17-01-2011
Using CSS3 to produce a slide up/down gallery. - CSS3 Rotate Enlarge Gallery » 21-01-2011
Using CSS3 to produce a sliding rotating enlarging slideshow. - CSS3 Hover-to-run Slideshow » 24-01-2011
Using CSS3 to produce hover-to-run slideshow. - CSS3 3D Rotating Card » 22-02-2011
Using CSS3 to produce a 3D rotation Card (Safari ONLY). - CSS3 Carousel Slideshow » 25-02-2011
Using CSS3 to produce Carousel Slideshow. - CSS3 Carousel Slideshow 'Click version' » 11-03-2011
Using CSS3 to produce Carousel Slideshow now with a click action. - CSS3 3D Billboard » 01-03-2011
Using CSS3 with perspective to produce a 3D three image billboard. - CSS3 3D Carousel of Slides » 01-03-2011
Using CSS3 with perspective to produce a 3D Carousel of Slides. - CSS3 3D Book » 02-03-2011
Using CSS3 with perspective to produce a 3D Book. - CSS3 Stacked Slideshow » 20-03-2011
Using CSS3 to produce an animated stacked slideshow. - CSS3 Stacked Slideshow version 2 » 25-04-2012
Using CSS3 to produce an animated stacked slideshow, version 2. - CSS3 Stacked Slideshow version3 » 27-06-2012
A Stacked Slideshow with accessibility. - CSS3 Sliding Panels » 18-04-2011
Using CSS3 to produce a sliding set of information panels. - CSS3 Page Flip » 15-05-2011
Using CSS3 to produce page flip animation. - CSS3 Page Flip v2 » 17-05-2011
Another page flip animation with a twist. - CSS3 Page Flip Gallery » 17-05-2011
Using the page flip process to produce a stacked gallery of images. - CSS3 Page Flip Book » 19-05-2011
Using the page flip process to produce a book. - CSS3 Page Flip Book v2 » 05-12-2012
Using the page flip process to produce a book - version 2. - CSS3 Resize » 20-05-2011
Demonstration using the CSS3 'resize' styling. - CSS3 Keyframe Gallery » 18-06-2011
CSS3 Keyframe Gallery for Firefox 5, Safari and Chrome. - CSS3 Keyframe 'Lightbox' Gallery » 24-06-2011
CSS3 Keyframe 'Lightbox' Gallery for Firefox 5, Safari and Chrome. - CSS3 Meowww! » 26-06-2011
Using only CSS/CSS3 to draw and animate a cat meowing, for Firefox 5, Safari and Chrome. - CSS3 Reflections » 01-07-2011
Using CSS/SVG to produce 'reflections' for Firefox 5 as well as a CSS version for Safari and Chrome. - CSS3 Reflections v2 » 08-02-2013
Using just CSS to produce image reflections on a solid background color. - CSS3 Left/Right Slide Gallery » 09-08-2011
Using CSS3 transitions to produce a slideshow with animaton. - CSS3 Left/Right Click Gallery » 04-11-2011
Using CSS3 transitions to produce a left/right slideshow with animation. - CSS3 Left/Right Click Gallery Permanent » 25-06-2012
Using CSS3 transitions to produce a left/right slideshow with animation and permanent image changes. - CSS3 Left/Right Click Gallery #2 » 05-11-2011
Using CSS3 transitions to produce a left/right slideshow with animaton #2. - CSS3 Left/Right Click Panels #3 » 06-11-2011
Using CSS3 transitions to produce left/right information panels with animaton #3. - CSS3 Zoooom Images » 08-11-2011
Using CSS3 to gradient zoom animate a set of thumbnail images. - CSSplay Image Rotation » 12-11-2011
Using CSS3 to rotate a set of images. - CSSplay Circle Slideshow » 14-11-2011
Using CSS3 to rotate a set of thumbnail images and show a large image with just the click of a button. - CSSplay Grid Accordian » 16-11-2011
Using CSS3 to produce a grid of thumnails which expand on hover. - CSSplay Grid Accordian v2 » 17-11-2011
Using CSS3 to produce a grid of thumnails which expand on click and stay permanent. - CSS3 Tabs » 18-09-2011
CSS3 tabs with inner and outer radii and fade out borders. - CSSplay Mickey Mouse Gallery » 20-11-2011
A CSS only Gallery with all the features of a jQuery/javascript gallery. - CSSplay Any Size Gallery » 21-11-2011
A CSS only Gallery for images of any size. - CSSplay starLIGHT lightbox » 23-11-2011
A CSS lightbox with PREVIOUS/NEXT, captions with links and CLOSE button. - CSSplay zoomBox Slideshow » 28-11-2011
A CSS Slideshow with thumbnails sets, PREVIOUS/NEXT and captions with links. - CSSplay Grid Zoom » 27-02-2012
A set of images on a grid with hover/zoom and adjacent image partial zoom. - CSSplay Rotary Gallery » 07-03-2012
A photo gallery with captions and permanent image changes - CSSplay Spinning Box » 07-03-2012
A spinning 3D box with rotating faces - CSSplay Sliding Boxes » 08-03-2012
A set of six 3D box with sliding and spinning in a never ending pattern - CSSplay 3D truncated icosahedron » 14-03-2012
A complex 3D animated truncated icosahedron - CSSplay 3D Sphere » 17-03-2012
A 3D rotating Beach Ball - CSSplay 3D Runners » 22-03-2012
A group of three 3D 'stick men' runners - CSSplay 3D Planets and Moon » 21-05-2012
Three planets and the moon animated - CSSplay 3D Dymaxion Map » 24-05-2012
Mapping the Earth's surface onto an icosahedron - CSSplay 3D Dymaxion Map Animation for IE10 » 14-01-2013
Mapping the Earth's surface onto an icosahedron working in IE10 - CSSplay Pie Chart » 30-06-2012
A CSS ONLY pie chart using no images - CSSplay Before and After Image Slider » 10-10-2012
A CSS ONLY Slider to show before and after images with 'hold' feature - CSSplay Before and After Image Slider v2 » 11-10-2012
Version 2 of the CSS ONLY Slider to show before and after images. For IE7+ - CSSplay Space Invader » 22-10-2012
A CSS3 animated space invader using no images. - CSSplay Animated Sprites » 25-10-2012
CSS3 animated sprites using no images. - CSSplay Random Heroes » 26-10-2012
CSS3 animated sprites using no images based on the game of 'Random Heroes. - CSSplay 3D Cube Animation for IE10 » 11-01-2013
Just to show how difficult it is to produce and animate a cube in IE10 - CSSplay 3D Animated Gallery - Challenge » 23-01-2013
A rotating 3D gallery and a challenge to get it working in IE10 - CSSplay 3D Spinning Boxes » 25-01-2013
A set of six boxes that spin on their own axis and about a central axis for IE10 - CSSplay Fly In/Out Gallery » 01-02-2013
A gallery with animated fly-in and fly-out image changes, suitable for all modern browsers. - CSSplay Holiday 2013 Photo Gallery » 15-03-2013
A few of the photos taken on a holiday to New Zealand, Australia and Singapore
- Puzzles
- An amazing puzzle
A maze puzzle entirely produced with CSS. - Another puzzle
Another puzzle using only CSS. - A frustrating puzzle
Work your way from the top to the bottom of the pyramid. - Puzzling css
Find your way to the centre of the field. - Another maze puzzle » 01-10-2006
Another puzzle based on a dark maze. - Cops and Robbers maze » 15-09-2007
A Cops and Robbers Maze puzzle. - 3D Maze puzzle » 21-09-2007
A puzzle using 3D pixel art. - Tic Tac Toe » 23-08-2008
CSS version of noughts and crosses - Tower of Hanoi puzzle » 18-02-2010
A CSS only version of this famous puzzle. - No Left Turn Puzzle » 06-12-2011
A 'No Left Turn' Maze/Puzzle - The Right Move Puzzle » 12-01-2012
A 'Right Move' Puzzle - Whack-a-Rat game » 12-01-2012
A CSS only game of 'Whack-a-Rat' - Tic-Tac-Toe game » 18-10-2012
A CSS3 logic game of Tic-Tac-Toe - Connect Four game » 20-10-2012
A CSS3 logic game of Connect Four
- Animation
- CSS animation
A simple method of simulating animation. - CSS animation Mk.II
Flip book animation with CSS. - Super animation
Dynamic animation for Firefox and Opera. - Stop/start animated gifs
Starting and stopping animated gifs. - The Streaker - revisited
Dynamic animation for Firefox and Opera.
- CSS Art
- CSS miniatures
CSS picture gallery. - A lego house
Using border art to produce a lego house. - Drawing the line
A CSS pencil draws a line on :hover. - Light house work
Light up the lighthouse on :hover. - Flag border art
The Union Flag using just CSS. - Flag 2 border art » 01-08-2007
The Union Flag version 2. - The star spangled banner
The American flag using just CSS. - CSS graphics buttons
Menu buttons using border art. - CSS Christmas Tree
A border art Christmas greeting. - Five point star » 13-06-2007
Transparent borders for IE5 and IE6 - CSS Dartboard » 05-07-2012
Using just CSS to produce a dartboard using no images. - CSS3 Brick Wall » 30-10-2012
Using just CSS3 to produce a brick wall using no images.
- Just for fun
- The Snowman
A snowman border art and a Christmas message. - Lamplight
Turn the lght on and off using just CSS. - Hiding emails
A method of hiding email addresses from spambots. - Tunnel vision
Border art and an image to emulate a tunnel. - CSS Firework
More border art of an exploding firework. - Yin Yang
Yin yang using text and CSS. - Alice
backwards writing as in Alice through the looking glass. - Messing about with boats
Showing how em sizing can be used to reduce and enlarge. - CSS calculator » 23-09-2006
A simple CSS ONLY calculator just for fun.
- Calendars
- Simple calendar
A method of producing a simple calendar - Simple list calendar
A pop-up calendar. - Validating link calendar
A pop-up calendar with links. - Link calendar v2 » 12-08-2006
A shrink wrapped calendar with links.
- Shadows
- Shadows
Simple method of adding a shadow effect. - Fluid drop shadows
Shadows that fit any size. - Multi-position shadow boxing
Shadows that can be placed around an image. - Drop shadows revisited » 12-02-2010
Drop shadows for IE5.5, IE6, IE7, IE8, Firefox, Safari and Chrome using no images. - CSS3 Photo curls » 04-05-2011
Using just CSS3 to add a curl to corners of photographs.
- Active/focus borders
- Removing active focus borders
How to replace the active/focus dotted borders. - Hover/click with no active/focus borders
A demonstration of removing the active/focus dotted bordes.
- Scrolling
- Vertical scrolling tables
How to scroll your table data. - Fade-out scrolling
Adding a top and bottom fade-out to your scrolling div.
- Forms
- A form with style
Methods of styling your forms.
- Lists
- A three column list
How to generate a three column list.
- Pop-ups
- Alert box
A javascript style alert pop-up. - Recipe filing cabinet
Simulating a recipe card opo-up. - Mapping the British Isles & Ireland
How to add pop-ups to a map of the British Isles and Ireland. - Information balloon pop-ups
A pop-up balloon with text and links. - Pop-up images » 20-07-2006
Inline links with pop-up images. - Tooltips » 10-05-2007
Adding tooltips to inlne links. - Tooltips updated » 08-10-2012
Adding tooltips to inlne links and text - update. - Tool links » 21-07-2007
Adding tool links to inlne text.
- General
- Book
Simulating the opening of a book and several pages. - Tables to CSS
Converting tables to CSS. - CSS Frames
How to emulate a framed layout using just CSS. - Fibonacci spiral
Drawing a fibonacci spiral using just CSS. - Adding AdSense
How to add AdSense to xhtml1.1 - The zero dollar ads page
My take on the million dollar ads site. - Conditional comments PLUS!
How to customize them so they work with other browsers.
Information
The above is an index of all my css demonstrations which range from the very simple to the more bizarre and advanced.
These demonstrations all work in the latest versions of the most popular browsers but cannot be guaranteed to work in older browser version or some of the lesser known browsers. I am unable to test on Mac browsers so if you want to use any of my demonstration ideas on a Mac then you should check that it works on your particular platform / browser combination.
For these demonstrations to work in ie please make sure that you are using a standards compliant doctype as the first line of your code. A list of the recommended DTDs can be found at the following link:
Recommended DTDs to use in your Web document.
Copyright
Most of my demonstrations can be used without asking for permission. However, some will require email approval first. Just check each page for the copyright requirements before use.
If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.
