www.gusucode.com > 200套html5精品模板51_75 > 071/css/supersized.shutter.css
/* Supersized - Fullscreen Slideshow jQuery Plugin Version : 3.2.7 Site : www.buildinternet.com/project/supersized Theme : Shutter 1.2 Author : Sam Dunn Company : One Mighty Roar (www.onemightyroar.com) License : MIT License / GPL License */ /* Controls Bar ----------------------------*/ #controls-wrapper { margin: 0 auto; height: 42px; width: 100%; bottom: 0px; left: 0; z-index: 4; background: url(../img/nav-bg.png) repeat-x; position: fixed; } #controls { overflow: hidden; height: 100%; position: relative; text-align: left; z-index: 5; } #slidecounter { float: left; color: #999; font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif; text-shadow: #000 0 -1px 0; margin: 0px 10px 0 15px; line-height: 42px; } #slidecaption { position:absolute; bottom: 0px; left: 0px; overflow: hidden; background-color:#ec534d; opacity: 0; float: left; color: #FFF; padding: 30px 30px 65px 20px; } #slidecaption h1 { font-family: 'OpenSansSemiboldRegular'; font-size: 48px; margin: 0px 0px 10px 0; color:#ffffff; } #slidecaption p { font-family: 'OpenSansLightRegular'; font-size: 18px; color:#ffffff; } #slidecaption.portfolio-slidecaption { position:relative; background-color: #fff !important; padding: 0px 0px 20px 0px; } #slidecaption.portfolio-slidecaption h4 { color: #626262; } #slidecaption.portfolio-slidecaption p{ color: #626262; font-family: Arial,Helvetica,sans-serif; font-size: 12px; line-height: 18px; margin: 0px 0px 9px 0px; } #navigation { float: right; margin: 0px 20px 0 0; } #pauseplay { display:block; width: 34px; height: 34px; position:absolute; left:0px; bottom: 0px; background-image: url('../img/superSizer/slider-nav.png'); background-position:-68px 0; background-repeat:no-repeat; background-color:#626262; z-index: 40; } #pauseplay.pause { background-position:-102px 0; } #pauseplay.pause:hover { } #pauseplay:hover { cursor: pointer; } #prevslide, #nextslide, #tray-button { position: absolute; height: 34px; width: 34px; z-index: 40; } #prevslide { left: 10px; background-image: url('../img/superSizer/slider-nav.png'); background-position:0 0; background-repeat:no-repeat; background-color:#626262; left:35px; bottom: 0px; } #nextslide { right: 10px; background-image: url('../img/superSizer/slider-nav.png'); background-position:-34px 0; background-repeat:no-repeat; background-color:#626262; left:70px; bottom: 0px; } #tray-button { right: 10px; background-image: url('../img/superSizer/slider-nav.png'); background-position:-136px 0; background-repeat:no-repeat; background-color:#626262; left:105px; bottom: 0px; } #prevslide:active, #nextslide:active { } #prevslide:hover { background-position: 0px -34px; } #nextslide:hover { background-position:-34px -34px; } #prevslide:hover, #nextslide:hover, #pauseplay:hover { cursor: pointer; background-color:#EC534D; } #prevslide, #nextslide, #tray-button, #pauseplay { -moz-transition: background-color 300ms ease 0s, background-position 350ms ease 0s; -webkit-transition: background-color 300ms ease 0s, background-position 350ms ease 0s; -o-transition: background-color 300ms ease 0s, background-position 350ms ease 0s; -ms-transition: background-color 300ms ease 0s, background-position 350ms ease 0s; } #tray-button:hover { background-position:-136px 0px; background-color:#EC534D; cursor: pointer; } #tray-button.show { background-position:-136px -34px; background-color:#EC534D; } ul#slide-list { padding: 15px 0; float: left; position: absolute; left: 50%; } ul#slide-list li { list-style: none; width: 12px; height: 12px; float: left; margin: 0 5px 0 0; } ul#slide-list li.current-slide a, ul#slide-list li.current-slide a:hover { background-position: 0 0px; } ul#slide-list li a { display: block; width: 12px; height: 12px; background: url('../img/nav-dot.png') no-repeat 0 -24px; } ul#slide-list li a:hover { background-position: 0 -12px; cursor: pointer; } /* Progress Bar ----------------------------*/ #progress-back { z-index: 5; position: absolute; bottom: 42px; left: 0; height: 8px; width: 100%; background: url('../img/superSizer/progress-back.png') repeat-x; } #progress-bar { position: relative; height: 8px; width: 100%; background: url('../img/superSizer/progress-bar.png') repeat-x; } /* Thumbnail Navigation ----------------------------*/ #nextthumb, #prevthumb { z-index: 2; display: none; position: fixed; bottom: 61px; height: 75px; width: 100px; overflow: hidden; background: #ddd; border: 1px solid #fff; -webkit-box-shadow: 0 0 5px #000; } #nextthumb { right: 12px; } #prevthumb { left: 12px; } #nextthumb img, #prevthumb img { width: 150px; height: auto; } #nextthumb:active, #prevthumb:active { bottom: 59px; } #nextthumb:hover, #prevthumb:hover { cursor: pointer; } /* Thumbnail Tray ----------------------------*/ #thumb-tray { position:absolute; z-index: 3; bottom: 0; right: 0; height: 122px; width: 860px; overflow: hidden; text-align: center; } #thumb-back, #thumb-forward { position: absolute; z-index: 5; bottom: 42px; height: 108px; width: 40px; } #thumb-back { left: 0; background: url('../img/thumb-back.png') no-repeat center center; } #thumb-forward { right: 0; background: url('../img/thumb-forward.png') no-repeat center center; } #thumb-back:hover, #thumb-forward:hover { cursor: pointer; background-color: rgba(256,256,256, 0.1); } #thumb-back:hover { border-right: 1px solid rgba(256,256,256, 0.2); } #thumb-forward:hover { border-left: 1px solid rgba(256,256,256, 0.2); } ul#thumb-list { display: inline-block; list-style: none; position: relative; left: 0px; padding: 0 0px; margin: 0px; } ul#thumb-list li { background: #111; list-style: none; display: inline; width: 122px; height: 122px; overflow: hidden; float: left; margin: 0 1px 0px 0px; } ul#thumb-list li img { width: 122px; height: 122px; opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); -webkit-transition: all 100ms ease-in-out; -moz-transition: all 100ms ease-in-out; -o-transition: all 100ms ease-in-out; -ms-transition: all 100ms ease-in-out; transition: all 100ms ease-in-out; } ul#thumb-list li.current-thumb img, ul#thumb-list li:hover img { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } ul#thumb-list li:hover { cursor: pointer; }