xobs/fa23-si
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update example deck to use slide backgrounds (#453)

Browse Source
This commit is contained in:
Hakim El Hattab
2013-06-04 21:29:32 +02:00
parent 0ce57f1f91
commit ff35847fc6
1 changed files with 18 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
index.html
View File

@@ -183,25 +183,34 @@
</section> </section>
<section> <section>
<section data-state="alert">
<h2>Global State</h2> <h2>Global State</h2>
<p> <p>
Set <code>data-state="something"</code> on a slide and <code>"something"</code> 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 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. apply broader style changes, like switching the background.
</p> </p>
</section>
<section>
<section data-background="#007777">
<h2>Slide Backgrounds</h2>
<p>
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"> <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"> <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
</a> </a>
</section> </section>
<section data-state="blackout"> <section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif">
<h2>"blackout"</h2> <h2>Image Backgrounds</h2>
<pre><code>&lt;section data-background="image.png"&gt;</code></pre>
<a href="#" class="image navigate-down"> <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"> <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
</a> </a>
</section> </section>
<section data-state="soothe"> <section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif" data-background-repeat="repeat" data-background-size="100px">
<h2>"soothe"</h2> <h2>Repeated Image Backgrounds</h2>
<pre><code style="word-wrap: break-word;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</code></pre>
<a href="#" class="image navigate-next"> <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);"> <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> </a>