Skip to content

Commit 4a62376

Browse files
henrikingohenrikingo
committed
Add new demo examples/cube to showcase a simple 3-dimensional presentation.
Also nice demo of multi-dimensional navigation from impress#465
1 parent a37723f commit 4a62376

3 files changed

Lines changed: 813 additions & 0 deletions

File tree

‎examples/cube/css/cube.css‎

Lines changed: 256 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,256 @@
1+
@import url(fonts.css);
2+
3+
4+
5+
/* Fallback message */
6+
7+
.fallback-message {
8+
font-family: sans-serif;
9+
line-height: 1.3;
10+
11+
width: 780px;
12+
padding: 10px 10px 0;
13+
margin: 20px auto;
14+
15+
border: 1px solid #E4C652;
16+
border-radius: 10px;
17+
background: #EEDC94;
18+
}
19+
20+
.fallback-message p {
21+
margin-bottom: 10px;
22+
}
23+
24+
.impress-supported .fallback-message {
25+
display: none;
26+
}
27+
28+
29+
/* Body & steps */
30+
body {
31+
font-family: 'PT Sans', sans-serif;
32+
min-height: 740px;
33+
34+
background: #00000f;
35+
color: rgb(102, 102, 102);
36+
}
37+
38+
.step {
39+
position: relative;
40+
width: 700px;
41+
height: 700px;
42+
padding: 40px 60px;
43+
margin: 20px auto;
44+
45+
box-sizing: border-box;
46+
47+
line-height: 1.5;
48+
49+
background-color: white;
50+
border-radius: 10px;
51+
box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
52+
53+
text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
54+
font-family: 'Open Sans', Arial, sans-serif;
55+
font-size: 30px;
56+
letter-spacing: -1px;
57+
58+
}
59+
60+
#overview {
61+
background-color: transparent;
62+
border: none;
63+
box-shadow: none;
64+
}
65+
/*
66+
Make inactive steps a little bit transparent.
67+
*/
68+
.impress-enabled .step {
69+
margin: 0;
70+
opacity: 0.7;
71+
transition: opacity 1s;
72+
}
73+
74+
.impress-enabled .step.active { opacity: 1 }
75+
76+
.notes {
77+
display: none;
78+
}
79+
80+
h1,
81+
h2,
82+
h3 {
83+
margin-bottom: 0.5em;
84+
margin-top: 0.5em;
85+
text-align: center;
86+
}
87+
88+
p {
89+
margin: 0.7em;
90+
}
91+
92+
li {
93+
margin: 0.2em;
94+
}
95+
96+
/* Highlight.js used for coloring pre > code blocks. */
97+
pre > code {
98+
font-size: 14px;
99+
text-shadow: 0 0 0 rgba(0, 0, 0, 0);
100+
}
101+
102+
/* Inline code, no Highlight.js */
103+
code {
104+
font-family: "Cutive mono","Courier New", monospace;
105+
}
106+
107+
108+
a {
109+
color: inherit;
110+
text-decoration: none;
111+
padding: 0 0.1em;
112+
background: rgba(200,200,200,0.2);
113+
text-shadow: -1px 1px 2px rgba(100,100,100,0.9);
114+
border-radius: 0.2em;
115+
border-bottom: 1px solid rgba(100,100,100,0.2);
116+
border-left: 1px solid rgba(100,100,100,0.2);
117+
118+
transition: 0.5s;
119+
}
120+
a:hover,
121+
a:focus {
122+
background: rgba(200,200,200,1);
123+
text-shadow: -1px 1px 2px rgba(100,100,100,0.5);
124+
}
125+
126+
blockquote {
127+
font-family: 'PT Serif';
128+
font-style: italic;
129+
font-weight: 400;
130+
}
131+
132+
em {
133+
text-shadow: 0 2px 2px rgba(0, 0, 0, .3);
134+
}
135+
136+
strong {
137+
text-shadow: -1px 1px 2px rgba(100,100,100,0.5);
138+
}
139+
140+
q {
141+
font-family: 'PT Serif';
142+
font-style: italic;
143+
font-weight: 400;
144+
text-shadow: 0 2px 2px rgba(0, 0, 0, .3);
145+
}
146+
147+
strike {
148+
opacity: 0.7;
149+
}
150+
151+
small {
152+
font-size: 0.4em;
153+
}
154+
155+
156+
/*
157+
This version of impress.js supports plugins, and in particular, a UI toolbar
158+
plugin that allows easy navigation between steps and autoplay.
159+
*/
160+
.impress-enabled div#impress-toolbar {
161+
position: fixed;
162+
right: 1px;
163+
bottom: 1px;
164+
opacity: 0.6;
165+
z-index: 10;
166+
}
167+
.impress-enabled div#impress-toolbar > span {
168+
margin-right: 10px;
169+
}
170+
171+
/*
172+
With help from the mouse-timeout plugin, we can hide the toolbar and
173+
have it show only when you move/click/touch the mouse.
174+
*/
175+
body.impress-mouse-timeout div#impress-toolbar {
176+
display: none;
177+
}
178+
179+
/*
180+
In fact, we can hide the mouse cursor itself too, when mouse isn't used.
181+
*/
182+
body.impress-mouse-timeout {
183+
cursor: none;
184+
}
185+
186+
187+
188+
/* Progress bar */
189+
.impress-progressbar {
190+
position: absolute;
191+
right: 118px;
192+
bottom: 1px;
193+
left: 118px;
194+
border-radius: 7px;
195+
border: 2px solid rgba(100, 100, 100, 0.2);
196+
}
197+
.impress-progressbar DIV {
198+
width: 0;
199+
height: 2px;
200+
border-radius: 5px;
201+
background: rgba(75, 75, 75, 0.4);
202+
transition: width 1s linear;
203+
}
204+
.impress-progress {
205+
position: absolute;
206+
left: 59px;
207+
bottom: 1px;
208+
text-align: left;
209+
font-size: 10pt;
210+
opacity: 0.6;
211+
}
212+
213+
/* Help popup plugin */
214+
.impress-enabled #impress-help {
215+
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
216+
color: #EEEEEE;
217+
font-size: 80%;
218+
position: fixed;
219+
left: 2em;
220+
bottom: 2em;
221+
width: 24em;
222+
border-radius: 1em;
223+
padding: 1em;
224+
text-align: center;
225+
z-index: 100;
226+
font-family: Verdana, Arial, Sans;
227+
}
228+
.impress-enabled #impress-help td {
229+
padding-left: 1em;
230+
padding-right: 1em;
231+
}
232+
233+
/*
234+
And as the last thing there is a workaround for quite strange bug.
235+
It happens a lot in Chrome. I don't remember if I've seen it in Firefox.
236+
237+
Sometimes the element positioned in 3D (especially when it's moved back
238+
along Z axis) is not clickable, because it falls 'behind' the <body>
239+
element.
240+
241+
To prevent this, I decided to make <body> non clickable by setting
242+
pointer-events property to `none` value.
243+
Value if this property is inherited, so to make everything else clickable
244+
I bring it back on the #impress element.
245+
246+
If you want to know more about `pointer-events` here are some docs:
247+
https://developer.mozilla.org/en/CSS/pointer-events
248+
249+
There is one very important thing to notice about this workaround - it makes
250+
everything 'unclickable' except what's in #impress element.
251+
252+
So use it wisely ... or don't use at all.
253+
*/
254+
.impress-enabled { pointer-events: none }
255+
.impress-enabled #impress { pointer-events: auto }
256+
.impress-enabled #impress-toolbar { pointer-events: auto }

0 commit comments

Comments
 (0)