Created
July 1, 2013 23:49
-
-
Save renoirb/5905696 to your computer and use it in GitHub Desktop.
Lea Verou's CSS Lightbox, taken on webplatform.org
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
| /** | |
| * Lea Verou's CSS Lightbox, taken on webplatform.org | |
| * For redistribution purposes | |
| * @author Lea Verou <lea@w3.org> | |
| */ | |
| #lightbox { | |
| visibility: hidden; | |
| position: fixed; | |
| top: 50%; | |
| left: 50%; | |
| z-index: 10; | |
| width: 0; | |
| height: 0; | |
| padding: 10px; | |
| margin: -10px 0 0 -10px; | |
| background: white; | |
| box-shadow: 2px 2px 10px rgba(0,0,0,.5); | |
| } | |
| #lightbox.closed { | |
| -webkit-transition: .5s box-shadow, 1s .5s height, 1s .5s margin-top, 1s 1.5s width, 1s 1.5s margin-left, 0 2.5s visibility; | |
| -moz-transition: .5s box-shadow, 1s .5s height, 1s .5s margin-top, 1s 1.5s width, 1s 1.5s margin-left, 0 2.5s visibility; | |
| -o-transition: .5s box-shadow, 1s .5s height, 1s .5s margin-top, 1s 1.5s width, 1s 1.5s margin-left, 0 2.5s visibility; | |
| transition: .5s box-shadow, 1s .5s height, 1s .5s margin-top, 1s 1.5s width, 1s 1.5s margin-left, 0 2.5s visibility; | |
| } | |
| #lightbox.open { | |
| visibility: visible; | |
| width: 640px; | |
| height: 360px; | |
| margin: -190px 0 0 -330px; | |
| box-shadow: 2px 2px 10px rgba(0,0,0,.5), 0 0 0 4000px rgba(0,0,0,.3); | |
| -webkit-transition: 1s width, 1s margin-left, 1s 1s height, 1s 1s margin-top, .5s 2s box-shadow; | |
| -moz-transition: 1s width, 1s margin-left, 1s 1s height, 1s 1s margin-top, .5s 2s box-shadow; | |
| -o-transition: 1s width, 1s margin-left, 1s 1s height, 1s 1s margin-top, .5s 2s box-shadow; | |
| transition: 1s width, 1s margin-left, 1s 1s height, 1s 1s margin-top, .5s 2s box-shadow; | |
| } | |
| #lightbox > a { /* Close button */ | |
| visibility: hidden; | |
| position: absolute; | |
| right: -.5em; | |
| top: -.5em; | |
| width: 1em; | |
| padding: .3em; | |
| background: #694D9F; | |
| border: .2em solid white; | |
| border-color: hsla(0,0%,100%,.6); | |
| border-radius: 50%; | |
| box-shadow: 1px 1px 6px rgba(0,0,0,.5); | |
| color: white; | |
| text-shadow: 0 -.1em .1em rgba(0,0,0,.5); | |
| text-align: center; | |
| font: bold 200%/1 serif; | |
| } | |
| #lightbox.open > a { | |
| visibility: visible; | |
| } | |
| #lightbox > a:hover { | |
| background: #D02E27; | |
| } | |
| #lightbox > iframe { | |
| width: 100%; | |
| height: 100%; | |
| border: 0; | |
| } | |
| #lightbox > iframe { | |
| display: none; | |
| background: black; | |
| } | |
| #lightbox.open > iframe { | |
| display: block; | |
| } |
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| </head> | |
| <body> | |
| <section id="lightbox" class="open"> | |
| <img src="http://placekitten.com/g/400/650" width=650 height=400 /> | |
| </section> | |
| </body> | |
| </html> |
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
| // alert('Hello world!'); |
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","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Lea describes the CSS lightbox technique in this video.