Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
server
team-presentation
Commits
ff35847f
Commit
ff35847f
authored
Jun 04, 2013
by
Hakim El Hattab
Browse files
update example deck to use slide backgrounds (#453)
parent
0ce57f1f
Changes
1
Hide whitespace changes
Inline
Side-by-side
index.html
View file @
ff35847f
...
...
@@ -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>
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment