8 500
edições
Sem resumo de edição |
Sem resumo de edição |
||
Linha 579: | Linha 579: | ||
/* Tests */ | /* Tests */ | ||
.slideshow { | |||
width: 100%; | |||
height: 360px; | |||
position: relative; | |||
text-align: center; | |||
line-height: 750px; | |||
padding-bottom: 30px; | |||
} | } | ||
.slideshow--item { | |||
width: 100%; | |||
height: 400px; | |||
line-height: 1.5; | |||
position: absolute; | |||
top: 0; | |||
visibility: hidden; | |||
background-repeat:none; | |||
background-size:cover; | |||
} | } | ||
.one{ | |||
. | background-image:url(http://lorempixel.com/640/360/sports/1); | ||
} | } | ||
. | .two{ | ||
background-image:url(http://lorempixel.com/640/360/sports/2); | |||
} | } | ||
.three{ | |||
. | background-image:url(http://lorempixel.com/640/360/sports/3); | ||
} | } | ||
. | .four{ | ||
background-image:url(http://lorempixel.com/640/360/people/3); | |||
} | } | ||
. | .slideshow--bullet:checked + .slideshow--item { | ||
visibility: visible; | |||
} | } | ||
. | .slideshow--nav{ | ||
position: absolute; | |||
top: 0; | |||
bottom: 0; | |||
width: 50%; | |||
display: none; | |||
z-index: 88; | |||
cursor: pointer; | |||
color: transparent; | |||
-webkit-touch-callout: none; | |||
-webkit-user-select: none; | |||
-khtml-user-select: none; | |||
-moz-user-select: none; | |||
-ms-user-select: none; | |||
user-select: none; | |||
} | } | ||
.slideshow--nav:after { | |||
. | display: block; | ||
content: '\25B6'; | |||
font-size: 2em; | |||
color: grey; | |||
position: absolute; | |||
top: 50%; | |||
right: 10px; | |||
margin-top: -.5em; | |||
} | } | ||
. | .slideshow--nav-previous { | ||
left: 0; | |||
display: block; | |||
} | } | ||
.slideshow-nav{ | .slideshow--nav-previous:after { | ||
-webkit-transform: scaleX(-1); | |||
-moz-transform: scaleX(-1); | |||
transform: scaleX(-1); | |||
right: auto; | |||
left: 10px; | |||
} | } | ||
.nav- | .slideshow--nav-next { | ||
left: 50%; | |||
display: block; | |||
} | } | ||
. | .slideshow--bullet { | ||
font-size: .75em; | |||
width: 1em; | |||
height: 1em; | |||
display: inline-block; | |||
position: relative; | |||
z-index: 99; | |||
-webkit-appearance: none; | |||
-moz-appearance: none; | |||
appearance: none; | |||
background: #ccc; | |||
border-radius: 1em; | |||
transition: .3s ease-out background, | |||
.3s ease-out transform; | |||
} | } | ||
. | .slideshow--bullet:checked { | ||
background: #999; | |||
outline: none; | |||
. | -webkit-transform: scale(1.3); | ||
-moz-transform: scale(1.3); | |||
transform: scale(1.3); | |||
. | |||
} | } |