Subscribe: cssplay.co.uk
http://www.cssplay.co.uk/feed.xml
Preview: cssplay.co.uk

cssplay.co.uk



www.cssplay.co.uk documents my attempts at understanding and exploring the possibilities of CSS.



 



CSSplay - CSS circular menu with circular sub menus

2017-07-11

An update to a previous circular menu (July 2011) using the latest CSS techniques.



CSSplay - Responsive autorun slideshow using HTML5 .

2017-04-26

Using html5 to use four diferent images depending on browser window size. Suitable for all modern browsers.



CSSplay - CSS only multi-level tree menu with slide action, version 5

2017-04-24

A fifth CSS only responsive multi-level tree menu with slide action suitable for all the latest browsers and OS.



CSSplay - CSS only multi-level menu with slide action, version 4

2017-03-13

A fourth CSS only responsive multi-level menu with slide action suitable for all the latest browsers and OS.



CSSplay - Mi Thumb jQuery plugin.

2017-03-01

A jQuery plugin slideshow with many user parameters and customization v1.0.0



CSSplay - Mi Gallery jQuery plugin.

2017-01-10

A jQuery plugin gallery with many user parameters and customization v1.0.0



CSSplay - Responsive slideshow using 'Swiper' customized v3.

2017-01-30

Customizing a single responsive 'Swiper' slideshow to have background thumbnails and large images, animated captions, pause autorun.



CSSplay - Responsive slideshow using 'Swiper' customized v2.

2017-01-27

Customizing a single responsive 'Swiper' slideshow to have thumbnails, animated captions, dynamic prev/next arrows and pause autorun.



CSSplay - Responsive slideshow using 'Swiper' with thumbnails.

2017-01-26

How to have thumbnail images on a single responsive 'Swiper' slideshow.



CSSplay - Responsive slideshow using 'Swiper' with html5 picture element.

2017-01-25

Using 'Swiper' with html5 'picture' element to change the images depending on the browser window size, and update parameters.



CSSplay - CSS only multi-level tree menu with slide action, version 3

2017-01-21

A third CSS only responsive multi-level tree menu with slide action suitable for all the latest browsers and OS.



CSSplay - CSS only 'flexbox' layout

2017-01-19

A CSS only responsive layout suitable for all the latest browsers and OS.



CSSplay - CSS only multi-level tree menu with slide action, version 2

2016-12-16

A second CSS only responsive multi-level tree menu with slide action suitable for all the latest browsers and OS.



CSS PLAY - Responsive full featured slideshow'

2016-11-25

A CSS responsive slideshow with play, pause, previous, next, captions and image selection



CSS PLAY - Responsive auto run slideshow'

2016-11-20

A CSS responsive auto run slideshow with image selection and pause on hover



CSSplay - CSS only multi-level tree menu with slide action

2016-11-17

A CSS only responsive multi-level tree menu with slide action suitable for all the latest browsers and OS.



CSSplay - CSS only multi-level concertina menu with bounce

2016-11-14

A CSS only responsive multi-level concertina menu with bounce action suitable for all the latest browsers and OS.



CSSplay - CSS only multi-level slide in menu

2016-10-29

A CSS only responsive multi-level slide in menu suitable for all the latest browsers and OS.



CSSplay - CSS only flexbox menu with 'order' animation

2016-05-13

A CSS only menu using flexbox and order animation. Suitable for all the latest browsers, but only Firefox supports animation of the 'order' style.



CSSplay - CSS only 3x3 grid of screens 'scroll snap points'

2016-04-24

A CSS only 3x3 grid layout using 'scroll snap points to scroll the grid one screen at a time. For IE11 and Edge at the moment.



CSSplay - CSS only page using 'scroll snap points'

2016-04-06

A CSS only page layout using 'scroll snap points to scroll the page one screen at a time.



CSSplay - CSS only circular menu with bounce animation

2016-03-09

A CSS only circular menu with bounce animation using cubic-bezier timing.



CSS PLAY - Responsive 3D 'slinky'

2016-03-04

A CSS responsive 3D 'slinky' animation for all the latest browsers, but buggy on iOS.



CSS PLAY - Responsive full page gallery

