CSS PlayDans : Création de sites |
||
Enorme ressource anglophone de scripts CSS en tous genres pour la conception de sites internet. |
||
cssplay.co.uk
www.cssplay.co.uk documents my attempts at understanding and exploring the possibilities of CSS.
Using CSS3 transitions, transforms and keyframes to produce a 3D animation of the Earth, Mars, Jupiter and the Moon.
A second version of the marquee demo using CSS3 and keyframes to produce an interactive marquee for any length of text.
Using :before/:after and content: together with the general sibling selector to produce a CSS only gallery with minimal code 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.
Using CSS to produce an animated stack of images, version 2.
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.
A method of closing an open flyout menu by tapping anywhere in the screen
Using 3D transforms and transitions to animate an unfolding dropdown menu
A method of closing an open dropdown menu by tapping anywhere in the screen
A group of three 3D 'stick men' runners using CSS3 3D transforms and keyframe anmation.
A 3D Beach Ball using CSS3 3D transforms and no images.
A 3D truncated icosahedron using CSS3 3D transforms and no images.
Using CSS3 3D transforms to produce a Jck-in-the-Box with music.
Using CSS3 3D transforms to produce a 'flip-down' animated menu.
A set of six 3D boxes sliding in a never ending pattern.
A spinning box with rotating faces using CSS3 3D transforms.
A rotary gallery of images with click to view and permanent image changes.
Using :target to create a permanent changing horizontal multi-media accordian menu with click action.
Using :target to create a permanent changing horizontal accordian menu with click action.
A gallery of images on a grid with hover to zoom the images and partially zoom adjacent images.
Using css3 transitons to animate a dropline/dropdown menu with 'current' page options.
A puzzle using :target.
A simple image magnifier with a bounce animation.
Using css3 transitons to animate a slide/fly menu with image 'bounce'.
Using :target to produce a click maze puzzle. Get to the end without turnng left.
Using :target to produce a click open/close dropline menu.
Using :before and :after pseudo-elements to produce a rollover menu.
Using CSS3 to animate a stretch/droplist menu.
A permanent image slideshow using switchable sets of thumbnail images and large images with captions.
A :target gallery with no browser window jump and no cycling through the images when using the browser 'back' button.
A CSS only lightbox with PREVIOUS/NEXT/CLOSE buttons and captions with links.
Using CSS3 to produce a gallery for any size images.
Using CSS3 to produce click gallery with permanent images to rival jQuery/javascript.
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.
Using CSS3 :target with general sibling selector to produce a 'non-jumping' drill-down menu.
Using CSS3 to produce a set of thumbnail images that enlarge on hover.
Using CSS3 to rotate a set of thumbnail images and display a large images, all with a cick of a button.
Using CSS3 to rotate a set of images.
Using CSS3 to 'animate zoom' a set of thumbnail images.
Using CSS3 to animate a left/right click set of information panels with 'jump to panel number' option.
Using CSS3 to animate a left/right click gallery with sliding large images
Using CSS3 to animate a left/right click gallery with sliding thumbnail images
A CSS3 animation to stretch a search box on focus.
A simpler version of the Anywidth v4 menu, using the latest techniques and discoveries for the iPhone, iPad and iPod Touch.
A simpler version of the Anywidth v3 menu, using the latest techniques and discoveries for the iPhone, iPad and iPod Touch.
Re-coding and styling the 'oneBox' to make use of the html5 support for tabindex and :focus on any element.
A simpler version of the Anywidth v2 menu, using the latest techniques and discoveries for the iPhone, iPad and iPod Touch.
A single level dropdown menu with clck action incorporating the latest bug fixes for IE and the iPad, iPhone and iPod Touch.
A CSS3 vertical concertina menu with click to open/close and slide action. Suitable for the iPad, iPhone and iPod Touch.
A CSS3 animated slide out menu