1: initial description.
This is a simplified version of “sketchbook”, which can be used as a kind of CSS driven flip‐over or slide‐show for any content anywhere in a page. No technical limitation for number of “sheets” – just add more “input and div” pairs inside <div class="sketch"> </div> container. Flipping back and forth through more than one to two dozen “sheets” is impractical in my opinion.
Everything is functioning as intended, but content‐styling is kept to a minimum in this test/demo page. All styling is found in page‐head.
Hageland 05.oct.2013 
2: citrus reflections – demo'ing with large content.
Old orange tree in my front yard.
3: optional height.
There are no initial restrictions in how tall a sheet in this sketchbook can be.
For the purpose of testing / demo'ing I have given the sketchbook container an experimental max-height value, and the sheets inside it a min-height value. This gives the sketchbook a form for semi‐dynamic height that can be used to control how it behaves in and interacts with the rest of a page. This can be observed by reading and tracking the paragraphs placed below this sketchbook sheet.
4: responsive design, or not … doesn't matter.
This sketchbook variant is initially flexible – no set width, and can go in any design regardless of whether it is a responsive or a more fixed design.
I have not included alternative styling for Small Screen Rendering on mobile devices, yet.
5: best to limit paragraph length.
A very wide sketchbook implementation may gain from having some form for paragraph‐length control built in, as very long lines are as a general rule not easy to follow and read.
Here I have simply given paragraphs less than half the total width of the sheet to spread out on, which makes them line up in two columns.
6: dry lake – demo'ing with large content.
Signs of a very dry winter and spring in Florida.
7: sheets are stacked in display.
As in a real sketchbook sheets are visibly stacked below, or above and behind, each other. This is achieved by initially setting sheet‐divs to be only 1px tall and hiding the overflow, and then restyling the “checked” sheet‐div with auto-height to let it expand to full size.
The effect of this can be observed in the shadows at the bottom and on the right side of the visible – “checked” – sheet, in that the first sheet has a thick and dark shadow caused by the added shadow on the sheets below it. This shadow becomes thinner and lighter as we “flip” towards the last sheet, as fewer and fewer sheets then “cast a shadow” behind the one in view.
8: transitions.
For now I have only implemented an opacity‐transition … the “checked” sheet go from low to full opacity with a duration of one second.
As the sketchbook sheets are stacked – not hidden, I envision implementations where sheets expand and contract as the function of CSS transitions as they get “checked” / “unchecked”. Just haven't gotten around to code up a real nice‐looking and ‐acting “flip” function yet.
9: more description of the sketchbook itself…
This sketchbook is of course well suited to present mixed content. Its
use is, as for most things web, only limited by our imagination.
For this version of the
sketchbook I have kept everything simple, as it is more a proof
of concept than anything. Not much chance that the sketchbook concept
will end up in the garbage bin, but it does need time to grow.
How it works: flipping forward and backwards between individual “sheets” in the sketchbook by clicking on those arrows, is achieved by selecting one of two “radio” buttons systematically layered on top of the arrows and made invisible by lowering their opacity.
implementation
Absolute positioning of “input type=radio” buttons
over visual pointers or tabs, is the simple part. Automatically replace them so
only the buttons opening the previous and next sheet can be
clicked for the flipping effect, required some thinking on my part.
Simplest solution found was to stack all buttons in
ascending order at the previous position and hide all input buttons from
present onwards using “display: none”.
As “present” sketchbook sheet is known based on which
“radio” input is “checked” at any given time,
previous is always in place on top of the stack and only next gets
repositioned and kept visible. And then the stack is automatically rearranged
when either previous or next gets “checked”.
The “input type=radio” buttons are made as wide and tall as needed
to cover the underlying visual pointers – in this sketchbook that
are the arrows near the upper/right corner on each sheet. That way they will
receive “mouse clicks” where expected. Finally opacity is set to
near‐zero for the “input type=radio” buttons, and the cursor
is styled to indicate clickable area, and with that it is pretty much done.
In this sketchbook implementation the
double‐arrow images are replaced with single‐arrow images for first
and last sheet, an effect achieved by matching “checked” with first
and last child container in the main sketchbook container. This
image‐switching is made easy by inserting arrow images as
“generated content”.
browser problems
In an attempt to keep the HTML source‐code as slim and efficient as possible, I have made extensive use of CSS solutions like “generated content” and CSS3 selector chains. Of course, this means older versions of any browser may fail some, but I do not see that as a problem worth spending much time on – older and less capable browser versions should be phased out as soon as technically possible. Latest version of all major browsers are doing OK.
Older Internet Explorer specifics: IE9 throws in a few bugs and
limitations that makes the sketchbook show up and work less than optimal.
On the whole IE9 handles it all well enough for comfort though, so users
should not have much to complain about.
IE8
can not select sheets based on “radio” button status without active
help.
IE7 and older can not handle much at
all.
Observe that content placed in this position is inside the sketchbook container, and will be pushed down by taller sketchbook sheets regardless of the height of the green‐bordered sketchbook container itself.