2016-02-26

A CSS only responsive full page gallery for all devices with no visible scrollbars.



CSSplay - Responsive swipe action momentum menu

2016-02-24

A CSS responsive swipe action momentum menu for all the latest browsers, OS and devices using a little javascript.



CSS PLAY - Responsive momentum swipe gallery for touch screen, trackpad and mouse

2016-02-24

A CSS and javascript responsive swipe action gallery with momentum scrolling. For touch screen, trackpad and mouse.



CSS PLAY - Responsive momentum swipe gallery for touch screens and trackpads

2016-02-23

A CSS only responsive swipe action gallery with momentum scrolling. For touch screen and trackpad.



CSS PLAY - Javascript responsive swipe action panel changer

2016-02-08

A javascript (no jQuery) responsive swipe action panel changer for mouse and touch screens. Works in all the latest browsers and operating systems.



CSS PLAY - CSS responsive keyframe slideshow

2015-11-02

A CSS ONLY responsive slideshow to rival jQuery/javascript with ability to show different images on PCs, tablets and mobiles



CSSplay - Responsive slide down menu

2015-09-18

A CSS responsive slide down menu for all the latest browsers, OS and devices without using media queries.



CSSplay - A CSS ONLY modal windows template

2015-08-28

A simple CSS ONLY modal windows template, suitable for all the latest browsers.



CSS PLAY - CSS shape autorun slideshow version 2

2015-08-26

A second demonstration showing how to animate CSS shapes using @keyframes to produce an autorun slideshow. For all modern browsers except IE and Firefox.



CSS PLAY - CSS shape autorun slideshow

2015-08-17

A demonstration showing how to animate CSS shapes using @keyframes to produce an autorun slideshow. For all modern browsers except IE and Firefox.



CSS PLAY - Animating CSS shapes

2015-08-14

A demonstration showing how to animate CSS shapes. For all modern browsers except IE and Firefox.



CSS PLAY - Emulating shape-inside

2015-08-10

Using CSS shape-outside to emulate shape-inside with fixed positioning. For all modern browsers except IE and Firefox.



CSS PLAY - Tracking images using CSS shape

2015-08-03

Using CSS shape to have text track the shape of images. For all modern browsers except IE and Firefox.



CSSplay - Responsive experimental 'viewport' grid layout

2015-06-11

Another experimental CSS responsive single page website using 'viewport' with a 3 x 3 grid, suitable for all modern browsers and OS (fails in Safari PC)



CSSplay - Responsive experimental 'viewport' layout

2015-06-03

A second experimental CSS responsive single page website using 'viewport', suitable for all modern browsers and OS (fails in Safari PC)



CSS PLAY - Responsive foreground image 'cover/contain' slideshow

2015-06-02

A CSS only responsive foreground image fullscreen slideshow with 'cover' and 'contain' images and no @media queries.



CSS PLAY - Responsive foreground image 'cover'

2015-06-01

A CSS only method of covering a responsive foreground image in a fullscreen browser window without @media queries.



CSS PLAY - Responsive foreground image 'contain'

2015-05-30

A CSS only method of containing a responsive foreground image in a fullscreen browser window without @media queries.



CSSplay - Responsive 'viewport' layout

2015-05-29

