Leaving presentation mode.
Style 2 for the b6+ slide framework
Author: Bert Bos
<bert@w3.org>
Incremental display with class=incremental
If an element has class=incremental
or class=overlay, its children will be displayed one
at a time. The keys (space, arrow keys), clicks or gestures that
normally advance to the next slide instead cause the next child to
be displayed, until all of them are visible, after which the
navigation continues to the next slide. Example:
- The first item is visible first.
- The second becomes visible next.
- And then the third.
Incremental display with class=next
Incremental display can also be done by
setting class=next on all elements that should be
unveiled one by one. Example
- The first item is visible first.
- The second becomes visible next.
- The third item, without
class=next, is always visible.
- And then the fourth.
In this case the elements don't have to be children
of the same parent.
Navigation
| Event | Effect
|
|---|
| ‘A’, double click, 3-finger touch | Enter slide mode
|
|---|
| ‘A’, esc | Leave slide mode
|
|---|
| →, ↓, spacebar, left click | Next slide or incremental element
|
|---|
| page down, swipe right | Next slide
|
|---|
| ←, ↑, page up, swipe left | Previous slide
|
|---|
| home, end | First, resp. last slide
|
|---|
| F1, F | Toggle full-screen
|
|---|
| C | Table of contents
|
|---|
| ? | Show available commands
|
|---|
Lists
An example of a numbered list:
- Potatoes
- Onions and olives
An example of an unordered list:
Some elements
Words can be given a strong emphasis, which
makes them appear in bold
The normal emphasis has a highlighter effect.
Code looks like this: if (a) return b;
This is an example of a note, in a smaller font
Elements updated in-place
Combining class=incremental with class=in-place
yields elements that are displayed one by one, with each one
replacing the previous. Example:
- First element
- The second replaces the first
until it itself is replaced
- The third replaces the second.
(class=overlay is an alias for class=incremental.)
An image on the side
![[Picture of a stylized tree with colorful, square leaves]](CSS_color_tree3t.png)
It seems the famous ‘lorem ipsum’ is based on a text by Cicero,
but with the lines mixed up. On a Cicero by the text, it seems the
‘ipsum lorem’ is famous based with lines but mixed up.
An image on the side
And again, with class ‘slide side right’.
It seems the famous ‘lorem ipsum’ is based on a text by Cicero,
but with the lines mixed up. On a Cicero by the text, it seems the
‘ipsum lorem’ is famous based with lines but mixed up.
In columns
Children of an element with a class of ‘columns’ are
distributed over two columns
This is the second child, which goes into the right
column
And this is the third one. Left column again.
Etc.
place t l
place t
place t r
Here is something for the left
side, with class place l
class place puts an element
centered in a 3×3 grid
place r
place b l
place b
combine place with
top (or t),
right (or r),
bottom (or b) and
left (or l)
Numbered lines of code
Lines in a PRE can be numbered
(automatically)
* Give the PRE a class of "numbered"
* Works for up to 20 lines
(depending on font size)
six
seven
eight
nine
ten
eleven
Image overlay: cover
Careful, some images make the text hard to
read!
Image overlay: fit
Careful, some images make the text
hard to read!
Grow!
Animated
Don't use this too often!
Shout and grow!
Animated
Don't use this too often!
Slide transitions
The style sheet predefines several transitions: fade-in, slide-in,
move-left, etc.
A transition can be set globally, applying to all slides; or
locally, applying only to the transtion between this slide and the
next.