Lines Matching +full:u +full:- +full:magic
36 b, u, i, center, selector
47 font-size: 100%;
49 vertical-align: baseline;
52 /* HTML5 display-role reset for older browsers */
58 line-height: 1;
61 list-style: none;
73 border-collapse: collapse;
74 border-spacing: 0;
81 And yes, there is a lot of repetition there because of -prefixes but we don't
85 font-family: 'PT Sans', sans-serif;
86 min-height: 740px;
89 …background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(19…
90 background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
91 background: -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
92 background: -ms-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
93 background: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
94 background: radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
100 b, strong { font-weight: bold }
101 i, em { font-style: italic }
108 text-decoration: none;
111 text-shadow: -1px -1px 2px rgba(100,100,100,0.9);
112 border-radius: 0.2em;
114 -webkit-transition: 0.5s;
115 -moz-transition: 0.5s;
116 -ms-transition: 0.5s;
117 -o-transition: 0.5s;
124 text-shadow: -1px -1px 2px rgba(100,100,100,0.5);
133 them to know that they are missing something - that's what the demo is
139 .fallback-message {
140 font-family: sans-serif;
141 line-height: 1.3;
148 border-radius: 10px;
152 .fallback-message p {
153 margin-bottom: 10px;
156 .impress-supported .fallback-message {
172 -webkit-box-sizing: border-box;
173 -moz-box-sizing: border-box;
174 -ms-box-sizing: border-box;
175 -o-box-sizing: border-box;
176 box-sizing: border-box;
178 font-family: 'PT Serif', georgia, serif;
179 font-size: 48px;
180 line-height: 1.5;
188 .impress-enabled .step {
192 -webkit-transition: opacity 1s;
193 -moz-transition: opacity 1s;
194 -ms-transition: opacity 1s;
195 -o-transition: opacity 1s;
199 .impress-enabled .step.active { opacity: 1 }
216 background-color: white;
218 border-radius: 10px;
219 box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
222 text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
224 font-family: 'Open Sans', Arial, sans-serif;
225 font-size: 30px;
226 line-height: 36px;
227 letter-spacing: -1px;
232 font-size: 50px;
233 line-height: 72px;
235 margin-top: 100px;
239 white-space: nowrap;
245 I agree that this may be not the most efficient, object-oriented and
258 font-size: 64px;
260 top: -0.5em;
263 -webkit-transform: translateZ(20px);
264 -moz-transform: translateZ(20px);
265 -ms-transform: translateZ(20px);
266 -o-transform: translateZ(20px);
271 font-size: 190px;
273 -webkit-transform: translateZ(50px);
274 -moz-transform: translateZ(50px);
275 -ms-transform: translateZ(50px);
276 -o-transform: translateZ(50px);
281 font-size: 32px;
292 text-align: center;
293 font-size: 60px;
294 line-height: 1;
299 font-size: 250px;
300 line-height: 250px;
304 font-size: 90px;
305 line-height: 150px;
313 text-align: center;
322 ... so we define display to `inline-block` to enable transforms and
326 display: inline-block;
327 -webkit-transition: 0.5s;
328 -moz-transition: 0.5s;
329 -ms-transition: 0.5s;
330 -o-transition: 0.5s;
339 -webkit-transform: translateY(-10px);
340 -moz-transform: translateY(-10px);
341 -ms-transform: translateY(-10px);
342 -o-transform: translateY(-10px);
343 transform: translateY(-10px);
350 -webkit-transform: rotate(-10deg);
351 -moz-transform: rotate(-10deg);
352 -ms-transform: rotate(-10deg);
353 -o-transform: rotate(-10deg);
354 transform: rotate(-10deg);
356 -webkit-transition-delay: 0.25s;
357 -moz-transition-delay: 0.25s;
358 -ms-transition-delay: 0.25s;
359 -o-transition-delay: 0.25s;
360 transition-delay: 0.25s;
367 -webkit-transform: scale(0.7);
368 -moz-transform: scale(0.7);
369 -ms-transform: scale(0.7);
370 -o-transform: scale(0.7);
373 -webkit-transition-delay: 0.5s;
374 -moz-transition-delay: 0.5s;
375 -ms-transition-delay: 0.5s;
376 -o-transition-delay: 0.5s;
377 transition-delay: 0.5s;
381 The 'imagination' step is again some boring font-sizing.
389 font-size: 78px;
396 As you can see below I've 'hard-coded' it in data URL.
404 padding-bottom: 300px;
407 …background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAEYCAMAAACwUBm+AAAAAXNSR0…
408 background-position: bottom right;
409 background-repeat: no-repeat;
413 font-size: 60px;
417 And the "it's in 3D" step again brings some 3D typography - just for fun.
419 Because we want to position <span> elements in 3D we set transform-style to
420 `preserve-3d` on the paragraph.
424 #its-in-3d p {
425 -webkit-transform-style: preserve-3d;
426 -moz-transform-style: preserve-3d; /* Y U need this Firefox?! */
427 -ms-transform-style: preserve-3d;
428 -o-transform-style: preserve-3d;
429 transform-style: preserve-3d;
438 #its-in-3d span,
439 #its-in-3d b {
440 display: inline-block;
441 -webkit-transform: translateZ(40px);
442 -moz-transform: translateZ(40px);
443 -ms-transform: translateZ(40px);
444 -o-transform: translateZ(40px);
447 -webkit-transition: 0.5s;
448 -moz-transition: 0.5s;
449 -ms-transition: 0.5s;
450 -o-transition: 0.5s;
454 #its-in-3d .have {
455 -webkit-transform: translateZ(-40px);
456 -moz-transform: translateZ(-40px);
457 -ms-transform: translateZ(-40px);
458 -o-transform: translateZ(-40px);
459 transform: translateZ(-40px);
462 #its-in-3d .you {
463 -webkit-transform: translateZ(20px);
464 -moz-transform: translateZ(20px);
465 -ms-transform: translateZ(20px);
466 -o-transform: translateZ(20px);
470 #its-in-3d .noticed {
471 -webkit-transform: translateZ(-40px);
472 -moz-transform: translateZ(-40px);
473 -ms-transform: translateZ(-40px);
474 -o-transform: translateZ(-40px);
475 transform: translateZ(-40px);
478 #its-in-3d .its {
479 -webkit-transform: translateZ(60px);
480 -moz-transform: translateZ(60px);
481 -ms-transform: translateZ(60px);
482 -o-transform: translateZ(60px);
486 #its-in-3d .in {
487 -webkit-transform: translateZ(-10px);
488 -moz-transform: translateZ(-10px);
489 -ms-transform: translateZ(-10px);
490 -o-transform: translateZ(-10px);
491 transform: translateZ(-10px);
494 #its-in-3d .footnote {
495 font-size: 32px;
497 -webkit-transform: translateZ(-10px);
498 -moz-transform: translateZ(-10px);
499 -ms-transform: translateZ(-10px);
500 -o-transform: translateZ(-10px);
501 transform: translateZ(-10px);
504 #its-in-3d.present span,
505 #its-in-3d.present b {
506 -webkit-transform: translateZ(0px);
507 -moz-transform: translateZ(0px);
508 -ms-transform: translateZ(0px);
509 -o-transform: translateZ(0px);
523 `impress-on-` class.
525 .impress-on-overview .step {
540 Let me explain it first, so maybe the transition magic will be more readable
545 hint by 5s using transition-delay.
547 You also can't detect in CSS if the user is a first-time visitor, so I had to
552 To summarize it - hint is shown when the user is on the first step for longer
590 text-align: center;
592 font-size: 50px;
595 z-index: 100;
605 -webkit-transform: translateY(400px);
606 -moz-transform: translateY(400px);
607 -ms-transform: translateY(400px);
608 -o-transform: translateY(400px);
621 -webkit-transition: opacity 1s, -webkit-transform 0.5s 1s;
622 -moz-transition: opacity 1s, -moz-transform 0.5s 1s;
623 -ms-transition: opacity 1s, -ms-transform 0.5s 1s;
624 -o-transition: opacity 1s, -o-transform 0.5s 1s;
631 .impress-enabled .hint { display: block }
636 .impress-on-bored .hint {
643 -webkit-transform: translateY(0px);
644 -moz-transform: translateY(0px);
645 -ms-transform: translateY(0px);
646 -o-transform: translateY(0px);
657 -webkit-transition: opacity 1s 5s, -webkit-transform 0.5s 4.5s;
658 -moz-transition: opacity 1s 5s, -moz-transform 0.5s 4.5s;
659 -ms-transition: opacity 1s 5s, -ms-transform 0.5s 4.5s;
660 -o-transition: opacity 1s 5s, -o-transform 0.5s 4.5s;
673 pointer-events property to `none` value.
677 If you want to know more about `pointer-events` here are some docs:
678 https://developer.mozilla.org/en/CSS/pointer-events
680 There is one very important thing to notice about this workaround - it makes
685 .impress-enabled { pointer-events: none }
686 .impress-enabled #impress { pointer-events: auto }