| commit | author | age | ||
| e78ca8 | 1 | /* |
| SP | 2 | So you like the style of impress.js demo? |
| 3 | Or maybe you are just curious how it was done? | |
| 4 | ||
| 5 | You couldn't find a better place to find out! | |
| 6 | ||
| 7 | Welcome to the stylesheet impress.js demo presentation. | |
| 8 | ||
| 9 | Please remember that it is not meant to be a part of impress.js and is | |
| 10 | not required by impress.js. | |
| 11 | I expect that anyone creating a presentation for impress.js would create | |
| 12 | their own set of styles. | |
| 13 | ||
| 14 | But feel free to read through it and learn how to get the most of what | |
| 15 | impress.js provides. | |
| 16 | ||
| 17 | And let me be your guide. | |
| 18 | ||
| 19 | Shall we begin? | |
| 20 | */ | |
| 21 | ||
| 22 | ||
| 23 | /* | |
| 24 | We start with a good ol' reset. | |
| 25 | That's the one by Eric Meyer http://meyerweb.com/eric/tools/css/reset/ | |
| 26 | ||
| 27 | You can probably argue if it is needed here, or not, but for sure it | |
| 28 | doesn't do any harm and gives us a fresh start. | |
| 29 | */ | |
| 30 | ||
| 31 | html, body, div, span, applet, object, iframe, | |
| 32 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
| 33 | a, abbr, acronym, address, big, cite, code, | |
| 34 | del, dfn, em, img, ins, kbd, q, s, samp, | |
| 35 | small, strike, strong, sub, sup, tt, var, | |
| 36 | b, u, i, center, | |
| 37 | dl, dt, dd, ol, ul, li, | |
| 38 | fieldset, form, label, legend, | |
| 39 | table, caption, tbody, tfoot, thead, tr, th, td, | |
| 40 | article, aside, canvas, details, embed, | |
| 41 | figure, figcaption, footer, header, hgroup, | |
| 42 | menu, nav, output, ruby, section, summary, | |
| 43 | time, mark, audio, video { | |
| 44 | margin: 0; | |
| 45 | padding: 0; | |
| 46 | border: 0; | |
| 47 | font-size: 100%; | |
| 48 | font: inherit; | |
| 49 | vertical-align: baseline; | |
| 50 | } | |
| 51 | ||
| 52 | /* HTML5 display-role reset for older browsers */ | |
| 53 | article, aside, details, figcaption, figure, | |
| 54 | footer, header, hgroup, menu, nav, section { | |
| 55 | display: block; | |
| 56 | } | |
| 57 | body { | |
| 58 | line-height: 1; | |
| 59 | } | |
| 60 | ol, ul { | |
| 61 | /* list-style: none; */ | |
| 62 | } | |
| 63 | li { | |
| 64 | padding-bottom:10px; | |
| 65 | } | |
| 66 | ||
| 67 | blockquote, q { | |
| 68 | quotes: none; | |
| 69 | } | |
| 70 | blockquote:before, blockquote:after, | |
| 71 | q:before, q:after { | |
| 72 | content: ''; | |
| 73 | content: none; | |
| 74 | } | |
| 75 | ||
| 76 | table { | |
| 77 | border-collapse: collapse; | |
| 78 | border-spacing: 0; | |
| 79 | } | |
| 80 | ||
| 81 | /* | |
| 82 | Now here is when interesting things start to appear. | |
| 83 | ||
| 84 | We set up <body> styles with default font and nice gradient in the background. | |
| 85 | And yes, there is a lot of repetition there because of -prefixes but we don't | |
| 86 | want to leave anybody behind. | |
| 87 | */ | |
| 88 | body { | |
| 89 | font-family: 'PT Sans', sans-serif; | |
| 90 | min-height: 740px; | |
| 91 | ||
| 92 | background: rgb(215, 215, 215); | |
| 93 | background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(190, 190, 190))); | |
| 94 | background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); | |
| 95 | background: -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); | |
| 96 | background: -ms-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); | |
| 97 | background: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); | |
| 98 | background: radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); | |
| 99 | } | |
| 100 | ||
| 101 | /* | |
| 102 | Now let's bring some text styles back ... | |
| 103 | */ | |
| 104 | b, strong { font-weight: bold } | |
| 105 | i, em { font-style: italic } | |
| 106 | ||
| 107 | /* | |
| 108 | ... and give links a nice look. | |
| 109 | */ | |
| 110 | a { | |
| 111 | color: inherit; | |
| 112 | text-decoration: none; | |
| 113 | padding: 0 0.1em; | |
| 114 | background: rgba(255,255,255,0.5); | |
| 115 | text-shadow: -1px -1px 2px rgba(100,100,100,0.9); | |
| 116 | border-radius: 0.2em; | |
| 117 | ||
| 118 | -webkit-transition: 0.5s; | |
| 119 | -moz-transition: 0.5s; | |
| 120 | -ms-transition: 0.5s; | |
| 121 | -o-transition: 0.5s; | |
| 122 | transition: 0.5s; | |
| 123 | } | |
| 124 | ||
| 125 | a:hover, | |
| 126 | a:focus { | |
| 127 | background: rgba(255,255,255,1); | |
| 128 | text-shadow: -1px -1px 2px rgba(100,100,100,0.5); | |
| 129 | } | |
| 130 | ||
| 131 | /* | |
| 132 | Because the main point behind the impress.js demo is to demo impress.js | |
| 133 | we display a fallback message for users with browsers that don't support | |
| 134 | all the features required by it. | |
| 135 | ||
| 136 | All of the content will be still fully accessible for them, but I want | |
| 137 | them to know that they are missing something - that's what the demo is | |
| 138 | about, isn't it? | |
| 139 | ||
| 140 | And then we hide the message, when support is detected in the browser. | |
| 141 | */ | |
| 142 | ||
| 143 | .fallback-message { | |
| 144 | font-family: sans-serif; | |
| 145 | line-height: 1.3; | |
| 146 | ||
| 147 | width: 780px; | |
| 148 | padding: 10px 10px 0; | |
| 149 | margin: 20px auto; | |
| 150 | ||
| 151 | border: 1px solid #E4C652; | |
| 152 | border-radius: 10px; | |
| 153 | background: #EEDC94; | |
| 154 | } | |
| 155 | ||
| 156 | .fallback-message p { | |
| 157 | margin-bottom: 10px; | |
| 158 | } | |
| 159 | ||
| 160 | .impress-supported .fallback-message { | |
| 161 | display: none; | |
| 162 | } | |
| 163 | ||
| 164 | /* | |
| 165 | Now let's style the presentation steps. | |
| 166 | ||
| 167 | We start with basics to make sure it displays correctly in everywhere ... | |
| 168 | */ | |
| 169 | ||
| 170 | .step { | |
| 171 | position: relative; | |
| 172 | width: 900px; | |
| 173 | padding: 40px; | |
| 174 | margin: 20px auto; | |
| 175 | ||
| 176 | -webkit-box-sizing: border-box; | |
| 177 | -moz-box-sizing: border-box; | |
| 178 | -ms-box-sizing: border-box; | |
| 179 | -o-box-sizing: border-box; | |
| 180 | box-sizing: border-box; | |
| 181 | ||
| 182 | font-family: 'PT Serif', georgia, serif; | |
| 183 | font-size: 48px; | |
| 184 | line-height: 1.5; | |
| 185 | } | |
| 186 | ||
| 187 | /* | |
| 188 | ... and we enhance the styles for impress.js. | |
| 189 | ||
| 190 | Basically we remove the margin and make inactive steps a little bit transparent. | |
| 191 | */ | |
| 192 | .impress-enabled .step { | |
| 193 | margin: 0; | |
| 194 | opacity: 0.3; | |
| 195 | ||
| 196 | -webkit-transition: opacity 1s; | |
| 197 | -moz-transition: opacity 1s; | |
| 198 | -ms-transition: opacity 1s; | |
| 199 | -o-transition: opacity 1s; | |
| 200 | transition: opacity 1s; | |
| 201 | } | |
| 202 | ||
| 203 | .impress-enabled .step.active { opacity: 1 } | |
| 204 | ||
| 205 | /* | |
| 206 | These 'slide' step styles were heavily inspired by HTML5 Slides: | |
| 207 | http://html5slides.googlecode.com/svn/trunk/styles.css | |
| 208 | ||
| 209 | ;) | |
| 210 | ||
| 211 | They cover everything what you see on first three steps of the demo. | |
| 212 | */ | |
| 213 | .slide { | |
| 214 | display: block; | |
| 215 | ||
| 216 | width: 900px; | |
| 217 | height: 700px; | |
| 218 | padding: 40px 60px; | |
| 219 | ||
| 220 | background-color: white; | |
| 221 | border: 1px solid rgba(0, 0, 0, .3); | |
| 222 | border-radius: 10px; | |
| 223 | box-shadow: 0 2px 6px rgba(0, 0, 0, .1); | |
| 224 | ||
| 225 | color: rgb(102, 102, 102); | |
| 226 | text-shadow: 0 2px 2px rgba(0, 0, 0, .1); | |
| 227 | ||
| 228 | font-family: 'Open Sans', Arial, sans-serif; | |
| 229 | font-size: 30px; | |
| 230 | line-height: 36px; | |
| 231 | letter-spacing: -1px; | |
| 232 | } | |
| 233 | ||
| 234 | .slide q { | |
| 235 | display: block; | |
| 236 | font-size: 50px; | |
| 237 | line-height: 72px; | |
| 238 | ||
| 239 | margin-top: 100px; | |
| 240 | } | |
| 241 | ||
| 242 | .slide q strong { | |
| 243 | white-space: nowrap; | |
| 244 | } | |
| 245 | ||
| 246 | /* | |
| 247 | And now we start to style each step separately. | |
| 248 | ||
| 249 | I agree that this may be not the most efficient, object-oriented and | |
| 250 | scalable way of styling, but most of steps have quite a custom look | |
| 251 | and typography tricks here and there, so they had to be styled separately. | |
| 252 | ||
| 253 | First is the title step with a big <h1> (no room for padding) and some | |
| 254 | 3D positioning along Z axis. | |
| 255 | */ | |
| 256 | ||
| 257 | #title { | |
| 258 | padding: 0; | |
| 259 | } | |
| 260 | ||
| 261 | #title .try { | |
| 262 | font-size: 58px; | |
| 263 | position: absolute; | |
| 264 | top: -2.5em; | |
| 265 | left: 1.5em; | |
| 266 | ||
| 267 | -webkit-transform: translateZ(20px); | |
| 268 | -moz-transform: translateZ(20px); | |
| 269 | -ms-transform: translateZ(20px); | |
| 270 | -o-transform: translateZ(20px); | |
| 271 | transform: translateZ(20px); | |
| 272 | } | |
| 273 | ||
| 274 | #title h1 { | |
| 275 | font-size: 120px; | |
| 276 | ||
| 277 | -webkit-transform: translateZ(50px); | |
| 278 | -moz-transform: translateZ(50px); | |
| 279 | -ms-transform: translateZ(50px); | |
| 280 | -o-transform: translateZ(50px); | |
| 281 | transform: translateZ(50px); | |
| 282 | } | |
| 283 | ||
| 284 | #naslovnica .footnote { | |
| 285 | padding-top:20px; | |
| 286 | text-align: right; | |
| 287 | font-size: 32px; | |
| 288 | } | |
| 289 | ||
| 290 | .center { | |
| 291 | text-align: center; | |
| 292 | } | |
| 293 | .vsebina { | |
| 294 | ||
| 295 | padding-left:100px; | |
| 296 | padding-right:100px; | |
| 297 | } | |
| 298 | ||
| 299 | .naslov { | |
| 300 | font-size: 65px; | |
| 301 | padding-bottom:50px; | |
| 302 | } | |
| 303 | .tiny { | |
| 304 | font-size: 25px; | |
| 305 | } | |
| 306 | .samo { | |
| 307 | width:300px; | |
| 308 | height:300px; | |
| 309 | position:relative; | |
| 310 | left:400px; | |
| 311 | top:-150px; | |
| 312 | margin-bottom:-100px; | |
| 313 | } | |
| 314 | /* | |
| 315 | Second step is nothing special, just a text with a link, so it doesn't need | |
| 316 | any special styling. | |
| 317 | ||
| 318 | Let's move to 'big thoughts' with centered text and custom font sizes. | |
| 319 | */ | |
| 320 | #big { | |
| 321 | width: 600px; | |
| 322 | text-align: center; | |
| 323 | font-size: 60px; | |
| 324 | line-height: 1; | |
| 325 | } | |
| 326 | ||
| 327 | #big strong, | |
| 328 | #big b { | |
| 329 | display: block; | |
| 330 | font-size: 250px; | |
| 331 | line-height: 250px; | |
| 332 | } | |
| 333 | ||
| 334 | #big .thoughts { | |
| 335 | font-size: 90px; | |
| 336 | line-height: 150px; | |
| 337 | } | |
| 338 | ||
| 339 | /* | |
| 340 | 'Tiny ideas' just need some tiny styling. | |
| 341 | */ | |
| 342 | #tiny { | |
| 343 | width: 500px; | |
| 344 | text-align: center; | |
| 345 | } | |
| 346 | ||
| 347 | /* | |
| 348 | This step has some animated text ... | |
| 349 | */ | |
| 350 | #ing { width: 500px } | |
| 351 | ||
| 352 | /* | |
| 353 | ... so we define display to `inline-block` to enable transforms and | |
| 354 | transition duration to 0.5s ... | |
| 355 | */ | |
| 356 | #ing b { | |
| 357 | display: inline-block; | |
| 358 | -webkit-transition: 0.5s; | |
| 359 | -moz-transition: 0.5s; | |
| 360 | -ms-transition: 0.5s; | |
| 361 | -o-transition: 0.5s; | |
| 362 | transition: 0.5s; | |
| 363 | } | |
| 364 | ||
| 365 | /* | |
| 366 | ... and we want 'positioning` word to move up a bit when the step gets | |
| 367 | `present` class ... | |
| 368 | */ | |
| 369 | #ing.present .positioning { | |
| 370 | -webkit-transform: translateY(-10px); | |
| 371 | -moz-transform: translateY(-10px); | |
| 372 | -ms-transform: translateY(-10px); | |
| 373 | -o-transform: translateY(-10px); | |
| 374 | transform: translateY(-10px); | |
| 375 | } | |
| 376 | ||
| 377 | /* | |
| 378 | ... 'rotating' to rotate a quarter of a second later ... | |
| 379 | */ | |
| 380 | #ing.present .rotating { | |
| 381 | -webkit-transform: rotate(-10deg); | |
| 382 | -moz-transform: rotate(-10deg); | |
| 383 | -ms-transform: rotate(-10deg); | |
| 384 | -o-transform: rotate(-10deg); | |
| 385 | transform: rotate(-10deg); | |
| 386 | ||
| 387 | -webkit-transition-delay: 0.25s; | |
| 388 | -moz-transition-delay: 0.25s; | |
| 389 | -ms-transition-delay: 0.25s; | |
| 390 | -o-transition-delay: 0.25s; | |
| 391 | transition-delay: 0.25s; | |
| 392 | } | |
| 393 | ||
| 394 | /* | |
| 395 | ... and 'scaling' to scale down after another quarter of a second. | |
| 396 | */ | |
| 397 | #ing.present .scaling { | |
| 398 | -webkit-transform: scale(0.7); | |
| 399 | -moz-transform: scale(0.7); | |
| 400 | -ms-transform: scale(0.7); | |
| 401 | -o-transform: scale(0.7); | |
| 402 | transform: scale(0.7); | |
| 403 | ||
| 404 | -webkit-transition-delay: 0.5s; | |
| 405 | -moz-transition-delay: 0.5s; | |
| 406 | -ms-transition-delay: 0.5s; | |
| 407 | -o-transition-delay: 0.5s; | |
| 408 | transition-delay: 0.5s; | |
| 409 | } | |
| 410 | ||
| 411 | /* | |
| 412 | The 'imagination' step is again some boring font-sizing. | |
| 413 | */ | |
| 414 | ||
| 415 | #imagination { | |
| 416 | width: 600px; | |
| 417 | } | |
| 418 | ||
| 419 | #imagination .imagination { | |
| 420 | font-size: 78px; | |
| 421 | } | |
| 422 | ||
| 423 | /* | |
| 424 | There is nothing really special about 'use the source, Luke' step, too, | |
| 425 | except maybe of the Yoda background. | |
| 426 | ||
| 427 | As you can see below I've 'hard-coded' it in data URL. | |
| 428 | That's not the best way to serve images, but because that's just this one | |
| 429 | I decided it will be OK to have it this way. | |
| 430 | ||
| 431 | Just make sure you don't blindly copy this approach. | |
| 432 | */ | |
| 433 | #source { | |
| 434 | width: 700px; | |
| 435 | padding-bottom: 300px; | |
| 436 | ||
| 437 | /* Yoda Icon :: Pixel Art from Star Wars http://www.pixeljoint.com/pixelart/1423.htm */ | |
| 438 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAEYCAMAAACwUBm+AAAAAXNSR0IArs4c6QAAAKtQTFRFsAAAvbWSLUUrLEQqY1s8UYJMqJ1vNTEgOiIdIzYhjIFVLhsXZ6lgSEIsP2U8JhcCVzMsSXZEgXdOO145XJdWOl03LzAYMk4vSXNExr+hwcuxRTs1Qmk+RW9Am49eFRANQz4pUoNMQWc+OSMDTz0wLBsCNVMxa2NBOyUDUoNNSnlEWo9VRGxAVzYFl6tXCggHbLNmMUIcHhwTXkk5f3VNRT8wUT8xAAAACQocRBWFFwAAAAF0Uk5TAEDm2GYAAAPCSURBVHja7d3JctNAFIZRMwRCCGEmzPM8z/D+T8bu/ptbXXJFdij5fMt2Wuo+2UgqxVmtttq5WVotLzBgwIABAwYMGDCn0qVqbo69psPqVpWx+1XG5iaavF8wYMCAAQMGDBgwi4DJ6Y6qkxB1HNlcN3a92gbR5P2CAQMGDBgwYMCAWSxMlrU+UY5yu2l9okfV4bAxUVbf7TJnAwMGDBgwYMCAAbMLMHeqbGR82Zy+VR1Ht81nVca6R+UdTLaU24Ruzd3qM/e4yjnAgAEDBgwYMGDA7AJMd1l/3NRdVGcj3eX/2WEhCmDGxnM7yqygu8XIPjJj8iN/MGDAgAEDBgwYMAuDGb8q0RGlLCHLv1t9qDKWn3vdNHVuEI6HPaxO9Jo3GDBgwIABAwYMmIXBdC9ShGgMk+XnkXUeuGcsP/e1+lhNnZsL/G5Vs3OAAQMGDBgwYMCAWSxMR3SzOmraG5atdy9wZKzb+vg16qyqe2FltbnAgAEDBgwYMGDALAxmTJSuN3WA76rnVca6GTnemGN1WoEBAwYMGDBgwIBZGMxUomy4+xO899V4LAg5Xnc2MGDAgAEDBgwYMGA218Wq+2K1LDqvY9xZu8zN8fICdM6btYABAwYMGDBgwIABMzfH0+pGU5afze2tXebmeAfVz+p8BQYMGDBgwIABAwbMPBzZ+oWmfJrln1273FhkbHzee9WWbw7AgAEDBgwYMGDALAKm43hcdctKgblcPamOhuXnXlY5Xs6bsW4FGyQCAwYMGDBgwIABswiYMceZKgvMo+h8mrHLTdn676rj+FEFoTtHd8MwOxEYMGDAgAEDBgyYRcBM5UhXqiymW3R3c9ARhWO/OmjqfjVZy+xEYMCAAQMGDBgwYBYG073OnCV0RFNhMhaOa9WfKmOB6XjHMN1tQmaAAQMGDBgwYMCA2VWY7vXjz1U4croAzgPztwIDBgwYMGDAgAEDZhswh035NBw59Dww3RgYMGDAgAEDBgwYMJuD6f4tXT7NUqfCdBvZLkxXdgQGDBgwYMCAAQNmt2DGj8WzwAfV/w7T/aq7mxwwYMCAAQMGDBgwuwqTOo7uTwTngflSzQ3TdaJvAwEDBgwYMGDAgAED5gSvgbyo5oHZ4Pc+gwEDBgwYMGDAgAEzhOm+5G0qTGaAAQMGDBgwYMCAAXNaMOcnls3tNwWm+zRzp54NDBgwYMCAAQMGDJh5YNL36k1TLuGvVq+qnKMbS5n7tulT9asCAwYMGDBgwIABA2ZumKuztLnjgQEDBgwYMGDAgNl5mH/4/ltKA6vBNAAAAABJRU5ErkJggg==); | |
| 439 | background-position: bottom right; | |
| 440 | background-repeat: no-repeat; | |
| 441 | } | |
| 442 | ||
| 443 | #source q { | |
| 444 | font-size: 60px; | |
| 445 | } | |
| 446 | ||
| 447 | /* | |
| 448 | And the "it's in 3D" step again brings some 3D typography - just for fun. | |
| 449 | ||
| 450 | Because we want to position <span> elements in 3D we set transform-style to | |
| 451 | `preserve-3d` on the paragraph. | |
| 452 | It is not needed by webkit browsers, but it is in Firefox. It's hard to say | |
| 453 | which behaviour is correct as 3D transforms spec is not very clear about it. | |
| 454 | */ | |
| 455 | #its-in-3d p { | |
| 456 | -webkit-transform-style: preserve-3d; | |
| 457 | -moz-transform-style: preserve-3d; /* Y U need this Firefox?! */ | |
| 458 | -ms-transform-style: preserve-3d; | |
| 459 | -o-transform-style: preserve-3d; | |
| 460 | transform-style: preserve-3d; | |
| 461 | } | |
| 462 | ||
| 463 | /* | |
| 464 | Below we position each word separately along Z axis and we want it to transition | |
| 465 | to default position in 0.5s when the step gets `present` class. | |
| 466 | ||
| 467 | Quite a simple idea, but lot's of styles and prefixes. | |
| 468 | */ | |
| 469 | #its-in-3d span, | |
| 470 | #its-in-3d b { | |
| 471 | display: inline-block; | |
| 472 | -webkit-transform: translateZ(40px); | |
| 473 | -moz-transform: translateZ(40px); | |
| 474 | -ms-transform: translateZ(40px); | |
| 475 | -o-transform: translateZ(40px); | |
| 476 | transform: translateZ(40px); | |
| 477 | ||
| 478 | -webkit-transition: 0.5s; | |
| 479 | -moz-transition: 0.5s; | |
| 480 | -ms-transition: 0.5s; | |
| 481 | -o-transition: 0.5s; | |
| 482 | transition: 0.5s; | |
| 483 | } | |
| 484 | ||
| 485 | #its-in-3d .have { | |
| 486 | -webkit-transform: translateZ(-40px); | |
| 487 | -moz-transform: translateZ(-40px); | |
| 488 | -ms-transform: translateZ(-40px); | |
| 489 | -o-transform: translateZ(-40px); | |
| 490 | transform: translateZ(-40px); | |
| 491 | } | |
| 492 | ||
| 493 | #its-in-3d .you { | |
| 494 | -webkit-transform: translateZ(20px); | |
| 495 | -moz-transform: translateZ(20px); | |
| 496 | -ms-transform: translateZ(20px); | |
| 497 | -o-transform: translateZ(20px); | |
| 498 | transform: translateZ(20px); | |
| 499 | } | |
| 500 | ||
| 501 | #its-in-3d .noticed { | |
| 502 | -webkit-transform: translateZ(-40px); | |
| 503 | -moz-transform: translateZ(-40px); | |
| 504 | -ms-transform: translateZ(-40px); | |
| 505 | -o-transform: translateZ(-40px); | |
| 506 | transform: translateZ(-40px); | |
| 507 | } | |
| 508 | ||
| 509 | #its-in-3d .its { | |
| 510 | -webkit-transform: translateZ(60px); | |
| 511 | -moz-transform: translateZ(60px); | |
| 512 | -ms-transform: translateZ(60px); | |
| 513 | -o-transform: translateZ(60px); | |
| 514 | transform: translateZ(60px); | |
| 515 | } | |
| 516 | ||
| 517 | #its-in-3d .in { | |
| 518 | -webkit-transform: translateZ(-10px); | |
| 519 | -moz-transform: translateZ(-10px); | |
| 520 | -ms-transform: translateZ(-10px); | |
| 521 | -o-transform: translateZ(-10px); | |
| 522 | transform: translateZ(-10px); | |
| 523 | } | |
| 524 | ||
| 525 | #its-in-3d .footnote { | |
| 526 | font-size: 32px; | |
| 527 | ||
| 528 | -webkit-transform: translateZ(-10px); | |
| 529 | -moz-transform: translateZ(-10px); | |
| 530 | -ms-transform: translateZ(-10px); | |
| 531 | -o-transform: translateZ(-10px); | |
| 532 | transform: translateZ(-10px); | |
| 533 | } | |
| 534 | ||
| 535 | #its-in-3d.present span, | |
| 536 | #its-in-3d.present b { | |
| 537 | -webkit-transform: translateZ(0px); | |
| 538 | -moz-transform: translateZ(0px); | |
| 539 | -ms-transform: translateZ(0px); | |
| 540 | -o-transform: translateZ(0px); | |
| 541 | transform: translateZ(0px); | |
| 542 | } | |
| 543 | ||
| 544 | /* | |
| 545 | The last step is an overview. | |
| 546 | There is no content in it, so we make sure it's not visible because we want | |
| 547 | to be able to click on other steps. | |
| 548 | ||
| 549 | */ | |
| 550 | #overview { display: none } | |
| 551 | ||
| 552 | /* | |
| 553 | We also make other steps visible and give them a pointer cursor using the | |
| 554 | `impress-on-` class. | |
| 555 | */ | |
| 556 | .impress-on-overview .step { | |
| 557 | opacity: 1; | |
| 558 | cursor: pointer; | |
| 559 | } | |
| 560 | ||
| 561 | /* | |
| 562 | This version of impress.js supports plugins, and in particular, a UI toolbar | |
| 563 | plugin that allows easy navigation between steps and autoplay. | |
| 564 | */ | |
| 565 | .impress-enabled div#impress-toolbar { | |
| 566 | position: fixed; | |
| 567 | right: 1px; | |
| 568 | bottom: 1px; | |
| 569 | opacity: 0.6; | |
| 570 | } | |
| 571 | .impress-enabled div#impress-toolbar > span { | |
| 572 | margin-right: 10px; | |
| 573 | } | |
| 574 | ||
| 575 | /* | |
| 576 | With help from the mouse-timeout plugin, we can hide the toolbar and | |
| 577 | have it show only when you move/click/touch the mouse. | |
| 578 | */ | |
| 579 | body.impress-mouse-timeout div#impress-toolbar { | |
| 580 | display: none; | |
| 581 | } | |
| 582 | ||
| 583 | /* | |
| 584 | In fact, we can hide the mouse cursor itself too, when mouse isn't used. | |
| 585 | */ | |
| 586 | body.impress-mouse-timeout { | |
| 587 | cursor: none; | |
| 588 | } | |
| 589 | ||
| 590 | ||
| 591 | /* | |
| 592 | Now, when we have all the steps styled let's give users a hint how to navigate | |
| 593 | around the presentation. | |
| 594 | ||
| 595 | The best way to do this would be to use JavaScript, show a delayed hint for a | |
| 596 | first time users, then hide it and store a status in cookie or localStorage... | |
| 597 | ||
| 598 | But I wanted to have some CSS fun and avoid additional scripting... | |
| 599 | ||
| 600 | Let me explain it first, so maybe the transition magic will be more readable | |
| 601 | when you read the code. | |
| 602 | ||
| 603 | First of all I wanted the hint to appear only when user is idle for a while. | |
| 604 | You can't detect the 'idle' state in CSS, but I delayed a appearing of the | |
| 605 | hint by 5s using transition-delay. | |
| 606 | ||
| 607 | You also can't detect in CSS if the user is a first-time visitor, so I had to | |
| 608 | make an assumption that I'll only show the hint on the first step. And when | |
| 609 | the step is changed hide the hint, because I can assume that user already | |
| 610 | knows how to navigate. | |
| 611 | ||
| 612 | To summarize it - hint is shown when the user is on the first step for longer | |
| 613 | than 5 seconds. | |
| 614 | ||
| 615 | The other problem I had was caused by the fact that I wanted the hint to fade | |
| 616 | in and out. It can be easily achieved by transitioning the opacity property. | |
| 617 | But that also meant that the hint was always on the screen, even if totally | |
| 618 | transparent. It covered part of the screen and you couldn't correctly clicked | |
| 619 | through it. | |
| 620 | Unfortunately you cannot transition between display `block` and `none` in pure | |
| 621 | CSS, so I needed a way to not only fade out the hint but also move it out of | |
| 622 | the screen. | |
| 623 | ||
| 624 | I solved this problem by positioning the hint below the bottom of the screen | |
| 625 | with CSS transform and moving it up to show it. But I also didn't want this move | |
| 626 | to be visible. I wanted the hint only to fade in and out visually, so I delayed | |
| 627 | the fade in transition, so it starts when the hint is already in its correct | |
| 628 | position on the screen. | |
| 629 | ||
| 630 | I know, it sounds complicated ... maybe it would be easier with the code? | |
| 631 | */ | |
| 632 | ||
| 633 | .hint { | |
| 634 | /* | |
| 635 | We hide the hint until presentation is started and from browsers not supporting | |
| 636 | impress.js, as they will have a linear scrollable view ... | |
| 637 | */ | |
| 638 | display: none; | |
| 639 | ||
| 640 | /* | |
| 641 | ... and give it some fixed position and nice styles. | |
| 642 | */ | |
| 643 | position: fixed; | |
| 644 | left: 0; | |
| 645 | right: 0; | |
| 646 | bottom: 200px; | |
| 647 | ||
| 648 | background: rgba(0,0,0,0.5); | |
| 649 | color: #EEE; | |
| 650 | text-align: center; | |
| 651 | ||
| 652 | font-size: 50px; | |
| 653 | padding: 20px; | |
| 654 | ||
| 655 | z-index: 100; | |
| 656 | ||
| 657 | /* | |
| 658 | By default we don't want the hint to be visible, so we make it transparent ... | |
| 659 | */ | |
| 660 | opacity: 0; | |
| 661 | ||
| 662 | /* | |
| 663 | ... and position it below the bottom of the screen (relative to it's fixed position) | |
| 664 | */ | |
| 665 | -webkit-transform: translateY(400px); | |
| 666 | -moz-transform: translateY(400px); | |
| 667 | -ms-transform: translateY(400px); | |
| 668 | -o-transform: translateY(400px); | |
| 669 | transform: translateY(400px); | |
| 670 | ||
| 671 | /* | |
| 672 | Now let's imagine that the hint is visible and we want to fade it out and move out | |
| 673 | of the screen. | |
| 674 | ||
| 675 | So we define the transition on the opacity property with 1s duration and another | |
| 676 | transition on transform property delayed by 1s so it will happen after the fade out | |
| 677 | on opacity finished. | |
| 678 | ||
| 679 | This way user will not see the hint moving down. | |
| 680 | */ | |
| 681 | -webkit-transition: opacity 1s, -webkit-transform 0.5s 1s; | |
| 682 | -moz-transition: opacity 1s, -moz-transform 0.5s 1s; | |
| 683 | -ms-transition: opacity 1s, -ms-transform 0.5s 1s; | |
| 684 | -o-transition: opacity 1s, -o-transform 0.5s 1s; | |
| 685 | transition: opacity 1s, transform 0.5s 1s; | |
| 686 | } | |
| 687 | ||
| 688 | /* | |
| 689 | Now we 'enable' the hint when presentation is initialized ... | |
| 690 | */ | |
| 691 | .impress-enabled .hint { display: block } | |
| 692 | ||
| 693 | /* | |
| 694 | ... and we will show it when the first step (with id 'bored') is active. | |
| 695 | */ | |
| 696 | .impress-on-bored .hint { | |
| 697 | /* | |
| 698 | We remove the transparency and position the hint in its default fixed | |
| 699 | position. | |
| 700 | */ | |
| 701 | opacity: 1; | |
| 702 | ||
| 703 | -webkit-transform: translateY(0px); | |
| 704 | -moz-transform: translateY(0px); | |
| 705 | -ms-transform: translateY(0px); | |
| 706 | -o-transform: translateY(0px); | |
| 707 | transform: translateY(0px); | |
| 708 | ||
| 709 | /* | |
| 710 | Now for fade in transition we have the oposite situation from the one | |
| 711 | above. | |
| 712 | ||
| 713 | First after 4.5s delay we animate the transform property to move the hint | |
| 714 | into its correct position and after that we fade it in with opacity | |
| 715 | transition. | |
| 716 | */ | |
| 717 | -webkit-transition: opacity 1s 5s, -webkit-transform 0.5s 4.5s; | |
| 718 | -moz-transition: opacity 1s 5s, -moz-transform 0.5s 4.5s; | |
| 719 | -ms-transition: opacity 1s 5s, -ms-transform 0.5s 4.5s; | |
| 720 | -o-transition: opacity 1s 5s, -o-transform 0.5s 4.5s; | |
| 721 | transition: opacity 1s 5s, transform 0.5s 4.5s; | |
| 722 | } | |
| 723 | ||
| 724 | /* | |
| 725 | And as the last thing there is a workaround for quite strange bug. | |
| 726 | It happens a lot in Chrome. I don't remember if I've seen it in Firefox. | |
| 727 | ||
| 728 | Sometimes the element positioned in 3D (especially when it's moved back | |
| 729 | along Z axis) is not clickable, because it falls 'behind' the <body> | |
| 730 | element. | |
| 731 | ||
| 732 | To prevent this, I decided to make <body> non clickable by setting | |
| 733 | pointer-events property to `none` value. | |
| 734 | Value if this property is inherited, so to make everything else clickable | |
| 735 | I bring it back on the #impress element. | |
| 736 | ||
| 737 | If you want to know more about `pointer-events` here are some docs: | |
| 738 | https://developer.mozilla.org/en/CSS/pointer-events | |
| 739 | ||
| 740 | There is one very important thing to notice about this workaround - it makes | |
| 741 | everything 'unclickable' except what's in #impress element. | |
| 742 | ||
| 743 | So use it wisely ... or don't use at all. | |
| 744 | */ | |
| 745 | .impress-enabled { pointer-events: none } | |
| 746 | .impress-enabled #impress { pointer-events: auto } | |
| 747 | .impress-enabled #impress-toolbar { pointer-events: auto } | |
| 748 | .impress-enabled #impress-console-button { pointer-events: auto } | |
| 749 | /* | |
| 750 | There is one funny thing I just realized. | |
| 751 | ||
| 752 | Thanks to this workaround above everything except #impress element is invisible | |
| 753 | for click events. That means that the hint element is also not clickable. | |
| 754 | So basically all of this transforms and delayed transitions trickery was probably | |
| 755 | not needed at all... | |
| 756 | ||
| 757 | But it was fun to learn about it, wasn't it? | |
| 758 | */ | |
| 759 | ||
| 760 | /* | |
| 761 | That's all I have for you in this file. | |
| 762 | Thanks for reading. I hope you enjoyed it at least as much as I enjoyed writing it | |
| 763 | for you. | |
| 764 | */ | |
