text-carousel.css
text-carousel.css
—
CSS stylesheet,
5 KB (5493 bytes)
Dateiinhalt
/* * Bootleg.css * https://github.com/ryanseddon/bootleg * * WTFPL - http://sam.zoy.org/wtfpl/ */ /* Based on this awesome original slider; http://csscience.com/responsiveslidercss3/ */ .carousel { position: relative; margin-bottom: 20px; line-height: 1; } .carousel-inner { position: relative; width: 100%; overflow: hidden; } .carousel-inner > .item { position: relative; display: none; -webkit-transition: 0.6s ease-in-out left; -moz-transition: 0.6s ease-in-out left; -o-transition: 0.6s ease-in-out left; transition: 0.6s ease-in-out left; } .carousel-inner > .item > img, .carousel-inner > .item > a > img { display: block; line-height: 1; } .carousel-inner > .active, .carousel-inner > .next, .carousel-inner > .prev { display: block; } .carousel-inner > .active { left: 0; } .carousel-inner > .next, .carousel-inner > .prev { position: absolute; top: 0; width: 100%; } .carousel-inner > .next { left: 100%; } .carousel-inner > .prev { left: -100%; } .carousel-inner > .next.left, .carousel-inner > .prev.right { left: 0; } .carousel-inner > .active.left { left: -100%; } .carousel-inner > .active.right { left: 100%; } .carousel-control { position: absolute; top: 40%; left: 15px; width: 40px; height: 40px; margin-top: -75px; font-size: 60px; font-weight: 100; line-height: 30px; color: #ffffff; text-align: center; background: #222222; border: 3px solid #ffffff; -webkit-border-radius: 23px; -moz-border-radius: 23px; border-radius: 23px; opacity: 0.5; filter: alpha(opacity=50); } .carousel-control.right { right: 15px; left: auto; } .carousel-control:hover, .carousel-control:focus { color: #ffffff; text-decoration: none; opacity: 0.9; filter: alpha(opacity=90); } .carousel-indicators { position: absolute; top: 15px; right: 15px; z-index: 5; margin: 0; list-style: none; } .carousel-indicators li { display: block; float: left; width: 10px; height: 10px; margin-left: 5px; text-indent: -999px; background-color: #ccc; background-color: rgba(255, 255, 255, 0.25); border-radius: 5px; } .carousel-indicators .active { background-color: #fff; } .carousel-caption { /* position: absolute; */ right: 0; bottom: 0; left: 0; padding: 15px; padding-right: 80px; padding-left: 80px; background: #9a9b9c; } .carousel-caption h4, .carousel-caption p { line-height: 20px; color: #ffffff; } .carousel-caption h4 { margin: 0 0 5px; } .carousel-caption p { margin-bottom: 0; } /* Bootstrap checkboxex/radios appear within labels and we don't want to hide them */ :not(label) input[type="checkbox"], :not(label) input[type="radio"] { opacity: 0; position: absolute; /* Opera stills show an outline if not hidden */ visibility: hidden; } .slides { overflow: hidden; } .slides .carousel-inner { width: 500%; } .carousel .item { display: block; width: 20%; float: left; } #controls label, #controls label span { display: none; } #controls label { cursor: pointer; } #slide1:checked ~ .slides .carousel-inner { margin-left: 0; } #slide2:checked ~ .slides .carousel-inner { margin-left: -100%; } #slide3:checked ~ .slides .carousel-inner { margin-left: -200%; } #slide4:checked ~ .slides .carousel-inner { margin-left: -300%; } #slide5:checked ~ .slides .carousel-inner { margin-left: -400%; } .slides .carousel-inner { -webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1); -moz-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1); -ms-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1); -o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1); transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1); } #slide1:checked ~ #controls label:nth-child(2), #slide2:checked ~ #controls label:nth-child(3), #slide3:checked ~ #controls label:nth-child(4), #slide4:checked ~ #controls label:nth-child(5), #slide5:checked ~ #controls label:nth-child(1) { left: auto; right: 15px; } #slide1:checked ~ #controls label:nth-child(2), #slide2:checked ~ #controls label:nth-child(3), #slide3:checked ~ #controls label:nth-child(4), #slide4:checked ~ #controls label:nth-child(5), #slide5:checked ~ #controls label:nth-child(1), #slide1:checked ~ #controls label:nth-child(5), #slide2:checked ~ #controls label:nth-child(1), #slide3:checked ~ #controls label:nth-child(2), #slide4:checked ~ #controls label:nth-child(3), #slide5:checked ~ #controls label:nth-child(4), #slide1:checked ~ #controls label:nth-child(2) span:last-child, #slide2:checked ~ #controls label:nth-child(3) span:last-child, #slide3:checked ~ #controls label:nth-child(4) span:last-child, #slide4:checked ~ #controls label:nth-child(5) span:last-child, #slide5:checked ~ #controls label:nth-child(1) span:last-child, #slide1:checked ~ #controls label:nth-child(5) span:first-child, #slide2:checked ~ #controls label:nth-child(1) span:first-child, #slide3:checked ~ #controls label:nth-child(2) span:first-child, #slide4:checked ~ #controls label:nth-child(3) span:first-child, #slide5:checked ~ #controls label:nth-child(4) span:first-child { display: block; }