CSS PLAY
Doing It With Style
08-11-2021
Website layout with vertical scroll-snap and sticky animation.
03-11-2021
Website page with horizontal scrolling sub pages.
05-02-2021
Horizontal scrolling left/right stacking layout using mousewheel and swipe.
19-01-2017
Layout showing the power of 'flexbox' to producing responsive tempates.
24-04-2016
Layout using 'scroll snap points' to scroll the page one screen at a time. This one is a 3 x 3 grid.
06-04-2016
Layout using 'scroll snap points' to scroll the page one screen at a time.
28-08-2015
Simple CSS ONLY template for modal windows, fullscreen, slide in and push in. Suitable for all modern browsers.
11-06-2015
Experimental 3x3 grid layout using css and viewport, for all the latest browsers and OS, except Safari PC.
03-06-2015
Vxperimental layout using css and viewport, for all the latest browsers and OS, except Safari PC.
29-05-2015
Vxperimental layout using css and viewport, buggy in Opera, fails in Safari PC
15-09-2014
Simple css and jQuery responsive single page website with wavy sections and smooth scrolling navigation.
04-08-2014
Basic 'curtains' layout where page sections stop scrolling when viewed and content below overlaps. Suitable for all browsers and OS.
26-08-2014
Simple css and jQuery responsive vertical scrolling slideshow for all modern browsers and OS.
10-08-2014
CSS only responsive horizontal blinds with information panels suitable for all the latest browsers and OS.
06-08-2014
Basic 'curtains' layout this time working in the opposite direction. Suitable for all browsers and OS.
05-09-2014
Simple css and jQuery responsive single page website with slanted sections and smooth scrolling navigation.
Back in 2005 the main way to layout a page was to use tables, but now tables are a thing of the past and should be used only for tabular information.
I carried out an exercise a while back, converting phpBB from it's original famous tabular format to just divs. It could be done, but it's wasn't easy.
This was the problem back then, all we has was <div> (floating, relative, absolute and fixed) and they didn't perform in the way we would have liked. Look at all the attempts there were to create the perfect header/three column/footer layout with the columns all the same size.
Simple...you would have thought so, a piece of cake for tables, so why not for divs.
Perhaps we were looking at layouts to copy tables, when we should have been looking at layouts to do things that tables couldn't do.
But now we should be getting away from three columns (they all look the same anyway) and should be looking for something more exciting.....and that is what this section is about.
I hope you find these layouts are a bit more adventurous.