Created
December 21, 2011 21:25
-
-
Save pixleight/1507773 to your computer and use it in GitHub Desktop.
Polaroid photo gallery experiment
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Polaroid photo gallery experiment | |
| */ | |
| @import url(http://fonts.googleapis.com/css?family=Swanky+and+Moo+Moo); | |
| html { | |
| background: #f06; | |
| background: linear-gradient(60deg, #AAA, #EEE); | |
| min-height:100%; | |
| } | |
| h1 { | |
| font-family: Helvetica, sans-serif; | |
| font-weight: bold; | |
| font-size: 40px; | |
| color: #666; | |
| text-shadow: 0 1px 0 #FFF; | |
| text-align: center; | |
| text-transform: uppercase; | |
| line-height: 0.9em; | |
| letter-spacing: -2px; | |
| } | |
| p { | |
| font-family: Helvetica, sans-serif; | |
| font-size: 16px; | |
| color: #444; | |
| text-shadow: 0 1px 0 #FFF; | |
| text-align: center; | |
| } | |
| a { | |
| color: #336699; | |
| text-decoration: none; | |
| } | |
| a:hover { | |
| text-decoration: underline; | |
| } | |
| .polaroids { | |
| margin: 20px auto; | |
| padding: 0; | |
| list-style-type: none; | |
| max-width: 960px; | |
| padding: 20px; | |
| } | |
| .polaroids li { | |
| float: left; | |
| width: 200px; | |
| margin: 10px 0px; | |
| padding: 15px; | |
| background: #FFF; | |
| background: linear-gradient(75deg, #f0f0f0, #FFF); | |
| border: 1px solid #FFF; | |
| border-radius: 3px; | |
| box-shadow: 3px 5px 15px rgba(0,0,0,0.25); | |
| transition: all 0.2s ease-out; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| /* Rotations to make photos appear "randomly" scattered */ | |
| .polaroids li:nth-child(1n) { | |
| transform: rotate(-8deg); | |
| } | |
| .polaroids li:nth-child(2n) { | |
| transform: rotate(7deg); | |
| } | |
| .polaroids li:nth-child(3n) { | |
| transform: rotate(-5deg); | |
| } | |
| .polaroids li:nth-child(4n) { | |
| transform: rotate(5deg); | |
| } | |
| .polaroids li:nth-child(5n) { | |
| transform: rotate(-6deg); | |
| } | |
| .polaroids li:nth-child(5n) { | |
| transform: rotate(7deg); | |
| } | |
| .polaroids li:hover { | |
| transform: rotate(0) scale(1.3); | |
| box-shadow: 3px 10px 15px rgba(0,0,0,0.35); | |
| z-index: 10; | |
| } | |
| .polaroids li:hover .shadow { | |
| background: none; | |
| } | |
| .polaroids .photo { | |
| width: 200px; | |
| height: 150px; | |
| overflow: hidden; | |
| border-radius: 2px; | |
| position: relative; | |
| z-index: 1; | |
| margin-bottom: 10px; | |
| } | |
| .polaroids .photo img { | |
| width: 100%; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .polaroids .photo .shadow { | |
| position: absolute; | |
| top: 0; | |
| z-index: 2; | |
| width: 200px; | |
| height: 150px; | |
| box-shadow: 2px 2px 1px rgba(0,0,0,0.5) inset; | |
| background: linear-gradient(75deg, rgba(255,255,255,0.0), rgba(255,255,255,0.1)); | |
| } | |
| .polaroids h4 { | |
| font-family: 'Swanky and Moo Moo', cursive; | |
| margin: 0; | |
| font-size: 20px; | |
| font-weight: normal; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- content to be placed inside <body>…</body> --> | |
| <h1>Polaroid Photo<br />Gallery Experiment</h1> | |
| <p><em>by <a href="http://www.twitter.com/pixleight" target="_blank">@pixleight</a></em><br /> | |
| Hover over photos for lifting effect</p> | |
| <ul class="polaroids"> | |
| <li> | |
| <div class="photo"><img src="http://placesheen.com/200/150" alt="Photo" /><div class="shadow"></div></div> | |
| <h4>Photo Caption</h4> | |
| </li> | |
| <li> | |
| <div class="photo"><img src="http://placesheen.com/200/150" alt="Photo" /><div class="shadow"></div></div> | |
| <h4>#Winning</h4> | |
| </li> | |
| <li> | |
| <div class="photo"><img src="http://placesheen.com/200/150" alt="Photo" /><div class="shadow"></div></div> | |
| <h4>Adonis DNA</h4> | |
| </li> | |
| <li> <div class="photo"><img src="http://placesheen.com/200/150" alt="Photo" /><div class="shadow"></div></div> | |
| <h4>I got tiger blood</h4> | |
| </li> | |
| <li> <div class="photo"><img src="http://placesheen.com/200/150" alt="Photo" /><div class="shadow"></div></div> | |
| <h4>I got one gear, GO</h4> | |
| </li> | |
| <li> <div class="photo"><img src="http://placesheen.com/200/150" alt="Photo" /><div class="shadow"></div></div> | |
| <h4>Bi-Winning</h4> | |
| </li> | |
| <li> <div class="photo"><img src="http://placesheen.com/200/150" alt="Photo" /><div class="shadow"></div></div> | |
| <h4>Win here, win there</h4> | |
| </li> | |
| <li> <div class="photo"><img src="http://placesheen.com/200/150" alt="Photo" /><div class="shadow"></div></div> | |
| <h4>Win everywhere</h4> | |
| </li> | |
| </ul> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"view":"split-vertical","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment