Skip to content

Commit 2ba70e7

Browse files
nathosnathos
committed
added 'flippy' demo page.
1 parent 75f4d80 commit 2ba70e7

File tree

3 files changed

+237
-9
lines changed

3 files changed

+237
-9
lines changed

‎flippy/index.html

+109
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<!DOCTYPE html>
2+
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
3+
<!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]-->
4+
<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
5+
<!--[if (gte IE 9)|!(IE)]!-->
6+
<html class='no-js' lang='en'>
7+
<!--<![endif]-->
8+
<head>
9+
<meta charset='utf-8'>
10+
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
11+
<title>Compass flippy</title>
12+
<meta content='' name='description'>
13+
<meta content='' name='author'>
14+
<!-- %meta{:name =>"viewport", :content => "width=device-width, initial-scale=1.0"} -->
15+
<link href='/favicon.ico' rel='shortcut icon'>
16+
<link href='/apple-touch-icon.png' rel='apple-touch-icon'>
17+
<link href='/stylesheets/style.css?v=1' rel='stylesheet'>
18+
<script src='/javascripts/libs/modernizr-1.7.min.js'></script>
19+
</head>
20+
<body>
21+
<div id='container'>
22+
<header></header>
23+
<div id='main-content' role='main'>
24+
<section>
25+
<h1>Here's flippy in action:</h1>
26+
<ul id='flippy'>
27+
<p class='instructions'>
28+
Hover over a card to flip
29+
</p>
30+
<li>
31+
<div class='front'>
32+
<p id='twitter'>
33+
Twitter
34+
</p>
35+
</div>
36+
<div class='back'>
37+
<p>Follow me <a href="http://twitter.com/nathos">@nathos</a></p>
38+
</div>
39+
</li>
40+
<li>
41+
<div class='front'>
42+
<p id='facebook'>
43+
Facebook
44+
</p>
45+
</div>
46+
<div class='back'>
47+
<p>Sorry, I don't use Facebook anymore!</p>
48+
</div>
49+
</li>
50+
<li>
51+
<div class='front'>
52+
<p id='forrst'>
53+
Forrst
54+
</p>
55+
</div>
56+
<div class='back'>
57+
<p>My <a href="http://forrst.com/people/nathos">Forrst profile</a></p>
58+
</div>
59+
</li>
60+
<li>
61+
<div class='front'>
62+
<p id='rss'>
63+
RSS
64+
</p>
65+
</div>
66+
<div class='back'>
67+
<p>No feeds yet!</p>
68+
</div>
69+
</li>
70+
</ul>
71+
</section>
72+
<section>
73+
<h1>How does it work?</h1>
74+
<p>Flippy uses CSS3 <a href="http://www.w3.org/TR/css3-3d-transforms/">3D transforms</a> & <a href="http://www.w3.org/TR/css3-transitions/">transitions</a>, all made manageable with <a href="http://compass-style.org/">Compass</a>.</p>
75+
<p>It falls back to an <a href="http://www.w3schools.com/css3/css3_pr_opacity.asp">opacity</a> fade & CSS <a href="http://www.w3schools.com/css/pr_class_visibility.asp">visibility</a> in unsupported browsers using <a href="http://www.modernizr.com/">Modernizr</a>.</p>
76+
<p>Flippy is inspired by the "shout-outs" animation at <a href="http://css-tricks.com/">CSS Tricks</a>.</p>
77+
</section>
78+
<section>
79+
<h1>Get the source code for this mixin <a href="https://gist.github.com/1040869">here</a>.</h1>
80+
</section>
81+
</div>
82+
<footer></footer>
83+
</div>
84+
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js'></script>
85+
<script>
86+
//<![CDATA[
87+
window.jQuery || document.write("<script src='javascripts/libs/jquery-1.5.1.min.js'>\x3C/script>")
88+
//]]>
89+
</script>
90+
<!-- %script{:src => "/javascripts/plugins.js"} -->
91+
<!-- %script{:src => "/javascripts/script.js"} -->
92+
<!--[if lt IE 7 ]>
93+
<script src='/javascripts/libs/dd_belatedpng.js'></script>
94+
<script>
95+
//<![CDATA[
96+
DD_belatedPNG.fix("img, .png_bg"); // Fix any <img> or .png_bg bg-images. Also, please read goo.gl/mZiyb
97+
//]]>
98+
</script>
99+
<![endif]-->
100+
<script>
101+
//<![CDATA[
102+
var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"]];
103+
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
104+
g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
105+
s.parentNode.insertBefore(g,s)}(document,"script"));
106+
//]]>
107+
</script>
108+
</body>
109+
</html>

