Global Opportunities with online Software
Technical articles as RSS feeds on subjects such as Web Development are very convenient. You can subscribe to a list of technical articles for a subject of interest to you and new articles will immediately be visible as they are published by the source of the RSS feed.
If there is an RSS feed for a technical subject relevant to your website content, you could add it to your website as a useful reference for your site visitors, as has been done here. When updated by the RSS provider, your site will automatically be updated too. This will encourage your visitors to come back as there will always be something new for them to see.
The CSS Play website is full of great web components built with CSS. Visit the CSS Play website.
1. CSS play Oh So Simple Slide Show
A simple method of displaying sets of photographs. Suitable for all modern browsers.
2. CSS play Holiday Slide Show
Another method of displaying sets of photographs. Suitable for all modern browsers.
3. CSS play responsive image map
A responsive image map that works on touch screen devices including Android OS and IE10.
4. CSS play responsive single level menu suitable for touch screen devices
A responsive single level menu that works on touch screen devices including Android OS and IE10.
5. CSS play responsive layout with animated repositioning
A responsive layout with animated repositioning of elements. For all the latest browsers.
6. CSS play responsive dropdown/flyout menu suitable for touch screen devices
A responsive dropdown/flyout menu that works on touch screen devices including Android OS and IE10.
7. CSS play responsive 'background' images suitable for IE7 and IE8
A method of getting IE7, IE8 and early version of other browsers to support 'background-size:cover'.
8. CSS play responsive droplist menu suitable for touch screen devices
A responsive droplist menu that works on touch screen devices including Android OS and IE10.
9. CSS play vertical concertina menu for touch screen devices
A vertical concertina menu that works on touch screen devices including Android OS and has animation.
10. CSS play dropline menu for touch screen devices
A dropline menu that works on touch screen devices including Android OS and has animation.
11. CSS play flyout menu for touch screen devices
A flyout menu that works on touch screen devices including Android OS and has animation.
12. CSS play droplist menu for touch screen devices
A droplist menu that works on touch screen devices including Android OS and has animation.
13. CSS play multi-level menu for touch screen devices #2
Another method of producing a multi-level menu that works on touch screen devices including Android OS.
14. CSS play multi-level menu for touch screen devices #1
A multi-level menu that works on touch screen devices including Android OS.
15. CSS play Information Panels suitable for touch screens
A set of information panels that work on touch screen devices such as iPads, IE10 tablets and Android OS tablets.
16. CSS play - Holiday 2013 Photo Gallery
A CSS gallery to display some of the photos taken during our 2013 visit to New Zealand, Australia and Singapore
17. CSS play Droplist Menu for IE10 Touch Screen Devices
A method of getting a droplist menu to work in IE10 on touch screen devices.
18. CSS play Dropdown/Flyout Menu for IE10 Touch Screen Devices
A method of getting multi level dropdown/flyout menus to work in IE10 on touch screen devices.
19. CSS play - IE10 Specific styling
IE10 grid layout with three columns a central exclusion zone and touch screen scrolling gallery
20. CSS play - Image reflections
A CSS only method of producing image reflections on solid background colors.
21. CSS play - Text hover gradual color changes and gradient fills
Several methods of applying a 'swipe' color change to text on hover and a gradient color fill.
22. CSS play 3D Flip Down Menu
A CSS 3D animated flip down menu suitable for IE10.
23. CSS play - Fly In/Out Gallery
A Gallery with fly-in and fly-out animation between iage changes. Suitable for all the latest browsers including IE10.
24. CSS play - 3D Spinning Boxes for IE10
A set of six 3D boxes tht spin on their own axis and around a central point, suitable for IE10.
25. CSS play - Animated 3D Gallery - Challenge
A CSS3 Animated 3D Gallery with a challenge to get it working in IE10.
26. CSS play - Animated 3D Cube Gallery for IE10
A CSS3 Animated 3D Cube Gallery that works in IE10.
27. CSS play Slide Down / Concertina Menu
A CSS slide down menu with concertina action sub menus. Suitable for the iPad Etc..
28. CSS play - 3D Dymaxion Map Animation for IE10
A CSS3 Animated Dymaxion Map that works in IE10.
29. CSS play - 3D Cube Animation for IE10
A CSS3 Animated Cube that demonstrates the difficulty in styling for IE10 without using 'preserve-3d'.
30. CSS play - 3D Animated Stacking Slideshow
A CSS3 Stacking Slideshow with 3D animation for all modern browsers except Opera.
31. CSS play - Page Flip Book version 2
Using CSS3 and the page flip technique to produce a book in which you can flip forwards and backwards through the pages.
32. CSS play - Any Size Gallery - version 2
A CSS3 gallery for images of different sizes - version 2.
33. CSS play - Any Size Gallery
A CSS3 gallery for images of different sizes.
34. CSS play - Reflow Gallery
A CSS3 thumbnail gallery with reflow of thumbnail images when viewing large images.
35. CSS vertical menu with stepped zoom
Using just CSS to produce a vertical menu with a stepped zoom action.
36. CSS ONLY click open/close action multi-level menu suitable for the iPad etc..
Using just CSS to produce a multi-level menu with a click to open/close action instead of the normal hover suitable for the iPad.
37. CSS play - Brick Wall
A CSS3 Brick wall using no images.
38. An Anywidth Menu version #7 suitable for the iPad, iPad mini, iPhone and iPod Touch
A simpler version of the Anywidth #6 menu, using the latest techniques and discoveries for the iPhone, iPad and iPod Touch. NO need for a special 'close' button or page wide transparent image.
39. CSS play - Random Heroes Animation
A CSS3 Random Heroes game, animated sprites using no images.
40. CSS play - Animated Sprites
A CSS3 animated sprites using no images.
41. CSS play - Space Invader
A CSS3 animated space invader using two divs and linear-gradients, no images.
42. CSS play - Connect Four
A logic version of Connect Four using just CSS3 for two players.
43. CSS play - Tic-Tac-Toe
A logic version of Tic-Tac-Toe using just CSS3.
44. CSS play Dropdown menu with persist.
A CSS3 hover / dropdown menu with sub menus staying open when moving the mouse off the menu.
45. CSS play - Click, Zoom and Fly Gallery
A gallery with permanent image changes and a zoom/fly animation.
46. CSS play - Scan and Magnify an Image
Enlarging a section of a smaller image by vertically scanning the smaller image.
47. CSS play Sliding Panels Menu.
A horizontal left/right sliding panels menu with animation and permanent panel changes.
48. CSS play - Before and After Image Slider - version 2
A left/right slider to reveal/hide an 'after' image suitable for IE7+.
49. CSS play - Before and After Image Slider
A left/right slider to reveal/hide an 'after' image with a hold feature.
50. CSS play - Image between text
Centering an image between two columns of text with wrap around
51. CSS play - Tooltips updated
The tooltips demo updated to include CSS3 styles and to work on the iPad etc..
52. CSS play Corner Circular Menu.
A circular corner menu with animation.
53. CSS play - STU'slide - version 2
Version 2 of the multi function slide show with permanent image changes for all modern PC browsers and Safari Mobile browsers.
54. A Slide Up / Drop Down Menu.
A dropdown menu with a fade-in and slide-up animation.
55. A Vertical click to open/close Concertina.
A vertical concertina menu with a click to open and close action and animation.
56. A CSS Diagonal Definition List Menu.
Using just a definition list to produce a horizontal sliding menu with diagonal lists suitable for the iPad etc..
57. CSS play - Radar Gallery
A slide show with permanent image changes for all modern PC browsers, Mac browsers and Safari Mobile browsers.
58. CSS play - STU'slide
A multi function slide show with permanent image changes for all modern PC browsers and Safari Mobile browsers.
59. CSS play - The BIG Slide
A full screen slide show with permanent image changes for all modern PC browsers and Safari Mobile browsers.
60. CSS play - Swipe Slide Show
A Swipe Left/Right Slide Show with permanent image changes for all PC and Safari Mobile browsers.
61. CSS play - 'GO Slide' Slide Show
The CSS play 'GO Slide' Slide Show with permanent image changes.
62. A CSS Definition List Menu.
Using just a definition list to produce a dropdown menu suitable for the iPad etc..
63. CSS play - Dragonfly Slide Show
A CSS ONLY Dragonfly Slide Show with permanent image changes.
64. CSS play - CSS only Font
A CSS ONLY resizeable, normal, italic, slant and kerning font.
65. CSS play - Rotary Slide Show
A CSS ONLY Rotary Slide Show with permanent image changes.
66. CSS play - Slide Show
A CSS ONLY Slide Show with permanent image changes.
67. A CSS3 Drilldown Menu.
Using just CSS to produce drill down menu with permanent sub menu changes.
68. CSS play - Dartboard
A CSS ONLY Dartboard using no images.
69. A CSS3 Pie Menu.
Using just CSS to produce a pie menu with individual sectors an animation.
70. A CSS3 Ring Menu version 2.
Using just CSS to produce a circular ring menu for all modern browsers.
71. CSS play - Pie Chart
A CSS ONLY Pie Chart using no images and with links on each sector.
72. CSS play - Enlarging an area of an image
Using a new technique to enlarge a section of an image.
73. CSS play - Hover Gallery - version 2
A :hover gallery with permanent image changes, version 2.
74. CSS play - Hover Gallery
A :hover gallery with permanent image changes.
75. A CSS Click action Tree Menu.
A click action Tree Menu using just CSS.
76. CSS play - Stacked Slideshow
Using my latest techniques to produce a stacked slideshow with accessibility.
77. A CSS Click to Open/Close Dropline Menu.
A click action dropline menu with persist and accessibility.
78. CSS play - radioBox - Lightbox
Using my latest techniques to produce a Lightbox type gallery.
79. A CSS Click to Open/Close Menu #2.
An update to the previous version of the click action multi-level menu with persist.
80. A CSS Click action Concertina Menu.
Using just CSS to produce a click action vertical concertina menu with persist and accessibility
81. CSS Left/Right Click Gallery
Using my latest techniques to produce a left/right click gallery with image persist.
82. A CSS Click to Open/Close Menu.
Using just CSS to produce a click action multi-level menu with persist.
83. CSS Tabbed Pages - Radio method
Using my latest techniques to produce and improved tabbed pages with persist
84. Show/Hide more information
Using my latest techniques to produce and improved show/hide extra information.
85. Permanent Image Click 'Radio' Gallery
CSS only gallery with permanent images, using no :target, iframes, objects or javascript, version 2.
86. Permanent Image Click Gallery
CSS only gallery with permanent images, using no :target, iframes, objects or javascript.
87. CSS Whack-a-Rat game
CSS only game of 'Whack-a-Rat' with on screen scoring and timer.
88. A CSS3 Circular Icons Menu.
Using just CSS to produce a circular set of icons with enlarge on hover.
89. A CSS3 Radial Menu.
Using just CSS to produce a circular radial animated menu.
90. A CSS3 Ring Menu.
Using just CSS to produce a circular ring menu.
91. A CSS3 Quadrant Menu.
Using just CSS to produce a circular menu divided into quadrants.
92. A CSS3 hexagonal Menu.
Using just CSS to produce a hexagonal shape menu with no extra markup and no images.
93. CSS only tabbed pages
CSS only tabbed pages with persist and several other features. For IE9+, Firefox, Opera, Safari and Chrome.
94. 3D Dymaxion Map animation for Safari, Chrome and Firefox
Using CSS3 transitions, transforms and keyframes to produce a 3D Dymaxion Map of the Earth's surface.
95. Three planets and the moon animation for Safari, Chrome and Firefox
Using CSS3 transitions, transforms and keyframes to produce a 3D animation of the Earth, Mars, Jupiter and the Moon.
96. Interactive Marquee for Safari, Chrome and Firefox
A second version of the marquee demo using CSS3 and keyframes to produce an interactive marquee for any length of text.
97. Content: image gallery version #2 for the iPad etc..
Using :before/:after and content: together with the general sibling selector to produce a CSS only gallery with minimal code for the iPad etc..
98. CSS ONLY click action multi-level menu suitable for the iPad etc..
Using just CSS to produce a multi-level menu with a click action instead of the normal hover suitable for the iPad.
99. CSS Stacked Slideshow #2
Using CSS to produce an animated stack of images, version 2.
100. An Anywidth Menu version 6 suitable for the iPad, iPhone and iPod Touch
A simpler version of the Anywidth v5 menu, using the latest techniques and discoveries for the iPhone, iPad and iPod Touch. NO need for a special 'close' button or tab.
101. CSSplay Safari Mobile Flyout Menu Fixed
A method of closing an open flyout menu by tapping anywhere in the screen
102. CSSplay 3D animated unfolding menu
Using 3D transforms and transitions to animate an unfolding dropdown menu
103. CSSplay Safari Mobile Dropdown Menu Fixed
A method of closing an open dropdown menu by tapping anywhere in the screen
104. CSSplay 3D Runners
A group of three 3D 'stick men' runners using CSS3 3D transforms and keyframe anmation.
105. CSSplay 3D Sphere
A 3D Beach Ball using CSS3 3D transforms and no images.
106. CSSplay 3D Truncated Icosahedron
A 3D truncated icosahedron using CSS3 3D transforms and no images.
107. CSS3 3D jack-in-the-Box
Using CSS3 3D transforms to produce a Jck-in-the-Box with music.
108. CSSplay 3D Flip-down Menu
Using CSS3 3D transforms to produce a 'flip-down' animated menu.
109. CSSplay Sliding Boxes
A set of six 3D boxes sliding in a never ending pattern.
110. CSSplay Rotating Box
A spinning box with rotating faces using CSS3 3D transforms.
111. CSSplay Rotary Photo Gallery
A rotary gallery of images with click to view and permanent image changes.
112. CSSplay Horizontal Multi-media Accordian
Using :target to create a permanent changing horizontal multi-media accordian menu with click action.
113. CSSplay Horizontal Accordian
Using :target to create a permanent changing horizontal accordian menu with click action.
114. CSSplay Image Grid Zoom
A gallery of images on a grid with hover to zoom the images and partially zoom adjacent images.
115. CSSplay Dropline/Dropdown Menu
Using css3 transitons to animate a dropline/dropdown menu with 'current' page options.
116. The Right Move - Puzzle
A puzzle using :target.
117. Image Magnifier with Bounce
A simple image magnifier with a bounce animation.
118. CSSplay Slide/Fly menu with Image 'Bounce'
Using css3 transitions to animate a slide/fly menu with image 'bounce'.
119. CSSplay No Left Turn Maze Puzzle
Using :target to produce a click maze puzzle. Get to the end without turnng left.
120. CSSplay :target dropline menu
Using :target to produce a click open/close dropline menu.
121. CSSplay simple rollover menu
Using :before and :after pseudo-elements to produce a rollover menu.
122. CSSplay Stretch/Droplist Menu
Using CSS3 to animate a stretch/droplist menu.
123. CSSplay zoomBox Slideshow
A permanent image slideshow using switchable sets of thumbnail images and large images with captions.
124. CSSplay :target gallery with no 'back' button history problems
A :target gallery with no browser window jump and no cycling through the images when using the browser 'back' button.
125. CSSplay starLIGHT lightbox
A CSS only lightbox with PREVIOUS/NEXT/CLOSE buttons and captions with links.
126. CSSplay Any Size Gallery
Using CSS3 to produce a gallery for any size images.
127. CSSplay Mickey Mouse and Friends
Using CSS3 to produce click gallery with permanent images to rival jQuery/javascript.
128. CSSplay Grid Accordian version 2
Using CSS3 to produce a set of thumbnail images that enlarge on click. Using :target with the general sibling selector and the 'no jump' technique.
129. CSSplay Drill Down Menu v2
Using CSS3 :target with general sibling selector to produce a 'non-jumping' drill-down menu.
130. CSSplay Grid Accordian
Using CSS3 to produce a set of thumbnail images that enlarge on hover.
131. CSSplay Circle Slideshow
Using CSS3 to rotate a set of thumbnail images and display a large images, all with a cick of a button.
132. CSSplay Image Rotation
Using CSS3 to rotate a set of images.
133. CSS3 Image Zoooom
Using CSS3 to 'animate zoom' a set of thumbnail images.
134. CSS3 left/right click panels #3
Using CSS3 to animate a left/right click set of information panels with 'jump to panel number' option.
135. CSS3 left/right click gallery #2
Using CSS3 to animate a left/right click gallery with sliding large images
136. CSS3 left/right click gallery
Using CSS3 to animate a left/right click gallery with sliding thumbnail images
137. A search box stretch feature
A CSS3 animation to stretch a search box on focus.
138. An Anywidth Menu version 5 for the iPad, iPhone and iPod Touch
A simpler version of the Anywidth v4 menu, using the latest techniques and discoveries for the iPhone, iPad and iPod Touch.
139. An Anywidth Menu version 4 for the iPad, iPhone and iPod Touch
A simpler version of the Anywidth v3 menu, using the latest techniques and discoveries for the iPhone, iPad and iPod Touch.
140. html5 oneBox lightbox
Re-coding and styling the 'oneBox' to make use of the html5 support for tabindex and :focus on any element.
141. An Anywidth Menu version 3 for the iPad, iPhone and iPod Touch
A simpler version of the Anywidth v2 menu, using the latest techniques and discoveries for the iPhone, iPad and iPod Touch.
142. Click action vertical slide menu with bug fixes for IE and iPad
A single level dropdown menu with clck action incorporating the latest bug fixes for IE and the iPad, iPhone and iPod Touch.
143. Click action concertina slide menu
A CSS3 vertical concertina menu with click to open/close and slide action. Suitable for the iPad, iPhone and iPod Touch.
144. Slide out menu
A CSS3 animated slide out menu
145. CSS3 Tabs
Using CSS3 to style unordered list with iner/outer radius tabs.
146. Three auto-run slideshows
Using transitions and keyframes with step() to prodcue three auto-run slideshows.
147. Click action dropdown menu
A dropdown menu with click to open/close, suitable for the iPad etc..
148. Image click information panels
A show/hide information panels using click to open and close.
149. Focus on images
A method of applying :focus to images.
150. Animated image enlarger
An image enlarger with animation, title and descriptive text (which can contain links)..
151. CSS3 Headline Changer
Using CSS3 keyframes to animate a headline changer. Degrades well in browsers that do not support keyframes
152. CSS solid text with shadow
Using CSS3 to style text to make it look solid with a realistic shadow and no extra markup.
153. A drop panel menu with multi-configurations
A drop panel menu with multiple configurations, rows, column, galleries flyout/dropdown sub menus, forms, suitable for the iPad, iPhone etc..
154. CSS3 Left/Right Slide Gallery
Using CSS3 transitions to produce a left/right sliding gallery.
155. A droplist menu with slide action
A droplist menu with slidedown action and pushdown of the content beneath.
156. CSS Round and Round circular menu
A circular icon menu with circular icon sub menus and animation.
157. CSS click droplist menu
A droplist menu with click action and click to close feature.
158. CSS3 LightBox Menu
Using only CSS to animate a 'LightBox' style droplist menu.
159. CSS3 Reflections
Using CSS3 and SVG to produce 'reflections' for Firefox 4 and 5 (as well as Safari and Chrome).
160. CSS3 Meowww!
Using CSS3 to draw and animate a cat meowing, for Safari, Chrome and the New Firefox 5.
161. CSS3 Keyframe 'Lightbox' Gallery
Using CSS3 Keyframes to produce an animated 'lightbox' type gallery, for Safari, Chrome and the New Firefox 5.
162. CSS3 Text Zoom Menu
Using only CSS to animate (zoom) a vertical menu list.
163. CSS3 Icon Zoom Menu
Using only CSS to animate (zoom/fade/skew) a set of icon images.
164. CSS3 Keyframe Gallery
Using CSS3 Keyframes to produce an animated gallery, for Safari, Chrome and the New Firefox v5.
165. A drop/fly menu for the iPad, iPhone and iPod Touch
A multi level dropdown/flyout animated menu with a 'close' tab for the iPad, iPhone and iPod Touch.
166. A slide down menu for the iPad, iPhone and iPod Touch
A single level slide down menu with a 'close' tab for the iPad, iPhone and iPod Touch.
167. An Anywidth Menu version 2 for the iPad, iPhone and iPod Touch
The previous menu modified to give a clearer indication of the 'CLOSE' tab for the iPad etc..
168. An Anywidth Menu for the iPad, iPhone and iPod Touch
Adapting the Anywidth dropdown/flyout menu to work on the iPad, iPhone and iPod Touch.
169. Content: 100 image gallery
Using :before/:after and content: together with the general sibling selector to produce a CSS only gallery of 100 images with all the image information in the stylesheet.
170. oneBox lightbox
Using :before/:after and content: together with the general sibling selector to produce a CSS only lightbox with minimal code.
171. CSS3 Resize
Demonstrations for the use of the 'resize' style.
172. CSS3 Page Flip Book
Using the CSS3 page flip routine to produce a page flip book.
173. CSS3 Page Flip Gallery
Using the CSS3 page flip routine to produce a page flip gallery.
174. CSS3 Page Flip Animation with a twist
Using CSS3 to animate a page flip to show two inner pages with a little twist.
175. CSS3 Page Flip Animation
Using CSS3 to animate a page flip to show two inner pages.
176. CSS3 Playing Cards
Using CSS3 to produce a playing card animated menu.
177. CSS Image Rotation
Using CSS to cycle though a set of images.
178. CSS3 Flower Power
Using CSS3 to produce a circular menu with petals on a flower.
179. CSS3 Photo Corner Curls
Using CSS3 to give the impresssion of curled corner on images of any size.
180. CSS3 Sliding Panels
Using CSS3 to animated a set of information panels of varying sizes.
181. A CSS3 gradient fill menu
Using CSS3 to produce a set of horizontal menus using gradient fills and inner/outer shadows.
182. A CSS3 click multi-dropline menu
Using CSS3 to produce a click action dropline menu with multiple levels.
183. A Circular menu squared
A circular menu with CSS3 enhancements.
184. A CSS3 animated drop down menu
Using CSS3 to produce an animated drop down menu that look like jQuery.
185. Another update to the css only lightbox style
Using the latest techniques to update the previous lightbox demos.
186. An image fix for stay open sub menus on the iPad, iPhve and iPod Touch
Using an image to close any open sub menus on the iPad, iPhone and iPod Touch.
187. CSS click action vertical concertina menu
Another menu in the 'click' series to demonstrate a vertical concertina menu with a click action instead of the normal hover and working in IE6.
188. A pulldown panel with droplist menu suitable for use on the iPad, iPhone and iPod Touch
A pulldown panel containing a droplist menu using just CSS and suitable for the iPad, iPhone and iPod Touch.
189. Image Information Panels
Using CSS3 and the latest discoveries and techniques to have a click action image information panels.
190. A Droplist menu suitable for use on the iPad, iPhone and iPod Touch
A droplist menu with top level links and a close menu tab for the iPad, iPhone and iPod Touch.
191. Show me more/less revisited
Using CSS3 and the latest discoveries and techniques to update this demonstrations.
192. CSS Stacked Slideshow
Using CSS to produce an animated stack of images.
193. A Flylist menu suitable for use on the iPad, iPhve and iPod Touch
A flyout list menu with top level links and a close menu icon for the iPad, iPhone and iPod Touch.
194. CSS3 'Hover/Click' Slideshow
Using CSS3 to produce a slideshow with a hover/click action and animation.
195. CSS ONLY click action vertical slide menu
The next in the 'click' series to demonstrate a vertical slide menu with a click action instead of the normal hover.
196. CSS ONLY click action flyout menu
The next in the 'click' series to demonstrate a flyout menu with a click action instead of the normal hover.
197. CSS ONLY click action dropline menu
Continuing with the 'click' series to demonstrate a dropline menu with a click action instead of the normal hover.
198. CSS ONLY click action multi-level menu
Using just CSS to produce a multi-level menu with a click action instead of the normal hover.
199. CSS3 Carousel Slideshow - 'Click version'
Using CSS3 to produce a Carousel Slideshow. Animation for Safari, Chrome, Opera and Safari v4 beta ONLY at the moment. Now with a click action
200. CSS3 3D Social Network Ring
Using CSS3 to produce a Rotating set of Social Network Icons - for Safari ONLY at the moment.
201. CSS3 3D Book
Using CSS3 with perspective to produce a book which has an open/close cover and 360 degree rotation. For Safari ONLY at the moment
202. CSS3 3D Carousel
Using CSS3 with perspective to animate carousel of slides with auto-run and slide enlarge. For Safari ONLY at the moment
203. CSS3 3D Billboard
Using CSS3 with perspective to animate a three image billboard. For Safari ONLY at the moment
204. CSS3 3D Rollover Menu
Using CSS3 to produce a 3D Rollover Menu - for Safari ONLY at the moment.
205. Image enlarger
Using the gerneral sibling selector to show enlarged sections of an image on hover.
206. CSS3 Carousel Slideshow
Using CSS3 to produce a Carousel Slideshow. For Safari, Chrome, Opera and Safari v4 beta ONLY at the moment
207. CSS3 Vertical Image Slide Menu.
Using CSS3 to produce a vertical sliding set of panels with menus.
208. CSS3 3D Rotating Card
Using CSS3 to rotate a card to see the reverse using 'perspective'. For Safari ONLY at the moment
209. CSS3 Book Shelf Menu.
Using CSS3 to produce a Book Shelf menu with animated books.
210. CSS3 Expanding Slide Down Menu.
Using CSS3 to produce a set of expanding panels with slide down sub menus.
211. Safari Mobile browser 'exploding' image links.
Using CSS3 to produce an expanding stack of image links, suitable for the iPad etc.
212. CSS3 Slide/Animation Pullup Menu
Using CSS3 to produce a sequence of image animations and a slide down sub menu system.
213. CSS3 Photo Information panels
Using CSS3 to produce a set of sliding information panels for photo links.
214. CSS3 Image Manipulation
Using CSS3 to animate a set of thumbnail images.
215. Safari Mobile browser flyout icons
A flyout set of social network icons with slide action aimed at the Safari Mobile browser (iPhone, iPad and iPod Touch).
216. CSS3 Hover-to-Run slideshow
Using CSS3 to produce an animated slideshow run by hovering an icon.
217. Safari Mobile browser flyout list
A flyout list menu with slide action aimed at the Safari Mobile browser (iPhone, iPad and iPod Touch).
218. CSS3 Rotate/Enlarge Gallery
Using CSS3 to rotate, slide and enlarge a set of images.
219. Safari Mobile browser droplist menu with delay
A droplist menu with delay action aimed at the Safari Mobile browser (iPhone, iPad and iPod Touch).
220. Safari Mobile browser flyout menu
A multi-level flyout menu aimed at the Safari Mobile browser (iPhone, iPad and iPod Touch).
221. CSS3 Icon Slide Menu
Using CSS3 to animate an icon menu with associated text.
222. CSS3 Slide Up/Down Gallery
A simple gallery which uses CSS3 to produce an up/down image slide animation.
223. Safari Mobile browser slide down menu
A single level slide down menu aimed at the Safari Mobile browser (iPhone, iPad and iPod Touch).
224. Safari Mobile browser dropdown menu
A single level dropdown menu aimed at the Safari Mobile browser (iPhone, iPad and iPod Touch).
225. CSS + TIME flyout menu
Using Microsoft timeaction (TIME) instead of tables and conditional comments for IE6.
226. CSS3 slide down menu
Using CSS3 to produce a slide down menu.
227. Drop List Menu
A Drop List Menu with curved corners and drop shadows.
228. Pull-down information panel
A CSS only answer to javascript/jQuery pull-down information panels (version 2).
229. Pull-down droplist menu
A CSS only answer to javascript/jQuery pull-down information panels.
230. Multi-column float/drop menu
Using the no hacks float drop technique to produce a multi-column dropdown menu.
231. Image dropdown with tooltips
Using the no hacks float drop technique to produce an image dropdown menu with popup tooltips.
232. A new venture into HTML5 and CSS3
This site has been set up to explore the possibilities of using HTML5 with CSS.
233. CSS3 Left/Right Slide Menu
Using CSS3 to produce an animated left/right slide action.
234. CSS3 Animated Slideshow
Using CSS3 to animated a simple set of thumbnail images and their associated large image.
235. CSS3 Slide down / Slide fly animation
Using CSS3 to produce an animated sliding dropdown flyout menu.
236. IE6 png fix for foreground images
Using just html and css with no extra markup to produce foreground png images
237. CSS3 Social Network Menu
Using CSS3 to produce a social network circle of icons.
238. CSS3 + TIME Sliding Panels Menu
Using CSS3, and a little TIME for Internet Explorer, to produce a vertical sliding menu to rival javascritp/jQuery.
239. CSS3 Image Slide Menu
Using CSS3 to produce a horizontal image slide menu to rival any javascript version.
240. HTML+TIME Flylist Menu
Using the w3.org HTML+TIME to produce a flylist menu that works in IE browsers from IE5.5 upwards (and all other browsers).
241. HTML+TIME background color change
Using HTML+TIME to get IE5.5 and IE6 to have a background color change on hover.
242. HTML+TIME Dropdown Menu
Using the w3.org HTML+TIME to produce a dropdown menu that works in IE browsers from IE5.5 upwards (and all other browsers).
243. timeAction Galleries for IE7 and IE8
A series of three galleries using timeAction for IE7 and IE8 only.
244. CSS3 and time:animate sliding panels
A sliding panel demo using CSS3 and IE time:animate for smooth sliding action.
245. CSS3 Enhanced Picture Gallery
A simple picture gallery with CSS3 enhancements and pictures of various sizes.
246. CSS3 Enhanced Photo Gallery
A simple photo gallery with CSS3 enhancements to rival javascript versions.
247. Dropdown with a twist
A dropdown menu with a twist and CSS3 enhancements.
248. Dropline with Overrun
A dropline menu with an overrun area and CSS3 enhancements.
249. CSS3 Animated Tabs
Using CSS3 to produce an animated tabs menu with no images.
250. 100% background Images using CSS3
How to style the background image using CSS3 to make it fit the container size.
251. Slide Line Menu with CSS3 animation
A slide out menu with CSS3 enhancements for browsers that support animation.
252. Flyline/Dropdown Menu with CSS3 animation
A flyline / dropdown menu with CSS3 enhancements for browsers that support animation.
253. F.a.S.T Image Enlarger
Using the Fit and Shrink Technique to produce an image enlarger which does not need the image sizes to be defined.
254. Inline/Flyout menu
To complete the set of inline menus this is the flyout version with variable width and NO hacks of any kind, just html and css.
255. Inline/Dropline menu
A follow on from the dropdown menu this one is a dropline with variable width and NO hacks of any kind, just html and css.
256. NEW! Inline/Dropdown menu system
A totally new method of producing a dropdown menu with variable width and NO hacks of any kind, just html and css.
257. Float/Drop Menu Tutorial
A tutorial to explain how the float.drop menu system works.
258. CSS3 animated droplist menu
A CSS3 animated droplist menu with slide up/down and fade in/out for browsers that support transitions
259. Droplist Menu with flyout sub menus
A droplist menu with 1, 2 3 or 4 columns and flyout sub menus.
260. CSS Float/Drop image menu version 2
Another menu using the float/drop technique using total background images with hover change and breadcrumb trail.
261. CSS Float/Drop image menu
A menu using the float/drop technique using background images with hover change and breadcrumb trail.
262. CSS playBOX v2
CSS playBOX v2 - The Ultimate CSS Lightbox - with additional features.
263. CSS playBOX
CSS playBOX - The Ultimate CSS Lightbox.
264. CSS only drill-down menu
A CSS answer to the javascrpt drill-down menus.
265. CSS3 Single Level Slideout Menu
Using CSS3 to produce a smooth slidout for a single level menu with siding icons.
266. CSS3 Slideout Menu
Using CSS3 to produce a smooth slidout action for the top level and sub menus.
267. CSS3 Image Enlarger
Using CSS3 transitions to produce a smooth image enlarger.
268. CSS3 Sliced Rollover
Using CSS3 transitions and delay to produce a sliced image rollover 'poster' change.
269. Image dropdown with rollovers
A single level dropdown with top level rollover images.
270. CSS3 Text Overflow
Two methods to indicate text-overflow. One using CSS3 and the other using a small graphic.
271. CSS3 Smooth Zoom Icon Menu
Using CSS3 transitions to produce a smooth zoom on hover icon menu.
272. FaST Gallery.
Using FaST to create a gallery for any size images.
273. CSS play - F.a.S.T.
How to fit images of unknown size into boxes of known size using just CSS.
274. CSS3 Click Slideshow
Using CSS3 adjacent sibling selector to produce a Click Slideshow.
275. Dropline menu with current page override
A CSS only dropline menu with current page selection and override when hovering other tabs.
276. CSS Select List Menu
A CSS menu with current page override and graphic/information.
277. ImageMap Revisited
Mapping of irregular shapes using just css. With hover effect and popup information panel.
278. CSS3 Clickbox Gallery
Using CSS3 adjacent sibling selector to produce a Clickbox Gallery.
279. CSS3 Click Gallery
Using CSS3 general sibling selector to produce a left/right click gallery.
280. CSS3 Animated cubes
Using webkit keyframes to continuously anumate a set of cubes.
281. Tower of Hanoi
The Tower of Hanoi puzzle in collaboration with Javier Román Cortés
282. Interactive Marquee for Safari and Chrome
Using CSS3 and keyframes to produce an interactive marquee
283. Dropshadow/gradient fill menu for IE
Using Microsoft filter to produce a dropdown menu with drop shadows and gradient fill overlays
284. Shadows revisited
Using Microsoft filter to produce a drop shadow for all versions of IE to match the css3 shadows of Firefox etc.
285. CSS3 Analogue Clock
Using Webkit keyframes to produce an analogue clock. A small javascript routine is used to set the correct time on page entry.
286. CSS3 Digital Timer
Using Webkit keyframes to produce an auto-run digital time to show how long you have been on a page.
287. CSS3 Auto-run Slideshow
Using Webkit keyframes to produce an auto-run slideshow with pause facility using absolutely NO javascript. For Safari and Chrome at the moment.
288. CSS3 Infinite Zoom-In
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.
289. CSS3 3D Spheres
Using CSS3 to style different color square boxes into 3D spheres.
290. CSS3 'Drop Everything'
Using CSS3 to produce a multi purpose dropdown menu system that can contain any information.
291. CSS3 Parallax Scrolling
Using CSS3 to parallax scroll text.
292. CSS3 Duff Roll
The previous demo adapted to have a continuous left to right rolling can.
293. CSS3 Can Roll
Using CSS3 selectors to animate two static images to give 3D effect.
294. CSS3 Animation
Using CSS3 selectors to animate a series of static images.
295. CSS3 slide up/down lists
Using CSS3 to produce a slide up/down multi column lists menu system
296. CSS3 general sibling selector problem
Using CSS3 'general sibling' selector problems when using :hover in Safari and Chrome
297. CSS3 fitted tabs
Using CSS3 styles to produce a tabs menu with no graphics and no extra markup
298. Image Magnifier
The Image Magnifier of 2005 revisited to improve quality and make simpler and smoother.
299. CSS3 Photo Info
Using CSS3 styles to produce a sliding information panel over images.
300. CSS3 Buttons
Using CSS3 styles to produce buttons without graphics and no extra markup.
301. CSS3 Zoom Gallery
Using CSS3 styles to produce a zoom/fade-in photo gallery.
302. CSS3 Photo Slide
Using CSS3 styles to produce a sliding photo gallery.
303. CSS3 fade menu
Using CSS3 styles to produce an animated fade-in menu with curverd corners, drop shadows and gradient fills.
304. CSS3 slide menu
Using CSS3 styles to produce an animated slide down/up menu identical to javascript versions.
305. 'Showup' sub line menu
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.
306. Image dropdown menu - no hacks
Using the latest no hack system to have top level images and dropdown boxes cntaing images and text
307. 'Pullover' sub line menu
Using the same NEW method as the previous menu to have the sub line appear above the top level links.
308. Totally NEW 'Push-Pull' sub line menu system
A dropline menu using a totally NEW method that requires NO hacks and works in all browsers. Also allows tabbing.
309. CSS play's 'Slideshow'
A revised and simplified 'Slideshow' that now eorks in Safari(PC) and Chrome.
310. Using CSS play's 'Clickbox'
A practical use of CSS play's 'Clickbox'. A CSS only version of Lightbox that now works in Safari(PC) and Google Chrome.
311. No hacks dropdown/flyout - 'Snowstorm'
Back to the very basic styling to produce this no hacks dropdown/flyout menu.
312. CSS play's 'Clickbox'
CSS play's 'Clickbox' version of Lightbox that now works in Safari(PC) and Google Chrome.
313. No hacks dropdown/flyout menu v9
A small restyle to make this menu system more robust and have an easy menu trail style.
314. No hacks dropdown/flyout menu v8
The multi level dropdown/flyout menu with the path through the menu highlighted.
315. No hacks flyout menu v2
A skeleton flyout menu with the path taken through the menu highlighted..
316. No hacks dropdown/flyout menu v7
The previous menu with the ability to adjust the widths of all levels and center each level.
317. No hacks dropdown/flyout menu v6
The previous menu with the ability to adjust the widths of all levels.
318. No hacks dropdown/flyout menu v5
A multi-level drop/fly menu using the new system with manually adjusted widths for top and sub levels.
319. No hacks dropdown/flyout menu v4
A multi-level drop/fly menu using the new system and mouse clicks instead of hovers.
320. No hacks dropdown/flyout menu v3
Using the new multi-level menu system this has a better indication of the path taken through the menu structure.
321. No hacks dropdown/flyout menu v2
The no hacks, no javascript, no tables and no conditional comments dropdown/flyout menu with png opacity background images.
322. No hacks multi level flyout menu
The no hacks, no javascript, no tables and no conditional comments flyout menu with tabbing.
323. Re-styled no hacks dropdown/flyout menu
The no hacks, no javascript, no tables and no conditional comments dropdown/flyout menu restyled to work correctly in all browsers, with tabbing.
324. Multi-column flyout menu
A vertical flyout menu with multi column lists ans opacity.
325. Single level dropdown button menu
Using the no hacks dropdown system and a little extra styling to produce a dropdown button menu with highlight on hover.
326. Simple anywidth flyout menu with breadcrumb trail
A simple anywidth CSS flyout menu with an easy method of having a breadcrumb trail.
327. Multi-level, multi-line dropdown menu
A dropdown version of the previous multi-line flyout menu
328. Multi-level, multi-line flyout menu
A simple multi-level flyout menu with fixed widths and multi-line text.
329. Image information dropdown menu
A dropdown menu using top level png images with the submenu used for image information.
330. Gallery with vertical sliding thumbnail images
The previous gallery but with the thumbnails arranged vertically instead of horizontal.
331. Gallery with sliding thumbnail images
A click gallery using a sliding set of thumbnail images to navigate. The large image is permanently on screen until another image is chosen EVEN when refreshing the page. With descriptive text and linking option.
332. Previous/Next preview click gallery
A click gallery using 'Previous' and 'Next' preview images to navigate, in which the large image is permanently on screen until another image is chosen EVEN when refreshing the page. With descriptive text and linking option.
333. Previous/Next click gallery
A click gallery using 'Previous' and 'Next' buttons to navigate, in which the large image is permanently on screen until another image is chosen EVEN when refreshing the page. With descriptive text and linking option.
334. A more complex image dropdown menu
A more complex method of replacing all text with images in a single level dropdown menu using individual png images.
335. A simple image dropdown menu
A simple method of replacing all text with images in a single level dropdown menu with rollover.
336. A peculiar IE bug that allows irregular image maps with PNG images
A method of creating irregular shaped image maps with ease exploiting an odd effect when using Microsofts AlphaImageLoader to render background PNG images. Only for IE though.
337. Menu link text, png image replacement with rollover that degrades well with images off etc..
A method of replacing menu link text with rollover png images that works in IE6 and also degrades well when images are of and/or CSS is off.
338. A CSS gallery by numbers.
A CSS slide show using numbers with a hover/click state but with the controls only visible when reqired.
339. A dropdown menu with current page override.
A dropdown menu with current page styling and the ability to override the current page style when hovering other items.
340. A CSS image map menu.
A CSS dropdown menu using an image map for the top level items with a rollover state, using just two images.
341. A vertical slide with current page override.
A vertical sliding menu with current page styling and the ability to override the current page style when hovering other items.
342. A dropdown menu in shades of grey and black.
A dropdown menu with top level centered and sub menus dynamic widths to fit the longest text, and all in shades of grey and black.
343. TTF fonts for web pages
It is now possible to use ttf fonts in your web pages. There are now 5 browsers that support @font-face
344. Zoom icon with speech bubble
A zoom icon with a popup sub menu in a speech bubble.
345. 'max-width' for IE6
A CSS ONLY answer for 'max-width' in IE6. No javascript or Microsoft expressions.
346. UPDATE to new click to slide vertical menu
Added a click to open and also a reclick to close feature.
347. New click to slide vertical menu
A variation of the hover slide menu in which the top level links have two options.
348. Permanent image click gallery
A click gallery in which the large image is permanently on screen until another image is chosen EVEN when refreshing the page.
349. New horizontal multi level menu
..and finally a multi level version using the new system, again with no hacks, table, conditional comments or javascript.
350. New horizontal dropdown menu
For those who prefer nested unordered lists for their menus, again with no hacks, table, conditional comments or javascript.
351. New horizontal pullup menu
A horizontal pullup menu to continue with this series, again with no hacks, table, conditional comments or javascript.
352. New vertical fly left menu
A fly left version of the previous menu, again with no hacks, table, conditional comments or javascript.
353. New vertical flyout menu
Using the latest techniques for no hacks menus this is a vertical flyout version with all the features of the slide menu including tabbing, and the sub list stays open when clicking the top level.
354. New vertical slide menu
Using the latest techniques for no hacks menus this is a vertical slide version with all the features of the dropdown menu including tabbing, and the sub list stays open when clicking the top level.
355. New definition list menu
A definition list menu using the new menu system to simplify the styling
356. FINALLY a new CSS only dropdwon meu
Afer all this time there is finally a dropdown menu that doesn't use javascript, table, conditional comments, hacks, extra markup and works in all the major browsers including IE6.
357. A vertical flyout list menu
A vertical menu with a 2 tier flyout and the last tier can contain any information you like including images, text and further links.
358. A single image zoom
Zooming a single image on hover.
359. A zoom gallery
A simple hover over thumbnail gallery with a zoom feature.
360. An image sliding menu
An experimental menu to explore the possibility of having sliding images on hover
361. A CSS Fisheye png menu
Adding the use of png images for IE6 and giving a smoother zoom animation
362. A CSS Fisheye Image Menu version 2
Another version of the CSS only fisheye menu, this time with expanding images and associated text.
363. A dynamic CSS image magnifier
A very simple method of magnifying an image using just CSS
364. A CSS Fisheye Text Menu
A similar menu to the previous image version, but this time using expanding text on mouseover.
365. A CSS Fisheye Image Menu
A CSS only version of the popular javascript dynamic menu.
366. A fix for a problem with divide lines and sliding doors hover graphics
Fixing a problem when having vertical divide lines between horizontal link and using rollover images.
367. A droplist menu with top level images and text/links
A droplist menu using top level blocks containing images with text and links.
368. A droplist menu with a sublist feature
A previous professional droplist menu with the additional feature of a dropline heading with droplists giving extra lists within the same dropdown.
369. A basic anywidth flyout menu
Back to basics to show how to use the latest techniques to produce a flyout menu with the widths of the sub levels automatically sized to fit the longest text.
370. Latest centering technique
There have been many methods of centering unordered lists of unknown width, but this is the one I have found to be most robust.
371. A film strip gallery version 2
As promised, the previous filmstrip gallery rotated into a vertical format with a few enhancements.
372. A film strip gallery
A gallery using a horizontal scrolling filmstrip containing negative/positive thumbnails and landscape/portrait large images with show/hide descriptive text.
373. Anywidth dropline/dropdown centered
A dropline with dropdown menu which has widths automatiaclly set to suit content, the top level centered and all sub levels centered beneath the parent item.
374. Mini tabbed pages version 2
A version of my mini tabbed pages with the ability to have a tab open on page entry.
375. A Professional droplist menu
A droplist menu with method of setting the number of columns in each list and the option of a full width bottom bar for extra linking.
376. An anywidth pullup, flyout menu
An anywidth menu with the top level centered and the sub menus as wide as required with pullup and flyout left/right.
377. A Dropline, Dropdown and two level Flyout menu
A version 2 of the dropline, dropdown and flyout hybrid menu.
378. A mixed gallery using the 'object' element
A mixed gallery using just html/css to switch the contents of an 'object'. The content can be text, images, shockwave/flash and quicktime movie.
379. Triple Link block with rollover effect.
A three link block of information with rollover effect.
380. Vertical scrolling photo gallery
A conversion of the horizontal scrolling gallery into a vertical version.
381. Professional anywidth centered dropdown/flyout menu
A multi level dropdown flyout anywidth menu with dropdown and flyouts that are centered beneath the top level links, with the ability to have a left or right flyout.
382. Professional anywidth centered dropline menu
A dropline anywidth menu with droplines that are centered beneath the top level links which are also centered.
383. Professional anywidth centered dropdown menu
A single level dropdown anywidth menu with dropdown that are centered beneath the top level links.
384. Photograph gallery using the 'object' element
A photograph gallery using just html/css to switch the contents of an 'object' for browsers that understand and an iframe alternative for IE.
385. Professional multi-column dropdown
A single level dropdown menu with multi-columns, headings and curved corners using sliding doors techniques for the dropdowns.
386. Professional dropdown flyout left/right menu
A dropdown menu with any width sub menus and the option of left or right dropdown/flyouts.
387. Centering unknown width horizontal menus - revisited
After much searching of the web and with the arrival of IE8, I now have a method of positioning horizontal menus of unknown width left / center / right in the containing element.
388. Professional drop table menu
A dropdown menu that uses a table to hold the dropdown information.
389. Professional Any Width flyout menu with over run
A second 'any width' flyout menu, this time with an over run area and gapping between menu items.
390. IE6 select box bug - iframe shim fix
Applying the iframe shim fix to the variable width dropdown/flyout menu system. Using expressions to add the iframe and styling.
391. Skeleton menu version 4
The fourth in the skeleton menu series restyled to use recent developments to make it work in all versions if IE from IE5.5 to IE8.
392. Professional Any Width top and sub levels v2
A restyled version that allows dropdowns and flyouts to the left and right. Centered top level list and different color sub levels. Even works in IE5.5.
393. Professional Any Width flyout menu
A flyout version of the 'any width' dropdown menu.
394. Professional Any Width top and sub levels
A simplified method of producing a centered dropdown and flyout menu with variable widths depending on text content.
395. Total background image change on hover
A CSS only method of hovering over a horizontal menu link to change the whole menu background image.
396. Text OR associated image hover
A CSS only method of hovering over text OR associated images to highlight both AND grey out other images.
397. Dropline menu with horizontal scrolling images
A dropline menu which uses sliding doors tabs for the top level and a horizontal scrolling dropline which has images and caption.
398. CSS Light Box - click version
A click version of the Light Box for all browsers except Safari and Chrome
399. CSS Light Box
A CSS take on the javascript LightBox using hover over thumbnail images
400. Photo gallery with links to larger images
A photograph gallery with hover to show large images with linking to full size images or another page.
401. Cross browser tabbed pages version 2
A second version of the tabbed pages with a default page open on entry.
402. Cross browser tabbed pages with embedded links - revisited and updated
An update to one of my early 'one page' demonstrations to bring it up to date using the latest CSS techniques.
403. A Photograph Gallery - revisited and updated
An update to one of my early gallery demonstrations to bring it up to date using the latest CSS techniques.
404. Centered sliding doors dropline, dropdown, flyout
A centered dropline, dropdown, flyout menu, using the latest centering technique, with current selection option
405. Professional centered dropdown with flyout images
A centered dropdown menu, using the latest centering technique, with flyout images
406. 3 column layout with 7 variations
A set of 7 variations on the 3 column equal height theme. All full width with header and footer, a mixture of fixed and percentage column widths and no images.
407. Fluid layout with all columns reaching footer
A fluid layout with max/min width, header/footer and multiple percentage columns ALL reaching the footer using NO images.
408. Vertical concertina with scrolling sub menus
Tree Frog menu revised to have scrolling sub menu lists to save space.
409. Centering single level menus - revisited
Applying a simple method of centering single level variable width, float left menus.
410. Float left variable width dropdown menus - CENTERED!!
At last a stable cross browser method of centering a variable width float left dropdown menu.
411. The IE6 3px bug fix
Just revisiting an old bug in IE6 for those who are still strugglimg for an answer.
412. A new CSS project
Not strictly CSSplay news but a new project for 2009. A new site for CSS only menus.
413. Semi-fluid, semi-fixed footer, layout
A new layout for a change. This one is semi-fluid 100% height with a semi-fixed footer.
414. Professional dropline menu #9
Another in the dropline series. This one has a simplified method of adding a 'current' selection.
415. Elegant dropdown menu with sliding sub menu titles
A simple dropdown, flyout menu with the sub links sliding over the flyout menu lists.
416. Circular icon menu with sub menus
The previous menu expanded to have sub menu icons with descriptive text.
417. Circular icon menu
A simple single level circular menu using icons with mouseover descriptions.
418. Bookshelf concertina menu
A horizontal concertina menu that takes on the appearance of a bookshelf with lever arch files.
419. Simple, elegant dropdown menu with Style.
A simple dropdown menu with no graphics but plenty of 'style'.
420. Concertina Vertical Slide Menu.
A CSS only version of the vertical sliding menu published on stunicholls.com.
421. Inline block links take 3 - a sliding doors version.
A sliding doors version of inline blocks to fit any text width.
422. Inline block links take 2 - the semantically correct version.
A version of the previous demo that uses sematically correct markup to achive the same results but fails in Safari(PC) and Google Chrome which do not undestand the styling.
423. How to style inline links as blocks.
An easy, validating method, to apply block styling to inline links.
424. Another variable width menu now including the select box bug fix for IE6.
A follow on from #4 but using another single line expression to place the iframe shim and work out the size required.
425. A variable widths dropdown menu without having to specify the widths or use conditional comments in the html
A follow on from #3 but using a single line expression to do what suckerfish does with javascript.
426. A variable widths dropdown menu without having to specify the widths
The answer to the problem of having variable width for each dropdown and flyout submneu without the need to style each width.
427. Professional fly-line menu #1
The first in a series of fly line menus, this one using icons and image replacement techniques
428. Professional dropline menu #8
Image replacement techniques to have top level icons and a simple method of displaying the meaning of each icon.
429. Professional dropline menu #7
The 7th professional dropline menu which can have as many droplines as you wish. The demo goes up to 5 lines.
430. Professional dropdown #13 - png series.
The thirteenth in the professional dropdown menu series. This one has full png transparency to give a translucent appearance to the menu with a single level dropdown menu.
431. Professional dropdown #12 - 3D series.
The fourth in the professional dropdown menu 3D series. This one has full png transparency to give a translucent appearance to the menu, variable width sub menus and incorporates an IE6 fix for select boxes.
432. IE6 iframe shim fix #3.
A third method of fixing the IE6 bug when dropdown menus are transparent and dropping under select boxes.
433. IE6 iframe shim fix #2.
A second method of fixing the IE6 bug when dropdown menus are dropping under select boxes.
434. Professional dropline menu #6
The 6th professional dropline menu with ability to have a current selection and dropline highlighted.
435. CSS version of tic-tac-toe
Another CSS game, just for fun and to show that it can be done. Uses small javascript routine to read mouse clicks and hovers. The logic, however, is all CSS.
436. Safari webkit transitions
A demonstration for Safari users only to show how this browser is expanding its webkit repertoire.
437. Vertical concertina menu
A vertical example of a concertina menu with the first level open as default.
438. Horizontal images scroller
An experimental menu using horizontal scrolling images.
439. Flyout with breadcrumbs
A flyout menu with the facility to add a breadcrumb trail to the current page.
440. Concertina menu
A horizontal concertina menu for displaying further information including list, images and text.
441. IE6 iframe shim fix.
An easy method of fixing the IE6 bug when dropdown menus are dropping under select boxes.
442. Professional dropdown #11 - 3D series.
The third in the professional dropdown menu 3D series. This one has full png transparency to give a translucent appearance to the menu.
443. IE6 AlphaImageLoader and unselectable links
Solving the problem of having unselectable links when placed over AlphaImageLoader pngs.
444. Not so simple photograph gallery.
The gallery that many visitors have been asking for. The simplest gallery with three extra features.
445. Professional dropdown #10 - 3D series.
The second in the professional dropdown menu 3D series. This one has greater flexibility in size and color.
446. Professional dropdown #9 - 3D series.
A professional dropdown menu with a 3D look using png shadows.
447. A flyout menu over a flash object
A fix to get flyout (and dropdown) menus to show over a flash object.
448. Professional dropdown #8 - IE6 select box bug fix
Finally an easy fix for the IE5.x and IE6 bug where a select box will always appear on top of a dropdown menu list. All done with CSS and an iframe shim.
449. Professional dropline / dropdown / flyout hybrid menu
Another version of the dropline dropdown hybrid menu to add a flyout stage.
450. Sliding list photo click gallery
A follow on from the sliding gallery but this time using clicks to open each set. Also has additional features allowing the use of landscape and portrait images and descriptive text.
451. Image dropdown menu
A menu that many visitors have asked for. Using images in place of text.
452. Professional drop down menu #7
The seventh in the professional drop down series. This one has a current drop-line feature.
453. Image map with circular hot-spots
A method of producing CSS only circular hot-spots on an image map.
454. Vertical slide and flyout menu
A vertical sliding menu with flyout sub levels based on my javascript 'tree frog' series.
455. Sliding list photo gallery
A photo gallery in which the photos can be split into various category lists which appear in a sliding menu system.
456. Pro left/right dropline
A dropline menu split into two parts with left aligned and right aligned top level items.
457. Pro dropline/dropdown
A hybrid menu using a dropline and dropdown sub menu system
458. Skeleton dropdown menu #2
The second in the skeleton series, this time for use on dark backgrounds.
459. Professional horizontal menu #17
Continuing the Professional horizontal series with menu #17.
460. Professional dropdown menu #6
Continuing the Professional dropdown series with one that allows section headings and dividers in the submenus.
461. Skeleton menu
A simple menu with variable width drop-down and flyout sub levels in which the widths are as large as necessary to contain the text.
462. Photo Scroll Gallery
The second in a series of galleries using just a little javascript to control the styling and produce a left/right thumbnail selector.
463. Photo Click Gallery
A Photograph Click Gallery using a little javascript to give more control over the presentation.
464. Show me some more...again
A revised 'show me some more' demonstration using a small javascript 'toggle' routine to alter stylesheet class names.
465. Tree Frog Menu take two
The previous 'Tree Frog' menu revisited and restyled into a vertical slide menu with sub level flyouts.
466. Pull down tabs menu
Back to a more 'normal' menu which has a 'pull down' action with the top level list item dropping down to reveal the sub menu.
467. Experimental Tree Frog Menu
An experimental menu using javascript 'click' to open the top level drop down list and 'hover' to open sub levels. Uses a small javascript routine that styles 'li:click' and li:hover.
468. Experimental Click Menu
An experimental menu using 'click' to open the top level drop down list. Uses a small javascript routine that styles 'li:click' in a simailar way to the suckerfish 'li:hover'.
469. Pro drop menu #5
Another drop down menu in the professional series, this time with top level image replacement and variable width sub levels.
470. Scrolling Image Map
A scrolling Image Map with fixed information panes.
471. Professional drop-down menu #4
Professional drop down menu with variable widths for the drop down.
472. Professional drop-down menu #3
Convertion of one of the simple horizontal professional series into a drop down menu.
473. Professional drop-down menu #2
Professional looking drop-down menu using text over background images.
474. Professional drop-line menus
Professional looking drop-line menus in four different colors.
475. Isometric pixel art maze puzzle
A 3D look maze puzzle made entirely with CSS.
476. Transparent border error in IE7.
Highlighting a transparent border styling error in IE7.
477. Transparent borders for IE5.x and IE6.
How to style transparent borders in IE5.x and IE6 using just CSS border styling and a couple of extra divs.
478. Cops and Robbers Puzzle.
A bit of lighthearted fun using just CSS.
479. Pro image centered drop tab.
A professional quality sliding doors drop tab centered with text links and description option.
480. Pro image centered drop-line.
A professional quality sliding doors drop-line centered with text links.
481. Pro image drop-down.
A professional quality sliding doors drop-down with text links.
482. Professional drop-down.
A professional quality drop-down menu with top level image rollovers.
483. Professional horizontal series.
A series of professional quality horizontal menus using the 'sliding doors' techniques.
484. A 5 level flyout with a twist.
Back to the 'traditional' menus using conditional comments, this is a vertical menu with up to five levels of flyout. The flyouts have alterante pull-up and drop-downs to save vertical space. Also has overlap and overrun for ease of use.
485. Experimental menus #7
Probably the menu in the 'Magic Menu' series for a while. This one is a vertical flyout menu with a difference. Again it uses no javascript, no conditional comments, no behaviors and no .htc file, just css and html.
486. One more experimental menus #6
Another menu in the 'Magic Menu' series. This one uses no javascript, no conditional comments, no behaviors and no .htc file, just css and html.
487. Two more experimental menus #4 and #5
Two new experimental dropdown menus added. Both using a small javascript routine, no conditional comments or hack, and both with multiple flyouts.. Look under 'Recent Pages' > 'Menus'.
488. Three experimental menus
Three new experimental dropdown menus added. One with no conditional comments or javascript but does not support one browser, one with a small javascript file for all browsers and a final one without any javascript or conditional comments for all browsers. Look under 'Recent Pages' > 'Menus'.
489. Three new menus
Three new menus added, a hexagon shaped, a 'shutter' dropdown and an enlarging with shadow effect.
490. Another new menu
Based on the ziggy menu this one is lozenge shaped and has transparent borders which work in IE5.5 and IE6 using just CSS.
491. Four new demonstrations
Four new demonstrations including a zig-zag dropdown menu, tool links and transparent borders in IE5.5 and IE6 using just CSS.
492. Two new menus
Two new menus showing paged information with a default page when initially displayed.
493. Six new demonstrations
One new experiments under 'Demos' showing image mapping maps, and FIVE new menus under 'Menus'
494. Two new demonstrations
Two new experiments under 'Demos' showing tooltips and background color change on hover
495. Four new centered menus and a Menu Builder
Four new horizontal centered menus and a Menu Builder for the simplified flyout menu. Make building the html and css a whole lot easier.
496. A new simplified dropdown menu
A new six level dropdown menu with overrun and overlap and simplified CSS styling
497. A new simplified flyout menu
A new five level flyout menu with overrun and overlap and simplified CSS styling
498. An up to date image map demonstration
A new slant on the original image map technique showing speech bubbles with embeded links
499. Three new demonstrations at CSS play
Three new demonstrations, 'CSS only speech bubbles', 'Overlap and overrun menu' and 'Chunky borders'
500. A couple of new galleries
Two new gallery slideshows showing the power of CSS
501. Overlapping tabs menus
Two experimantal overlapping tab menus using small images and plenty of CSS.
502. Mini tabbed pages
A method of compressing six mini information pages into one.
503. A menu with sloping sides
A tabbed menu with 45 degree side slopes
504. Dynamic fade-in image
How to make an image gradually appear using just CSS
505. Centering sliding doors menus
How to center a float left sliding doors 100% clickable menu.
506. One final sliding doors drop line menu
The last one in this series to show how compact this type of menu can be.
507. Another sliding doors drop line menu
A menu based on the sliding doors tab method with a drop line for each tab. Also demonstratets how to style a 'selected' link'.
508. Sliding doors the CSS play way
How to make A List Apart's Sliding doors clickable over the whole tab. No extra markup, just a small style change.
509. A new look for CSS play, with easier navigation
CSS play has redesigned to take on board all the comments over the last year and improve the look and navigation of the site.
510. Four NEW drop down menus
Four totally new drop down menus using definition lists. CSS only and compatible with all the latest browsers.
511. A host of new demonstrations
Twelve or more demonstrations, menus and examples have been added to the list at CSSplay
512. A new flyout menu with THREE sub levels.
A much simplified CSS solution to CSS only flyout menus now with three sub levels.
513. One final makeover for CSSplay and a new demonstration.
CSSplay goes through a major update and adds a method of adding pop-up images to your inline links.
514. CSS PLaY redesigns yet again.
CSS PLaY has another small redesign of the menu system (to stop visitors getting tired of the same old look ;o)
515. A new fly-out menu examples page
A page for fly-out examples showing what is possible with the 'CSS PLaY only' technique. Uses a much simplified single style sheet.
516. A new drop-down examples page and more animation
A page of dropdown/flyout examples showing what is possible with this 'CSS PLaY only' technique. Also a further animation based on the 'streaker' at http://www.cssplay.co.uk/menu/streaker_two.html which is best viewed in Firefox v1.5x and Opera v8.54
517. A new demonstration and another drop-down variation
A new demonstration to show that css can be dynamic in Firefox and Opera. Also a new page for drop-down examples shwn web ready ideas.
518. A small redesign of the menu system and a couple of new demonstrations
A redesign of the sub menu system to make pages easier to find, a demonstration of true css animation for Firefox and a gradient image magnifier can be found in this latest site update
519. Three more demonstrations added including a new slide show and a pop-up information bubble..
A variation on the photo gallery theme that will accomodate both landscape and portrait photos and a pop-up bubble for further information which can contain further link(s).
520. Conditional Comments - one step beyond.
How Internet Explorer's conditional comments can be used to target non-IE browsers and a combination of specific IE browsers with non-IE browsers.
521. The Ultimate CSS only drop down menu
A re-write of the CSS PLaY's previous examples has produced a multi line, drop down menu that can be resized yet stay in working order.
522. Multi-page photo gallery MK.2
A follow on from the multi-page photo gallery with an additional feature.
523. New multi-page photo gallery
A new css only photo gallery system modelled around the Suckerfish HoverLightbox.
524. More NEW menus
Four new menu ideas based on the recent method of producing validating cross browser fly-out and drop-down menus.
525. A NEW DROP-LINE menu system
Based on the cross browser fly-out and drop-down menus, this is the drop-line version which again works without javascript or behaviors and is compatible with Internet Explorer.
526. Favicon advertising
Why not try advertising by using your favicon. This favicon page offers an inexpensive way of promoting your web site.
527. A validating cross-browser drop-down css only menu
CSS PLaY finally comes up with a w3c cross-browser drop-down cascading menu system.
528. A validating cross-browser link calendar
CSS PLaY solves the problem of nesting links within links and passing w3c validation in Internet Explorer with this nested link calendar.
529. The ultimate image map - maybe
A new demonstration showing how to produce an irregular shape image map with a hover effect..
530. 4 new and modified demos on CSS PLaY
CSS PLaY has three new demonstrations including a new CSS ONLY flyout menu that works in Internet Explorer and an update to the click gallery to add options to place the thumbnails to the left, right and bottom of the images.
531. 5 new and modified demos on CSS PLaY
CSS PLaY boasts four new demonstrations including a new magnifying menu and an update to the cross browser drop domn menu to add a second level cascade in all browsers.
532. Another CSS puzzle.
Stu produces another pure css puzzle for you to solve.
533. A demonstration of circular links.
And finally a method of creating circular links without the normal square selection area.
534. How to create links that are not rectangular
A method of creating links that are not rectangular (the example is an interlinking cross array) and with no overlapping of link areas.
535. Four methods of partial opacity.
Four methods of applying text over an image by making the area beneath the text opaque. Several of the methods also work in Opera.
536. Shadow and Two Tone headings.
For Firefox, Safari, Opera (in fact all browsers but IE) a method of creating two color headers and drop shadow text without having to duplicate html information. IE sees only plain text.
