Created
July 6, 2012 14:35
-
-
Save A973C/3060511 to your computer and use it in GitHub Desktop.
Pure CSS Featured Image Slider
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> | |
| <meta charset="UTF-8"> | |
| <title>Pure CSS Featured Image Slider · CodePen</title> | |
| <link rel="stylesheet" href="http://codepen.io/stylesheets/css/normalize.css"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| html { | |
| background-color: #eefbf8; | |
| background-image: -webkit-radial-gradient(circle, hsla(0,0%,100%,.1), hsla(0,0%,0%,.75)), | |
| -webkit-linear-gradient(left, transparent 50%, hsla(0,0%,0%,.01) 50%); | |
| background-image: -moz-radial-gradient(circle, hsla(0,0%,100%,.1), hsla(0,0%,0%,.75)), | |
| -moz-linear-gradient(left, transparent 50%, hsla(0,0%,0%,.01) 50%); | |
| background-image: -ms-radial-gradient(circle, hsla(0,0%,100%,.1), hsla(0,0%,0%,.75)), | |
| -ms-linear-gradient(left, transparent 50%, hsla(0,0%,0%,.01) 50%); | |
| background-image: -o-radial-gradient(circle, hsla(0,0%,100%,.1), hsla(0,0%,0%,.75)), | |
| -o-linear-gradient(left, transparent 50%, hsla(0,0%,0%,.01) 50%); | |
| background-image: radial-gradient(circle, hsla(0,0%,100%,.1), hsla(0,0%,0%,.75)), | |
| linear-gradient(left, transparent 50%, hsla(0,0%,0%,.01) 50%); | |
| background-position: 50% 75%, 50% 50%; | |
| background-repeat: no-repeat, repeat; | |
| background-size: 150% 150%, 3em 3em; | |
| font-size: 100%; | |
| min-height: 100%; | |
| } | |
| /**********/ | |
| /* Slider */ | |
| /**********/ | |
| .slider { | |
| background-color: #fff; | |
| box-shadow: inset 0 0 2px hsla(0,0%,0%,.2), | |
| 0 3px 1px hsla(0,0%,100%,.75), | |
| 0 -1px 1px 2px hsla(0,0%,0%,.1); | |
| height: 15em; | |
| left: 50%; | |
| margin: -8em -13em; | |
| padding: .5em; | |
| position: absolute; | |
| top: 50%; | |
| width: 25em; | |
| } | |
| /* Frame */ | |
| .slider:before { | |
| background-color: #22130c; | |
| bottom: -2.5em; | |
| box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,.2), | |
| inset 0 -2px 1px hsla(0,0%,0%,.4), | |
| 0 5px 50px hsla(0,0%,0%,.25), | |
| 0 20px 20px -15px hsla(0,0%,0%,.2), | |
| 0 30px 20px -15px hsla(0,0%,0%,.15), | |
| 0 40px 20px -15px hsla(0,0%,0%,.1); | |
| content: ''; | |
| left: -2.5em; | |
| position: absolute; | |
| right: -2.5em; | |
| top: -2.5em; | |
| z-index: -1; | |
| } | |
| /* Mat */ | |
| .slider:after { | |
| background-color: #fff5e5; | |
| bottom: -1.5em; | |
| box-shadow: 0 2px 1px hsla(0,0%,100%,.2), | |
| 0 -1px 1px 1px hsla(0,0%,0%,.4), | |
| inset 0 2px 3px 1px hsla(0,0%,0%,.2), | |
| inset 0 4px 3px 1px hsla(0,0%,0%,.2), | |
| inset 0 6px 3px 1px hsla(0,0%,0%,.1); | |
| content: ''; | |
| left: -1.5em; | |
| position: absolute; | |
| right: -1.5em; | |
| top: -1.5em; | |
| z-index: -1; | |
| } | |
| /* Slides */ | |
| .slider li { | |
| box-shadow: 0 -1px 0 2px hsla(0,0%,0%,.03); | |
| list-style:none; | |
| position: absolute; | |
| } | |
| .slider input { | |
| display: none; | |
| } | |
| /* Navigation */ | |
| .slider label { | |
| background-color: #111; | |
| background-image: -webkit-linear-gradient(transparent, hsla(0,0%,0%,.25)); | |
| background-image: -moz-linear-gradient(transparent, hsla(0,0%,0%,.25)); | |
| background-image: -ms-linear-gradient(transparent, hsla(0,0%,0%,.25)); | |
| background-image: -o-linear-gradient(transparent, hsla(0,0%,0%,.25)); | |
| background-image: linear-gradient(transparent, hsla(0,0%,0%,.25)); | |
| border: .2em solid transparent; | |
| bottom: .5em; | |
| border-radius: 100%; | |
| cursor: pointer; | |
| display: block; | |
| height: .5em; | |
| left: 24em; | |
| opacity: 0; | |
| position: absolute; | |
| width: .5em; | |
| visibility: hidden; | |
| z-index: 10; | |
| -webkit-transition: .25s; | |
| -moz-transition: .25s; | |
| -ms-transition: .25s; | |
| -o-transition: .25s; | |
| transition: .25s; | |
| } | |
| .slider label:after { | |
| border-radius: 100%; | |
| bottom: -.2em; | |
| box-shadow: inset 0 0 0 .2em #111, | |
| inset 0 2px 2px #000, | |
| 0 1px 1px hsla(0,0%,100%,.25); | |
| content: ''; | |
| left: -.2em; | |
| position: absolute; | |
| right: -.2em; | |
| top: -.2em; | |
| } | |
| .slider:hover label { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .slider input:checked + label { | |
| background-color: #fff; | |
| } | |
| .slider:hover li:nth-child(1) label { | |
| left: .5em; | |
| -webkit-transition: .25s; | |
| -moz-transition: .25s; | |
| -ms-transition: .25s; | |
| -o-transition: .25s; | |
| transition: .25s; | |
| } | |
| .slider:hover li:nth-child(2) label { | |
| left: 2em; | |
| -webkit-transition: .25s .05s; | |
| -moz-transition: .25s .05s; | |
| -ms-transition: .25s .05s; | |
| -o-transition: .25s .05s; | |
| transition: .25s .05s; | |
| } | |
| .slider:hover li:nth-child(3) label { | |
| left: 3.5em; | |
| -webkit-transition: .25s .1s; | |
| -moz-transition: .25s .1s; | |
| -ms-transition: .25s .1s; | |
| -o-transition: .25s .1s; | |
| transition: .25s .1s; | |
| } | |
| .slider:hover li:nth-child(4) label { | |
| left: 5em; | |
| -webkit-transition: .25s .15s; | |
| -moz-transition: .25s .15s; | |
| -ms-transition: .25s .15s; | |
| -o-transition: .25s .15s; | |
| transition: .25s .15s; | |
| } | |
| /* Images */ | |
| .slider img { | |
| height: 15em; | |
| opacity: 0; | |
| width: 25em; | |
| vertical-align: top; | |
| visibility: hidden; | |
| -webkit-transition: .25s; | |
| -moz-transition: .25s; | |
| -ms-transition: .25s; | |
| -o-transition: .25s; | |
| transition: .25s; | |
| } | |
| .slider li input:checked ~ img { | |
| opacity: 1; | |
| visibility: visible; | |
| z-index: 10; | |
| } | |
| | |
| </style> | |
| <style> | |
| #codepen-footer, #codepen-footer * { | |
| -webkit-box-sizing: border-box !important; | |
| -moz-box-sizing: border-box !important; | |
| box-sizing: border-box !important; | |
| } | |
| #codepen-footer { | |
| display: block !important; | |
| position: fixed !important; | |
| bottom: 0 !important; | |
| left: 0 !important; | |
| width: 100% !important; | |
| padding: 0 10px !important; | |
| margin: 0 !important; | |
| height: 30px !important; | |
| line-height: 30px !important; | |
| font-size: 12px !important; | |
| color: #eeeeee !important; | |
| background-color: #505050 !important; | |
| text-align: left !important; | |
| background: -webkit-linear-gradient(top, #505050, #383838) !important; | |
| background: -moz-linear-gradient(top, #505050, #383838) !important; | |
| background: -ms-linear-gradient(top, #505050, #383838) !important; | |
| background: -o-linear-gradient(top, #505050, #383838) !important; | |
| border-top: 1px solid black !important; | |
| border-bottom: 1px solid black !important; | |
| border-radius: 0 !important; | |
| border-image: none !important; | |
| box-shadow: inset 0 1px 0 #6e6e6e, 0 2px 2px rgba(0, 0, 0, 0.4) !important; | |
| z-index: 300 !important; | |
| font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif !important; | |
| letter-spacing: 0 !important; | |
| word-spacing: 0 !important; | |
| } | |
| #codepen-footer a { | |
| color: #a7a7a7 !important; | |
| text-decoration: none !important; | |
| } | |
| #codepen-footer a:hover { | |
| color: white !important; | |
| } | |
| </style> | |
| <script> | |
| // Kill alerts, confirmations and prompts | |
| window.alert = function(){}; | |
| window.confirm = function(){}; | |
| window.prompt = function(){}; | |
| window.open = function(){}; | |
| window.print = function(){}; | |
| </script> | |
| <script src="http://codepen.io/javascripts/libs/prefixfree.min.js"></script> | |
| </head> | |
| <body> | |
| <ul class="slider"> | |
| <li> | |
| <input type="radio" id="slide1" name="slide" checked> | |
| <label for="slide1"></label> | |
| <img src="http://www.dessko.com/assets/images/116/116_size_400x300_wallpaper-25331.jpg?1265653882"> | |
| </li> | |
| <li> | |
| <input type="radio" id="slide2" name="slide"> | |
| <label for="slide2"></label> | |
| <img src="http://www.widescreenwalls.com/wp-content/uploads/2011/09/Beautiful-Landscape-400x300.jpg"> | |
| </li> | |
| <li> | |
| <input type="radio" id="slide3" name="slide"> | |
| <label for="slide3"></label> | |
| <img src="http://www.photofurl.com/wp-content/uploads/2010/04/blue-water-beach-wallpaper-400x300.jpg"> | |
| </li> | |
| <li> | |
| <input type="radio" id="slide4" name="slide"> | |
| <label for="slide4"></label> | |
| <img src="http://www.widescreenwalls.com/wp-content/uploads/2011/10/Winter_Landscape-400x300.jpg"> | |
| </li> | |
| </ul> | |
| | |
| <script src="http://code.jquery.com/jquery-latest.js"></script> | |
| <script src="http://codepen.io/javascripts/libs/modernizr.js"></script> | |
| <div id="codepen-footer"> | |
| <a style="color: #f73535 !important;" href="https://codepen.wufoo.com/forms/m7x3r3/def/field14=" onclick="window.open(this.href, null, 'height=517, width=680, toolbar=0, location=0, status=1, scrollbars=1, resizable=1'); return false">Report Abuse</a> | |
| | |
| <a href="/A973C/pen/5/1">Edit this Pen</a> | |
| </div> | |
| </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
| <ul class="slider"> | |
| <li> | |
| <input type="radio" id="slide1" name="slide" checked> | |
| <label for="slide1"></label> | |
| <img src="http://www.dessko.com/assets/images/116/116_size_400x300_wallpaper-25331.jpg?1265653882"> | |
| </li> | |
| <li> | |
| <input type="radio" id="slide2" name="slide"> | |
| <label for="slide2"></label> | |
| <img src="http://www.widescreenwalls.com/wp-content/uploads/2011/09/Beautiful-Landscape-400x300.jpg"> | |
| </li> | |
| <li> | |
| <input type="radio" id="slide3" name="slide"> | |
| <label for="slide3"></label> | |
| <img src="http://www.photofurl.com/wp-content/uploads/2010/04/blue-water-beach-wallpaper-400x300.jpg"> | |
| </li> | |
| <li> | |
| <input type="radio" id="slide4" name="slide"> | |
| <label for="slide4"></label> | |
| <img src="http://www.widescreenwalls.com/wp-content/uploads/2011/10/Winter_Landscape-400x300.jpg"> | |
| </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
| * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| html { | |
| background-color: #eefbf8; | |
| background-image: -webkit-radial-gradient(circle, hsla(0,0%,100%,.1), hsla(0,0%,0%,.75)), | |
| -webkit-linear-gradient(left, transparent 50%, hsla(0,0%,0%,.01) 50%); | |
| background-image: -moz-radial-gradient(circle, hsla(0,0%,100%,.1), hsla(0,0%,0%,.75)), | |
| -moz-linear-gradient(left, transparent 50%, hsla(0,0%,0%,.01) 50%); | |
| background-image: -ms-radial-gradient(circle, hsla(0,0%,100%,.1), hsla(0,0%,0%,.75)), | |
| -ms-linear-gradient(left, transparent 50%, hsla(0,0%,0%,.01) 50%); | |
| background-image: -o-radial-gradient(circle, hsla(0,0%,100%,.1), hsla(0,0%,0%,.75)), | |
| -o-linear-gradient(left, transparent 50%, hsla(0,0%,0%,.01) 50%); | |
| background-image: radial-gradient(circle, hsla(0,0%,100%,.1), hsla(0,0%,0%,.75)), | |
| linear-gradient(left, transparent 50%, hsla(0,0%,0%,.01) 50%); | |
| background-position: 50% 75%, 50% 50%; | |
| background-repeat: no-repeat, repeat; | |
| background-size: 150% 150%, 3em 3em; | |
| font-size: 100%; | |
| min-height: 100%; | |
| } | |
| /**********/ | |
| /* Slider */ | |
| /**********/ | |
| .slider { | |
| background-color: #fff; | |
| box-shadow: inset 0 0 2px hsla(0,0%,0%,.2), | |
| 0 3px 1px hsla(0,0%,100%,.75), | |
| 0 -1px 1px 2px hsla(0,0%,0%,.1); | |
| height: 15em; | |
| left: 50%; | |
| margin: -8em -13em; | |
| padding: .5em; | |
| position: absolute; | |
| top: 50%; | |
| width: 25em; | |
| } | |
| /* Frame */ | |
| .slider:before { | |
| background-color: #22130c; | |
| bottom: -2.5em; | |
| box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,.2), | |
| inset 0 -2px 1px hsla(0,0%,0%,.4), | |
| 0 5px 50px hsla(0,0%,0%,.25), | |
| 0 20px 20px -15px hsla(0,0%,0%,.2), | |
| 0 30px 20px -15px hsla(0,0%,0%,.15), | |
| 0 40px 20px -15px hsla(0,0%,0%,.1); | |
| content: ''; | |
| left: -2.5em; | |
| position: absolute; | |
| right: -2.5em; | |
| top: -2.5em; | |
| z-index: -1; | |
| } | |
| /* Mat */ | |
| .slider:after { | |
| background-color: #fff5e5; | |
| bottom: -1.5em; | |
| box-shadow: 0 2px 1px hsla(0,0%,100%,.2), | |
| 0 -1px 1px 1px hsla(0,0%,0%,.4), | |
| inset 0 2px 3px 1px hsla(0,0%,0%,.2), | |
| inset 0 4px 3px 1px hsla(0,0%,0%,.2), | |
| inset 0 6px 3px 1px hsla(0,0%,0%,.1); | |
| content: ''; | |
| left: -1.5em; | |
| position: absolute; | |
| right: -1.5em; | |
| top: -1.5em; | |
| z-index: -1; | |
| } | |
| /* Slides */ | |
| .slider li { | |
| box-shadow: 0 -1px 0 2px hsla(0,0%,0%,.03); | |
| list-style:none; | |
| position: absolute; | |
| } | |
| .slider input { | |
| display: none; | |
| } | |
| /* Navigation */ | |
| .slider label { | |
| background-color: #111; | |
| background-image: -webkit-linear-gradient(transparent, hsla(0,0%,0%,.25)); | |
| background-image: -moz-linear-gradient(transparent, hsla(0,0%,0%,.25)); | |
| background-image: -ms-linear-gradient(transparent, hsla(0,0%,0%,.25)); | |
| background-image: -o-linear-gradient(transparent, hsla(0,0%,0%,.25)); | |
| background-image: linear-gradient(transparent, hsla(0,0%,0%,.25)); | |
| border: .2em solid transparent; | |
| bottom: .5em; | |
| border-radius: 100%; | |
| cursor: pointer; | |
| display: block; | |
| height: .5em; | |
| left: 24em; | |
| opacity: 0; | |
| position: absolute; | |
| width: .5em; | |
| visibility: hidden; | |
| z-index: 10; | |
| -webkit-transition: .25s; | |
| -moz-transition: .25s; | |
| -ms-transition: .25s; | |
| -o-transition: .25s; | |
| transition: .25s; | |
| } | |
| .slider label:after { | |
| border-radius: 100%; | |
| bottom: -.2em; | |
| box-shadow: inset 0 0 0 .2em #111, | |
| inset 0 2px 2px #000, | |
| 0 1px 1px hsla(0,0%,100%,.25); | |
| content: ''; | |
| left: -.2em; | |
| position: absolute; | |
| right: -.2em; | |
| top: -.2em; | |
| } | |
| .slider:hover label { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .slider input:checked + label { | |
| background-color: #fff; | |
| } | |
| .slider:hover li:nth-child(1) label { | |
| left: .5em; | |
| -webkit-transition: .25s; | |
| -moz-transition: .25s; | |
| -ms-transition: .25s; | |
| -o-transition: .25s; | |
| transition: .25s; | |
| } | |
| .slider:hover li:nth-child(2) label { | |
| left: 2em; | |
| -webkit-transition: .25s .05s; | |
| -moz-transition: .25s .05s; | |
| -ms-transition: .25s .05s; | |
| -o-transition: .25s .05s; | |
| transition: .25s .05s; | |
| } | |
| .slider:hover li:nth-child(3) label { | |
| left: 3.5em; | |
| -webkit-transition: .25s .1s; | |
| -moz-transition: .25s .1s; | |
| -ms-transition: .25s .1s; | |
| -o-transition: .25s .1s; | |
| transition: .25s .1s; | |
| } | |
| .slider:hover li:nth-child(4) label { | |
| left: 5em; | |
| -webkit-transition: .25s .15s; | |
| -moz-transition: .25s .15s; | |
| -ms-transition: .25s .15s; | |
| -o-transition: .25s .15s; | |
| transition: .25s .15s; | |
| } | |
| /* Images */ | |
| .slider img { | |
| height: 15em; | |
| opacity: 0; | |
| width: 25em; | |
| vertical-align: top; | |
| visibility: hidden; | |
| -webkit-transition: .25s; | |
| -moz-transition: .25s; | |
| -ms-transition: .25s; | |
| -o-transition: .25s; | |
| transition: .25s; | |
| } | |
| .slider li input:checked ~ img { | |
| opacity: 1; | |
| visibility: visible; | |
| z-index: 10; | |
| } | |
| |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment