* reveal.js
* http://lab.hakim.se/reveal-js
* MIT licensed
- *
+ *
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
*/
.reveal dl, .reveal dt, .reveal dd, .reveal ol, .reveal ul, .reveal li,
.reveal fieldset, .reveal form, .reveal label, .reveal legend,
.reveal table, .reveal caption, .reveal tbody, .reveal tfoot, .reveal thead, .reveal tr, .reveal th, .reveal td,
-.reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed,
-.reveal figure, .reveal figcaption, .reveal footer, .reveal header, .reveal hgroup,
+.reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed,
+.reveal figure, .reveal figcaption, .reveal footer, .reveal header, .reveal hgroup,
.reveal menu, .reveal nav, .reveal output, .reveal ruby, .reveal section, .reveal summary,
.reveal time, .reveal mark, .reveal audio, video {
margin: 0;
vertical-align: baseline;
}
-.reveal article, .reveal aside, .reveal details, .reveal figcaption, .reveal figure,
+.reveal article, .reveal aside, .reveal details, .reveal figcaption, .reveal figure,
.reveal footer, .reveal header, .reveal hgroup, .reveal menu, .reveal nav, .reveal section {
display: block;
}
* GLOBAL STYLES
*********************************************/
-html,
+html,
body {
width: 100%;
height: 100%;
line-height: 1;
}
-::selection {
- background:#FF5E99;
- color:#fff;
- text-shadow: none;
+::selection {
+ background:#FF5E99;
+ color:#fff;
+ text-shadow: none;
}
@media screen and (max-width: 900px) {
/* preserve aspect ratio and scale image so it's bound within the section */
max-width: 100%;
max-height: 100%;
-}
+}
-.reveal strong,
+.reveal strong,
.reveal b {
font-weight: bold;
}
-.reveal em,
+.reveal em,
.reveal i {
font-style: italic;
}
-.reveal ol,
+.reveal ol,
.reveal ul {
display: inline-block;
width: 70%;
margin: 5px auto;
padding: 5px;
-
+
font-style: italic;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
content: '”';
}
-.reveal q {
+.reveal q {
font-style: italic;
}
.reveal q:before {
max-height: 400px;
}
-.reveal table th,
+.reveal table th,
.reveal table td {
text-align: left;
padding-right: .3em;
text-shadow: rgb(255,255,255) 1px 1px 2px;
}
-.reveal sup {
+.reveal sup {
vertical-align: super;
}
-.reveal sub {
+.reveal sub {
vertical-align: sub;
}
right: 10px;
bottom: 10px;
}
-
+
.reveal .controls a {
font-family: Arial;
font-size: 0.83em;
padding: 20px 0px;
overflow: visible;
z-index: 1;
-
+
text-align: center;
-webkit-transition: -webkit-perspective .4s ease;
-ms-transition: -ms-perspective .4s ease;
-o-transition: -o-perspective .4s ease;
transition: perspective .4s ease;
-
+
-webkit-perspective: 600px;
-moz-perspective: 600px;
-ms-perspective: 600px;
min-height: 600px;
z-index: 10;
-
+
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-
+
-webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-ms-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
.reveal .slides>section.past {
display: block;
opacity: 0;
-
+
-webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
.reveal .slides>section.future {
display: block;
opacity: 0;
-
+
-webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
.reveal .slides>section>section.past {
display: block;
opacity: 0;
-
+
-webkit-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
-moz-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
-ms-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
.reveal .slides>section>section.future {
display: block;
opacity: 0;
-
+
-webkit-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
-moz-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
-ms-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-
+
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: none;
-webkit-transition-duration: 800ms;
- -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
+ -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
amount 0, randomness 0, flipAxis 0 1 0, tileOutline 1
);
}
.reveal.tileflip .slides section.past {
-webkit-transform: none;
-webkit-transition-duration: 800ms;
-
- -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
+
+ -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
amount 1, randomness 0, flipAxis 0 1 0, tileOutline 1
);
}
-webkit-transform: none;
-webkit-transition-duration: 800ms;
- -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
+ -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
amount 1, randomness 0, flipAxis 0 1 0, tileOutline 1
);
}
-.reveal.tileflip .slides>section>section.present {
- -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
+.reveal.tileflip .slides>section>section.present {
+ -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
amount 0, randomness 2, flipAxis 1 0 0, tileOutline 1
);
}
-.reveal.tileflip .slides>section>section.past {
- -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
+.reveal.tileflip .slides>section>section.past {
+ -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
amount 1, randomness 2, flipAxis 1 0 0, tileOutline 1
);
}
-.reveal.tileflip .slides>section>section.future {
- -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
+.reveal.tileflip .slides>section>section.future {
+ -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
amount 1, randomness 2, flipAxis 1 0 0, tileOutline 1
);
}
.reveal.overview .slides section {
padding: 20px 0;
max-height: 600px;
- overflow: hidden;
+ overflow: hidden;
opacity: 1!important;
visibility: visible!important;
cursor: pointer;
-<!doctype html>
+<!doctype html>
<html lang="en">
-
+
<head>
<meta charset="utf-8">
-
+
<title>reveal.js - The HTML Presentation Framework</title>
<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-
+
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/default.css" id="theme">
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
-
+
<body>
-
+
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<h1>Reveal.js</h1>
<h3>HTML Presentations Made Easy</h3>
</section>
-
+
<section>
<h2>Heads Up</h2>
<p>
- reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with
+ reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with
support for CSS 3D transforms to see it in its full glory.
</p>
<p>
Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
</aside>
</section>
-
+
<!-- Example of nested vertical slides -->
<section>
<section>
<li>Or here</li>
</ul>
</section>
-
+
<section>
<h2>Fantastic Ordered List</h2>
<ol>
<section data-markdown>
<script type="text/template">
## Markdown support
-
+
For those of you who like that sort of thing. Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).
<section data-markdown>
## Markdown support
- For those of you who like that sort of thing.
+ For those of you who like that sort of thing.
Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).
</section>
</script>
<a href="?transition=cube#/transitions">Cube</a> -
<a href="?transition=page#/transitions">Page</a> -
<a href="?transition=concave#/transitions">Concave</a> -
- <a href="?transition=zoom#/transitions">Zoom</a> -
- <a href="?transition=linear#/transitions">Linear</a> -
- <a href="?transition=none#/transitions">None</a> -
+ <a href="?transition=zoom#/transitions">Zoom</a> -
+ <a href="?transition=linear#/transitions">Linear</a> -
+ <a href="?transition=none#/transitions">None</a> -
<a href="?#/transitions">Default</a>
</p>
</section>
The nice thing about standards is that there are so many to choose from</q> and block:
</p>
<blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
- For years there has been a theory that millions of monkeys typing at random on millions of typewriters would
+ For years there has been a theory that millions of monkeys typing at random on millions of typewriters would
reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.
</blockquote>
</section>
-
+
<section>
<h2>Pretty Code</h2>
<pre><code contenteditable>
function linkify( selector ) {
if( supports3DTransforms ) {
-
+
var nodes = document.querySelectorAll( selector );
for( var i = 0, len = nodes.length; i < len; i++ ) {
</code></pre>
<p>Courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
</section>
-
+
<section>
<h2>Intergalactic Interconnections</h2>
<p>
<p class="fragment highlight-blue">highlight-blue</p>
</section>
</section>
-
+
<section>
<h2>Spectacular image!</h2>
<a class="image" href="http://lab.hakim.se/meny/" target="_blank">
<img width="320" height="299" src="http://s3.amazonaws.com/hakim-static/portfolio/images/meny.png" alt="Meny">
</a>
</section>
-
+
<section>
<h2>Export to PDF</h2>
<p>Presentations can be <a href="https://github.com/hakimel/reveal.js#pdf-export">exported to PDF</a>, below is an example that's been uploaded to SlideShare.</p>
document.getElementById('slideshare').attributeName = 'allowfullscreen';
</script>
</section>
-
+
<section>
<h2>Take a Moment</h2>
<p>
- Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take disctracting slides off the screen
+ Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take disctracting slides off the screen
during a presentation.
</p>
</section>
<section>
<h2>It's free</h2>
<p>
- reveal.js and <a href="http://www.rvl.io">rvl.io</a> are entirely free but if you'd like to support the projects you can donate below.
+ reveal.js and <a href="http://www.rvl.io">rvl.io</a> are entirely free but if you'd like to support the projects you can donate below.
Donations will go towards hosting and domain costs.
</p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
</form>
</section>
-
+
<section>
<h1>THE END</h1>
<h3>BY Hakim El Hattab / hakim.se</h3>
</section>
</div>
-
+
</div>
<script src="lib/js/head.min.js"></script>
controls: true,
progress: true,
history: true,
-
+
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/none
projects / reveal.js.git / commitdiff