www.gusucode.com > 200套html5精品模板76_100 > 087/css/flexslider.css
/* * jQuery FlexSlider v1.8 * http://flex.madebymufffin.com * * Copyright 2011, Tyler Smith * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php */ /* Browser Resets */ .flex-container a:active, .flexslider a:active {outline: none;} .slides, .flex-control-nav, .flex-direction-nav {margin: 0; padding: 0; list-style: none;} /* FlexSlider Necessary Styles *********************************/ .flexslider {width: 100%; margin:0px 0; padding: 0;} .flexslider .slides > li {display: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides img {max-width: 100%; display: block;} .flex-pauseplay span {text-transform: capitalize;} /* Clearfix for the .slides element */ .slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} html[xmlns] .slides {display: block;} * html .slides {height: 1%;} /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */ .no-js .slides > li:first-child {display: block;} /* FlexSlider Default Theme *********************************/ .flexslider {position: relative;zoom: 1;float:left;padding-bottom:20px;} .flexslider .slides {zoom: 1;} .flexslider .slides > li {position: relative; } /* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */ .flex-container {zoom: 1; position: relative;} /* Caption style */ /* IE rgba() hack */ .flex-caption {background:none; zoom: 1;background:url("http://web-vogue.com/themes/CreativeSpace/images/caption-bg.png") repeat; } .flex-caption {width: auto;height:40px; padding:25px 15px 5px 15px;position: absolute; left: 0px; bottom: 0; color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); } .flex-caption p{margin:0;color:#FFF;font-size:14px;} .flexslider .slides > li { z-index: 1 ; } .flex-direction-nav { z-index: 3 } .flex-direction-nav li a { z-index: 3 !important; color: #fff; font-size: 20px;display: block; background-color: rgba(0,0,0,0.3);-webkit-transition: background-color .2s linear; -moz-transition: background-color .2s linear; -o-transition: background-color .2s linear; transition: background-color .2s linear; } #flex-slider-wrapper {width: 100%;height: auto; float:left;} #flex-slider-wrapper ul.slides > li { margin:0 auto;} .slide-caption p{font-family:"Arial", Verdana;color:#767676; font-size:14px;line-height:22px;text-align:left;} .slide-caption h1{text-shadow:0px 1px #272727;line-height:48px;color:#FFF;font-weight:600} .flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; } .flex-direction-nav { z-index: 3 } .flex-direction-nav li a { z-index: 3 !important; color: #fff; font-size: 24px; display: block; background-color: rgba(0,0,0,0.15); -webkit-transition: background-color .2s linear; -moz-transition: background-color .2s linear; -o-transition: background-color .2s linear; transition: background-color .2s linear; } .flex-direction-nav li a:hover { background:#ef4135 url("../images/slider-next-prev.png") left no-repeat; border-bottom: none; } .flex-direction-nav li a.next, .flex-direction-nav li a.prev { padding: 10px 5px 0px 5px; width:34px;height:34px;text-align:center;} .flex-direction-nav li .next { position: absolute; top: 50%; right: 0; margin-top: -30px; } .flex-direction-nav li .prev { position: absolute; top: 50%; left: 0; margin-top: -30px; } .shadow-img{ -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); } .flex-control-nav {width: 100%; position: absolute; margin-top: 0px; display:block;z-index:1000;text-align:center; } .flex-control-nav li {margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;text-indent:-9999px;} .flex-control-nav li:first-child {margin: 0;} .flex-control-nav li a {width: 16px; height: 16px; display: block; background: url("../images/pagination.png") right no-repeat; cursor: pointer; text-indent: -999em;} .flex-control-nav li a.active { background: url("../images/pagination.png") no-repeat; cursor: default;} /* PORTFOLIO DETAILS SLIDER */ .flexslider.portfolio-detials {position: relative;zoom: 1;float:left;padding-bottom:40px;} .flexslider.blog-slider .flex-control-nav {display:none;} .flexslider.blog-slider {margin:0;padding:0;} .portfolio-detials .flex-control-nav {margin-top: 15px;} .portfolio-detials .flex-direction-nav li a ,.blog-slider .flex-direction-nav li a { background-color: rgba(239,65,53,0.75);} .portfolio-detials .flex-direction-nav li a:hover,.blog-slider .flex-direction-nav li a:hover { background-color: rgba(239,65,53,1);}