An experimental CSS responsive single page website using 'viewport', suitable for all modern browsers and OS (buggy in Opera and fails in Safari PC



CSSplay - Responsive CSS multi-level jQuery menu

2015-05-26

A CSS responsive multi-level menu for all browsers and OS, PCs, tablets and smartphones using a little jQuery.



CSS PLAY - Responsive swipe action stacked slideshow v2

2015-05-20

A responsive swipe action stacked slideshow, with multiple instances and sizes, for all browsers and OS, using a little jQuery.



CSS PLAY - Responsive swipe action stacked slideshow

2015-05-19

A responsive swipe action stacked slideshow for all browsers and OS, using a little jQuery.



CSSplay - Responsive CSS multi-level menu

2015-05-18

Another CSS responsive multi-level menu for all the latest browsers and OS, PCs, tablets and smartphones.



CSSplay - Responsive CSS multi-level menu

2015-05-14

A CSS responsive multi-level menu for all the latest browsers and OS, PCs, tablets and smartphones.



CSSplay - Responsive CSS fade in/out menu panel

2015-04-24

A CSS ONLY responsive click/tap fade in/out menu for all the latest browsers and OS, PCs, tablets and smartphones.



CSSplay - Responsive CSS click/tap droplist menu - version 2

2015-04-20

A second CSS ONLY responsive click/tap droplist menu for all the latest browsers and OS, PCs, tablets and smartphones.



CSSplay - CSS only tic-tac-toe Player v Computer

2015-02-26

A CSS only version of tic-tac-toe for Player v Computer demonstating the use of :matches pseudo-class.



CSSplay - Vimeo video replacing default controls with Play / Pause button

2015-02-23

A tutorial to replace the default controls on a Vimeo video with a Play / Pause button, and make responsive.



CSSplay - CSS responsive video aspect ratios

2015-02-06

A tutorial for CSS only responsive video (iframe) aspect ratios.)



CSSplay - CSS responsive video aspect ratio converter

2015-02-01

A tutorial for a responsive video (iframe) aspect ratio converter using calc()



CSSplay - CSS responsive autorun slideshow tutorial

2015-01-12

A tutorial for a simple responsive autorun slideshow sutiable for all the latest browsers and OS.



CSSplay - Responsive CSS click/tap droplist menu

2015-01-10

A CSS ONLY responsive click/tap droplist menu for all the latest browsers and OS, PCs, tablets and smartphones.



CSSplay - Responsive CSS click/tap multi level menu

2014-12-16

A CSS ONLY responsive click/tap multi level menu for all the latest browsers and OS, PCs, tablets and smartphones.



CSSplay - CSS click/tap multi level menu

2014-10-22

A CSS ONLY click/tap multi level menu for all the latest browsers and OS with fallback for IE7 and IE8.



CSSplay - CSS responsive left right slideshow with wrap around

2014-10-18

A responsive left/right slideshow with wrap around using the latest CSS selectors.



CSSplay - CSS responsive auto play slideshow

2014-10-15

A responsive left/right auto play slideshow using the latest CSS selectors.



CSSplay - CSS basic auto play slideshow

2014-10-14

A basic responsive auto play slideshow using the latest CSS selectors.



CSSplay - CSS responsive slideshow with auto play option, version 2

2014-10-13

An update to the CSS only responsive slideshow with auto play option for all the latest browsers and operating systems, to simplify and add extra functionality.



CSSplay - CSS responsive slideshow with auto play option

2014-10-10

A CSS only responsive slideshow with auto play option for all the latest browsers and operating systems.



CSSplay - CSS only universal slide in/out menu

2014-09-29

A CSS ONLY universal slide in/out menu suitable for all the latest browsers and operating systems with animation.



CSSplay - CSS3 Tic-Tac-Toe

2014-09-23

A CSS3 only game of Tic-Tac-Toe player vs PC using the latest CSS3 selector styles.



CSSplay - Imagemap with CSS only hover effect

2014-09-16

A CSS only hover effect on an html imagemap. For Firefox, Chrome, Safari and Opera with fallback for IE7+



CSSplay - Responsive 'Wavy' layout

2014-09-15

A CSS and jQuery responsive single page website with 'wavy' partitions, suitable for all modern browsers and OS



CSSplay - Percentage border and text sizing

2014-09-06

A CSS only method of producing percentage border widths and text sizing without using @media queries.



CSSplay - Responsive 'Slanty' layout

2014-09-05

A CSS and jQuery responsive single page website with 'slanty' partitions, suitable for all modern browsers and OS



CSSplay - CSS only responsive droplist menu version 2

2014-09-03

A CSS ONLY responsive multi-level droplist menu suitable for all the latest browsers and operating systems with animation.



CSSplay - CSS only vertical slide concertina menu

2014-08-26

A CSS ONLY vertical concertina menu suitable for all the latest browsers and operating systems with animation.



CSSplay - Responsive full screen slideshow

2014-08-26

A responsive full screen vertical scrolling slideshow using CSS and a little jQuery for all modern browsers and OS.



CSSplay - CSS only responsive slide down/up menu

