CSS PLAY - Viewport Slanty

experiments with cascading style sheets


#1 a fixed background image

a street artist in palma majorca

this text will scroll while the image stays fixed
click/tap the colored blocks in the header to scroll to that panel

#2 a text panel

this can contain any code you like

the panel will grow and shrink as the page is resized



information



With single page websites becoming more popular and also the use of fixed background images with slants to define the various sections, I thought that I would produce a simple layout using just CSS showing how easy this is.

Works in all the latest browser version, except PC Safari, including tablets and smartphones. Most tablets and smartphones do not support fixed backgrounds so on these devices the background images scroll with the page.

The layout is fully responsive using @viewport and vh, vw, vmin sizing.

You have a choice of using the vertical scrollbar to move from section to section, or use the # links in the header to jump to a specific section.

Each section can contain any code you like.

The 'slants' are produced using css border styles and can be any color you like and the angle of slant can be easily adjusted by a small change to the slant style.



The Google ads are responsive, but not 'dynamic' so you will need to reload the page to see changes to the ad size.



#3 second fixed background image

alcudia old town

these edges can be any color you like

#4 second text panel

again any code you like

the background color should match the edge colors

#5 a third fixed image

croome court

a view of the lake in this national trust estate

#6 third text panel

responsive

these panels will grow and shrink with the browser size



#7 port de pollença

an early morning photograph

the sea was calm and produced some great reflections

#8 almost at the end of the page

so code goes here

and the section grows and shrinks

#9 steampunk hq, oamaru

the place to visit

for steam punk fans

#10 last but one text panel

so more code here

just one more panel below



#11 the last panel

again a code panel

so the end is nigh, just the footer to go