custom-bootstrap-carousel.css
custom-bootstrap-carousel.css — CSS stylesheet, 4 KB (4403 bytes)
File contents
html, body { height: 100%; } h2 {font-size: 120px; line-height: 1em} .carousel, .item, .active { height: 100%; } .carousel-inner { height: 100%; } .item {position: relative;} .carousel-caption { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; padding-top: 20px; padding-bottom: 20px; color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); background-color: rgba(0, 0, 0, .6); } .fill { width: 100%; height: 100%; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; background-color: rgba(0, 0, 0, .6); } @media screen and (max-width: 768px) { h2 {font-size: 60px; line-height: 1em} .carousel-caption {top: 0%; left: 0%; transform: none;} } .carousel-indicators { position: absolute; top: auto; bottom: 10px; left: 50%; z-index: 15; width: 60%; padding-left: 0; text-align: center; list-style: none; } ol, ul { margin-top: 0; margin-bottom: 10px; } .carousel-control {background: transparent; border: none} footer {margin: 50px 0; } /* CUSTOM STYLES FOR WHY ARTS AND SCIENCES PAGE */ #upperbar, #lowerbar, #navbar, .title, #prefooter_wrapper, footer {display: none} div#core-content.container, .span12 {width: 100%} #core-content .main-content, #core-content .sidebar, #social-counters { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .row-white {background-color: rgba(255, 255, 255, 0.5)} .row-black {background-color: rgba(0, 0, 0, 0.5)} .row-yellow {background-color: rgba(248, 152, 29, 0.5)} .row-blue {background-color: rgba(0, 120, 138, 0.6)} .row-green {background-color: rgba(79, 110, 24, 0.6)} .row-brown {background-color: rgba(118, 66, 0, 0.6)} #one {background-image: url(/artsandsciences/images/banners-bg/thinker-banner-01.jpg);padding: 0px; background-position: center right;} #two {background-image: url(/artsandsciences/images/banners-bg/bg-whiteboard.jpg); background-position: center right;} #three{background-image: url(/artsandsciences/images/banners-bg/bg-banner-engagement.jpg); background-position: center 60%;} #four {background-image: url(/artsandsciences/images/school-of-athens.jpg); background-position: center center;} #five {background-image: url(/artsandsciences/images/banners-bg/thinker-banner-01.jpg);padding: 0px; background-position: center right;} /* Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x) CSS from: http://codepen.io/transportedman/pen/NPWRGq and: http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide Inspired from: http://codepen.io/Rowno/pen/Afykb */ .carousel-fade .carousel-inner .item { opacity: 0; transition-property: opacity; transition-duration: 1s } .carousel-fade .carousel-inner .active { opacity: 1; } .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { left: 0; opacity: 0; z-index: 1; } .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; } .carousel-fade .carousel-control { z-index: 2; } /* WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers." Need to override the 3.3 new styles for modern browsers & apply opacity*/ @media all and (transform-3d), (-webkit-transform-3d) { .carousel-fade .carousel-inner > .item.next, .carousel-fade .carousel-inner > .item.active.right { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .carousel-fade .carousel-inner > .item.prev, .carousel-fade .carousel-inner > .item.active.left { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .carousel-fade .carousel-inner > .item.next.left, .carousel-fade .carousel-inner > .item.prev.right, .carousel-fade .carousel-inner > .item.active { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }