- CSS - CSS gallery - CSS lightbox - CSS slide renderer - CSS3 - CSS3 animations - HTML semantics - HTML5 - HTML5 elements - Image gallery - Lightbox - Microdata - schema.org - Slide renderer - Slides - Slideshow - +
+ CSS + CSS gallery + CSS lightbox + CSS slide renderer + CSS3 + CSS3 animations + HTML semantics + HTML5 + HTML5 elements + Image gallery + Lightbox + Microdata + Microformats + Microformats2 + schema.org + Slide renderer + Slides + Slideshow
For creating a slide with Take five!, all you need to do is to include takefive.css in your document, then use one of the following basic syntaxes:
<article id="my_hash1" class="slide">+
<element-to-be-slided />
</article>
<article id="my_hash1" class="slide">
<element-to-be-slided />
</article>
<article id="my_hash2" itemscope class="slide">+
<nav>
<a href="#nowhere" rel="parent"></a>
</nav>
<element-to-be-slided />
</article>
<article id="my_hash2" itemscope class="slide">
<nav>
<a href="#nowhere" rel="parent"></a>
</nav>
<element-to-be-slided />
</article>
<article id="my_hash3" itemscope class="slide">+
<element-to-be-slided />
<nav>
<a href="#nowhere" rel="parent">My diary</a>
</nav>
</article>
<article id="my_hash3" itemscope class="slide">
<element-to-be-slided />
<nav>
<a href="#nowhere" rel="parent">My diary</a>
</nav>
</article>
<article id="my_hash4" itemscope class="slide">@@ -36,7 +36,7 @@
<nav>
<a href="#nowhere" rel="parent">My home page</a>
<a href="#my_hash2" rel="prev">[previous slide name]</a>
<a href="#my_hash2" rel="next">[next slide name]</a>
</nav>
<header>
<h1>[title]</h1>
</header>
<this-element-will-be-slided />
<this-element-will-be-displayed-on-the-right-side-of-the-screen />
<this-element-will-be-displayed-on-the-right-side-of-the-screen />
<etc. />
<footer>[footer]</footer>
<aside>[aside]</aside>
</article>
<p style="text-align: center; font-size: 2em;">
<a href="#photo_of_the_day">Photo of the day</a>
</p>
<article class="slide" id="photo_of_the_day" itemscope itemtype="http://schema.org/ImageObject">
<nav><a href="#nowhere" rel="parent"></a></nav>
<img src="images/1.jpg" alt="Photo of the day" itemprop="image" />
</article>
will produce this result.
Each slide is defined through the element <article id="my-hash-tag" class="slide"> … </article>. Such element is constructed so that:
Each slide is defined through the element <article id="my-hash-tag" class="slide"> … </article>. Such element is constructed so that:
<nav> element found to be direct child of the slide will be placed on the left side of the viewport. Other <nav> direct children will be normally displayed within the flow body of the main parent (i.e., on the right side, see below).<header> element found to be direct child of the slide will be placed on the top side of the viewport. Other <header> direct children will be normally displayed within the flow body of the main parent (i.e., on the right side, see below) – but consider to use only one <header> element for each scoped parent.<footer> element found to be direct child of the slide will be placed on the right-bottom corner of the viewport. Other <footer> direct children will be displayed normally within the flow body of the main parent (i.e., on the right side, see below) – but consider to use only one <footer> element for each scoped parent.<aside> element found to be direct child of the slide will be placed on the left-bottom corner of the viewport. Other <aside> direct children will be displayed normally within the flow body of the main parent (i.e., on the right side, see below)..<nav> element found to be direct child of the slide will be placed on the left side of the viewport. Other <nav> elements found to be direct children of the slide will be normally displayed within the flow body of the main parent (i.e., on the right side, see below).<header> element found to be direct child of the slide will be placed on the top side of the viewport. Other <header> elements found to be direct children of the slide will be normally displayed within the flow body of the main parent (i.e., on the right side, see below) – but consider to use only one <header> element for each scoped parent.<footer> element found to be direct child of the slide will be placed on the right-bottom corner of the viewport. Other <footer> elements found to be direct children of the slide will be normally displayed within the flow body of the main parent (i.e., on the right side, see below) – but consider to use only one <footer> element for each scoped parent.<aside> element found to be direct child of the slide will be placed on the left-bottom corner of the viewport. Other <aside> elements found to be direct children of the slide will be normally displayed within the flow body of the main parent (i.e., on the right side, see below)..<nav>, nor <header>, nor <footer>, nor <aside> will be placed at the center of the slide and considered to be the main content of the slide. From now on, this will be called “The Fifth Element” or “the <leeloo> element” (after Luc Besson's movie).overflow property of this portion of the slide is set on hidden.<a href="…"> elements children of the viewport's main <nav> will be considered as internal navigation links, and displayed on the left side of the viewport (with the exception of a[rel="parent"], see below). Within the main <nav> container, Take five! is sensitive to the rel attribute. In particular:article.slide > nav:first-of-type a[rel="index"] will be accompained by the label “Index”a[rel="parent"] element<leeloo> element and is empty ⇒ a transparent clickable layer will cover the whole (and only) <leeloo> element.<leeloo> element but is not empty,<leeloo> element but is not empty,<nav> and the <leeloo> element (empty or not empty),a[rel="parent"] *is* the <leeloo> element iself – very unlikely...rel attributeIt is syntactically and semantically valid to assign more than one token to the rel attribute. As explained in the W3C Recommendation 28 October 2014,
It is syntactically and semantically valid to assign more than one token to the rel attribute. As explained in the W3C Recommendation 28 October 2014,
The attribute's value must be a set of space-separated tokens.
In this case, within the main <nav>, the CSS will choose the most important token according to the following order (the more down in the list the less important):
itemscope attribute and HTML5 microdata, please see schema.org. A lists of the main rel attributes can be found here, while its extension, together with information about HTML5 microformats, can be found here.class="slide" assigned to an <article> element."no-hashtag" – as in <article class="slide no-hashtag" id="my-hash-name"> … </article>.<nav>'s links parent, next, prev, index, last, first, bookmark and author by assigning the class "no-nav" to the link – as in <a href="#sample-slide" rel="next" class="no-nav">Sample slide</a> or <a href="#sample-slide" rel="next" class="no-label no-nav">Sample slide</a>. The "no-nav" class allows also to declare more than one link with the same rel attribute within the same main <nav>, with the only exception of a[rel="parent"], which can never be duplicated within the main <nav>.article.slide) can optionally possess a data-context attribute, whose content will be displayed on the left-bottom of the viewport – as in <article class="slide" data-context="Hello world!" id="my-hash-name"> … </article>.