2014-08-15

A CSS ONLY responsive slide down/up full screen menu suitable for all the latest browsers and operating systems with animation.



CSSplay - CSS only responsive droplist menu

2014-08-13

A CSS ONLY responsive multi-level droplist menu suitable for all the latest browsers and operating systems with animation.



CSSplay - CSS only responsive 'Blinds' layout

2014-08-10

A CSS ONLY responsive 'curtains' layout using NO javascript. Suitable all the latest browser versions and OS, including tablets, touch screens and smartphones



CSSplay - Responsive 'curtains' layout version 2

2014-08-06

A second responsive 'curtains' layout using a litle javascript, this time working in the opposite direction. Suitable all browsers and OS including IE7+, Android and windows 8 smartphones



CSSplay - Responsive 'curtains' layout

2014-08-04

A responsive 'curtains' layout using a litle javascript. Working in all browsers and OS including IE7+ and Android



CSSplay - EasySlide Remix

2014-06-30

EasySlide - A responsive, easy to setup, CSS only Slideshow for images of different sizes



CSSplay - EasySlide

2014-06-20

EasySlide - A responsive, easy to setup, CSS only Slideshow



CSSplay - Vimeo video - hiding the control bar

2014-06-17

A CSS only method of hiding the control bar on Vimeo videos



CSSplay - Vimeo video select list with external controls

2014-06-11

Vimeo video select list with external play/pause/rewind controls and fallback for iOS



CSSplay - Vimeo videos autopause for IE8+

2014-06-09

Vimeo video autopause and off screen pause/continue for all browsers including IE8+



CSSplay - CSS Awesome Icons

2014-04-09

Using CSS to style 'Awesome Icons'



CSSplay - CSS British Flag

2014-04-05

The British Flag using just two divs.



CSSplay - CSS filter gallery

2014-04-04

A photograph gallery using css filters and transitions.



CSSplay - CSS 'filter' grayscale

2014-03-31

Two methods of implementing a change of image from grayscale to color.



CSSplay - CSS 'Drop Shadows'

2014-03-27

Two methods of implementing 'drop shadows' instead of 'box shadows'.



CSSplay - 3D Mega Menu

2014-03-25

A 3D mega menu with animation, suitable for touch screen devices, with fallback for IE7/8/9.



CSSplay - 3D Swan Lake animation

2014-03-19

3D Swan Lake animation with reflection and ripples.



CSSplay - 3D Eyeball animation

2014-03-13

3D 'eyeball' spherical animation.



CSSplay - 3D Astro Boy animation

2014-03-13

3D Astro Boy animation using a flat graphic folded into shape.



CSSplay - 3D Stormtrooper animation

2014-03-12

3D Stormtrooper animation using a flat graphic folded into shape.



CSSplay - 360º 3D Modelling NOT for IE10 and IE11

2014-03-11

3D modelling with 360 º animation using 'transform-style: preserve-3d;' so NOT for IE10 or IE11



CSSplay - 360º 3D Modelling for IE10 and IE11

2014-03-11

3D modelling with 360 º animation suitable for IE10 and IE11 without using 'transform-style: preserve-3d;'



CSSplay - 3D Perspective Modelling

2014-03-10

Another look at 3D modelling suitable for IE10 and IE11 without using 'transform-style: preserve-3d;'



CSSplay - Borders, Shadows & Gradients

2014-03-07

Using CSS 'border', box-shadow' and 'radial-gradient' together with ::before & ::after to produce graphics.



CSSplay - A droplist menu using flexbox

2014-03-06

A droplist menu using the latest flexbox syling which does not require size calculations.



CSSplay - A vertical accordion menu using flexbox

2014-03-05

A vertical accordion menu using the latest flexbox syling which does not require size calculations.



CSSplay - Basic Flexbox Layout

2014-03-05

Back to the very basic code and style to produce a 'sticky holy grail' layout.



CSSplay - Flexbox Accordion Gallery

2014-03-04

An accordion gallery using the latest flexbox styling techniques.



CSSplay - CSS Flexbox Layout

2014-03-03

A CSS responsive layout using the latest 'Flexbox' styling with header, three columns and sticky footer.