diff options
| author | Hakim El Hattab <hakim@squarespace.com> | 2013-06-04 21:29:32 +0200 |
|---|---|---|
| committer | Hakim El Hattab <hakim@squarespace.com> | 2013-06-04 21:29:32 +0200 |
| commit | ff35847fc644253a19f4fcc43b05d4afb5960bcc (patch) | |
| tree | 1b525aaa206cce72af97d8ba94393709c5a51174 /index.html | |
| parent | 0ce57f1f91d079b027dc250a2827b8ac4d93bd2d (diff) | |
| download | fosdem-2018-presentation-ff35847fc644253a19f4fcc43b05d4afb5960bcc.tar fosdem-2018-presentation-ff35847fc644253a19f4fcc43b05d4afb5960bcc.tar.gz | |
update example deck to use slide backgrounds (#453)
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 27 |
1 files changed, 18 insertions, 9 deletions
@@ -183,25 +183,34 @@ </section> <section> - <section data-state="alert"> - <h2>Global State</h2> + <h2>Global State</h2> + <p> + Set <code>data-state="something"</code> on a slide and <code>"something"</code> + will be added as a class to the document element when the slide is open. This lets you + apply broader style changes, like switching the background. + </p> + </section> + + <section> + <section data-background="#007777"> + <h2>Slide Backgrounds</h2> <p> - Set <code>data-state="something"</code> on a slide and <code>"something"</code> - will be added as a class to the document element when the slide is open. This lets you - apply broader style changes, like switching the background. + Set <code>data-background="#007777"</code> on a slide to change the full page background to the given color. All CSS color formats are supported. </p> <a href="#" class="image navigate-down"> <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow"> </a> </section> - <section data-state="blackout"> - <h2>"blackout"</h2> + <section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif"> + <h2>Image Backgrounds</h2> + <pre><code><section data-background="image.png"></code></pre> <a href="#" class="image navigate-down"> <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow"> </a> </section> - <section data-state="soothe"> - <h2>"soothe"</h2> + <section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif" data-background-repeat="repeat" data-background-size="100px"> + <h2>Repeated Image Backgrounds</h2> + <pre><code style="word-wrap: break-word;"><section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"></code></pre> <a href="#" class="image navigate-next"> <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(-90deg);"> </a> |