‎index.html

+4-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,10 @@
2424
<h1>What's here?</h1>
2525
<ul id='whatshere'>
2626
<li>
27-
<a href='/fancy-hovers/'>Fancy Hovers demo</a>
27+
<a href='/fancy-hovers/'>Compass fancy-hover mixin</a>
28+
</li>
29+
<li>
30+
<a href='/flippy/'>Compass flippy mixin</a>
2831
</li>
2932
</ul>
3033
</div>

‎stylesheets/style.css

+124-8
Original file line numberDiff line numberDiff line change
@@ -255,9 +255,10 @@ h1 {
255255
margin-left: 0px; }
256256
/* line 41, ../../views/stylesheets/style.css.sass */
257257
#whatshere li {
258-
font-size: 18px; }
258+
font-size: 18px;
259+
margin-bottom: 0.3em; }
259260

260-
/* line 44, ../../views/stylesheets/style.css.sass */
261+
/* line 45, ../../views/stylesheets/style.css.sass */
261262
#hovers {
262263
margin: 0;
263264
padding: 0;
@@ -274,10 +275,10 @@ h1 {
274275
white-space: nowrap;
275276
display: inline;
276277
float: left; }
277-
/* line 48, ../../views/stylesheets/style.css.sass */
278+
/* line 49, ../../views/stylesheets/style.css.sass */
278279
#hovers li {
279280
margin: 0 8px; }
280-
/* line 50, ../../views/stylesheets/style.css.sass */
281+
/* line 51, ../../views/stylesheets/style.css.sass */
281282
#hovers #twitter {
282283
text-indent: -119988px;
283284
overflow: hidden;
@@ -318,7 +319,7 @@ h1 {
318319
/* line 25, ../../views/stylesheets/_mixins.sass */
319320
.no-opacity #hovers #twitter:hover span {
320321
visibility: visible; }
321-
/* line 52, ../../views/stylesheets/style.css.sass */
322+
/* line 53, ../../views/stylesheets/style.css.sass */
322323
#hovers #facebook {
323324
text-indent: -119988px;
324325
overflow: hidden;
@@ -359,7 +360,7 @@ h1 {
359360
/* line 25, ../../views/stylesheets/_mixins.sass */
360361
.no-opacity #hovers #facebook:hover span {
361362
visibility: visible; }
362-
/* line 54, ../../views/stylesheets/style.css.sass */
363+
/* line 55, ../../views/stylesheets/style.css.sass */
363364
#hovers #forrst {
364365
text-indent: -119988px;
365366
overflow: hidden;
@@ -400,7 +401,7 @@ h1 {
400401
/* line 25, ../../views/stylesheets/_mixins.sass */
401402
.no-opacity #hovers #forrst:hover span {
402403
visibility: visible; }
403-
/* line 56, ../../views/stylesheets/style.css.sass */
404+
/* line 57, ../../views/stylesheets/style.css.sass */
404405
#hovers #rss {
405406
text-indent: -119988px;
406407
overflow: hidden;
@@ -442,10 +443,125 @@ h1 {
442443
.no-opacity #hovers #rss:hover span {
443444
visibility: visible; }
444445

445-
/* line 59, ../../views/stylesheets/style.css.sass */
446+
/* line 60, ../../views/stylesheets/style.css.sass */
446447
#sprite {
447448
margin-bottom: 15px; }
448449

450+
/* line 66, ../../views/stylesheets/style.css.sass */
451+
#flippy {
452+
list-style: none;
453+
*zoom: 1;
454+
background-color: #555555;
455+
width: 348px;
456+
margin: 0 auto 35px;
457+
padding: 50px 50px 36px;
458+
position: relative; }
459+
/* line 11, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.2/frameworks/compass/stylesheets/compass/typography/lists/_bullets.scss */
460+
#flippy li {
461+
list-style-image: none;
462+
list-style-type: none;
463+
margin-left: 0px; }
464+
/* line 22, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
465+
#flippy:after {
466+
content: "\0020";
467+
display: block;
468+
height: 0;
469+
clear: both;
470+
overflow: hidden;
471+
visibility: hidden; }
472+
/* line 74, ../../views/stylesheets/style.css.sass */
473+
#flippy .instructions {
474+
position: absolute;
475+
bottom: 16px;
476+
left: 0;
477+
text-align: center;
478+
width: 100%;
479+
text-transform: uppercase;
480+
color: #999999;
481+
text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; }
482+
/* line 83, ../../views/stylesheets/style.css.sass */
483+
#flippy li {
484+
float: left;
485+
width: 160px;
486+
height: 80px;
487+
margin: 0 7px 14px 7px;
488+
position: relative;
489+
-webkit-perspective: 500;
490+
perspective: 500; }
491+
/* line 31, ../../views/stylesheets/_mixins.sass */
492+
#flippy li .front, #flippy li .back {
493+
background-color: white;
494+
-moz-transition-property: all;
495+
-webkit-transition-property: all;
496+
-o-transition-property: all;
497+
transition-property: all;
498+
-moz-transition-duration: 0.5s;
499+
-webkit-transition-duration: 0.5s;
500+
-o-transition-duration: 0.5s;
501+
transition-duration: 0.5s;
502+
-moz-transition-timing-function: ease-in-out;
503+
-webkit-transition-timing-function: ease-in-out;
504+
-o-transition-timing-function: ease-in-out;
505+
transition-timing-function: ease-in-out;
506+
-webkit-backface-visibility: hidden;
507+
backface-visibility: hidden;
508+
-webkit-transform-style: preserve-3d;
509+
transform-style: preserve-3d;
510+
height: 100%;
511+
width: 100%;
512+
position: absolute;
513+
top: 0;
514+
left: 0; }
515+
/* line 42, ../../views/stylesheets/_mixins.sass */
516+
.no-csstransforms3d #flippy li .front {
517+
opacity: 1; }
518+
/* line 44, ../../views/stylesheets/_mixins.sass */
519+
#flippy li .back {
520+
-webkit-transform: rotateY(180deg);
521+
transform: rotateY(180deg); }
522+
/* line 46, ../../views/stylesheets/_mixins.sass */
523+
.no-csstransforms3d #flippy li .back {
524+
visibility: hidden;
525+
opacity: 0; }
526+
/* line 50, ../../views/stylesheets/_mixins.sass */
527+
#flippy li:hover .front {
528+
-webkit-transform: rotateY(180deg);
529+
transform: rotateY(180deg); }
530+
/* line 52, ../../views/stylesheets/_mixins.sass */
531+
.no-csstransforms3d #flippy li:hover .front {
532+
visibility: hidden; }
533+
/* line 54, ../../views/stylesheets/_mixins.sass */
534+
#flippy li:hover .back {
535+
-webkit-transform: rotateY(360deg);
536+
transform: rotateY(360deg); }
537+
/* line 56, ../../views/stylesheets/_mixins.sass */
538+
.no-csstransforms3d #flippy li:hover .back {
539+
visibility: visible;
540+
opacity: 1; }
541+
/* line 90, ../../views/stylesheets/style.css.sass */
542+
#flippy li .back p {
543+
padding: 25px 15px; }
544+
/* line 93, ../../views/stylesheets/style.css.sass */
545+
#flippy li .front p {
546+
text-indent: -119988px;
547+
overflow: hidden;
548+
text-align: left;
549+
width: 55px;
550+
height: 55px;
551+
margin: 12px auto; }
552+
/* line 98, ../../views/stylesheets/style.css.sass */
553+
#flippy li #twitter {
554+
background: url('/images/my_sprites-767a2f24d0.png') 0 -385px; }
555+
/* line 100, ../../views/stylesheets/style.css.sass */
556+
#flippy li #facebook {
557+
background: url('/images/my_sprites-767a2f24d0.png') 0 -55px; }
558+
/* line 102, ../../views/stylesheets/style.css.sass */
559+
#flippy li #forrst {
560+
background: url('/images/my_sprites-767a2f24d0.png') 0 -165px; }
561+
/* line 104, ../../views/stylesheets/style.css.sass */
562+
#flippy li #rss {
563+
background: url('/images/my_sprites-767a2f24d0.png') 0 -275px; }
564+
449565
/* line 4, ../../views/stylesheets/html5boilerplate/_nonsemantichelpers.sass */
450566
.ir {
451567
display: block;

0 commit comments

Comments
 (0)