|
|
Linha 579: |
Linha 579: |
| /* Tests */ | | /* Tests */ |
|
| |
|
| *{box-sizing: border-box; -webkit-box-sizing: border-box; } | | * { |
| html, body { height: 100%; }
| | margin: 0; |
| body { margin: 0; font: 16px/1.3 sans-serif; }
| | padding: 0; |
| | | box-sizing: border-box; |
| | | } |
| .CSSgal {
| | body { |
| position: relative; | | background-color: rgb(171, 243, 243); |
| | font-family: 'Courier New', Courier, monospace; |
| | font-weight: lighter; |
| | text-align: center; |
| | } |
| | .content { |
| | margin: 10% auto; |
| | padding: 0; |
| | background-color: antiquewhite; |
| | border-radius: 10px; |
| | height: 300px; |
| | width: 600px; |
| overflow: hidden; | | overflow: hidden; |
| height: 100%; /* Or set a fixed height */ | | border: 1px saddlebrown solid; |
| | box-shadow: 20px hsl(0, 0%, 3%); |
| | z-index: -1; |
| | } |
| | .show { |
| | padding: 10%; |
| | margin: auto; |
| | justify-content: center; |
| | align-items: center; |
| | font-style: italic; |
| | width: fit-content; |
| } | | } |
|
| |
|
| /* SLIDER */
| | .slide_content { |
| | | float: left; |
| .CSSgal .slider { | | width: 600px; |
| height: 100%; | | height: 300px; |
| white-space: nowrap; | |
| font-size: 0; | |
| transition: 0.8s;
| |
| } | | } |
| | | .slides { |
| /* SLIDES */
| | width: 2400px; |
| | | -webkit-animation-name: slide; |
| .CSSgal .slider > * { | | -webkit-animation-duration: 10s; |
| font-size: 1rem; | | -webkit-animation-iteration-count: infinite; |
| display: inline-block; | | /* -webkit-animation-direction: alternate; */ |
| white-space: normal; | | -webkit-animation-play-state: running; |
| vertical-align: top; | | display: flex; |
| height: 100%; | | justify-content: center; |
| width: 100%; | | align-items: center; |
| background: none 50% no-repeat; | |
| background-size: cover; | |
| } | | } |
| | | .slide_content:nth-child(1) { |
| /* PREV/NEXT, CONTAINERS & ANCHORS */
| | background: rgb(247, 173, 210); |
| | |
| .CSSgal .prevNext { | |
| position: absolute; | |
| z-index: 1; | | z-index: 1; |
| top: 50%;
| |
| width: 100%;
| |
| height: 0;
| |
| } | | } |
|
| |
|
| .CSSgal .prevNext > div+div { | | .slide_content:nth-child(2) { |
| visibility: hidden; /* Hide all but first P/N container */ | | background: hsl(108, 100%, 88%); |
| } | | } |
|
| |
|
| .CSSgal .prevNext span{ | | .slide_content:nth-child(3) { |
| background: #fff;
| | background: rgb(226, 192, 192); |
| position: absolute;
| |
| width: 60px;
| |
| height: 60px;
| |
| line-height: 60px; /* If you want to place numbers */
| |
| text-align: center;
| |
| opacity: 0.7;
| |
| -webkit-transition: 0.3s;
| |
| transition: 0.3s;
| |
| -webkit-transform: translateY(-50%);
| |
| transform: translateY(-50%);
| |
| left: 0;
| |
| }
| |
| .CSSgal .prevNext span:hover {
| |
| opacity: 1;
| |
| }
| |
| .CSSgal .prevNext a+a {
| |
| left: auto;
| |
| right: 0;
| |
| } | | } |
|
| |
|
| /* NAVIGATION */
| | .slide_content:nth-child(4) { |
| | | background: rgb(236, 236, 149); |
| .CSSgal .bullets {
| |
| position: absolute;
| |
| z-index: 2;
| |
| bottom: 0;
| |
| padding: 10px 0;
| |
| width: 100%;
| |
| text-align: center;
| |
| }
| |
| .CSSgal .bullets > span{ | |
| display: inline-block;
| |
| width: 30px;
| |
| height: 30px;
| |
| line-height: 30px;
| |
| text-decoration: none;
| |
| text-align: center;
| |
| background: rgba(255, 255, 255, 1);
| |
| -webkit-transition: 0.3s;
| |
| transition: 0.3s;
| |
| }
| |
| .CSSgal .bullets > span {
| |
| background: rgba(255, 255, 255, 0.5); /* Dim all but first */ | |
| }
| |
| .CSSgal .bullets > span:hover {
| |
| background: rgba(255, 255, 255, 0.7) !important;
| |
| } | | } |
|
| |
|
| /* NAVIGATION BUTTONS */
| | @keyframes slide { |
| /* ALL: */
| | 20% { |
| .CSSgal >s:target ~ .bullets >* { background: rgba(255, 255, 255, 0.5);}
| | margin-left: 0px; |
| /* ACTIVE */
| | } |
| #s1:target ~ .bullets >*:nth-child(1) {background: rgba(255, 255, 255, 1);}
| |
| #s2:target ~ .bullets >*:nth-child(2) {background: rgba(255, 255, 255, 1);}
| |
| #s3:target ~ .bullets >*:nth-child(3) {background: rgba(255, 255, 255, 1);}
| |
| #s4:target ~ .bullets >*:nth-child(4) {background: rgba(255, 255, 255, 1);}
| |
| /* More slides? Add here more rules */
| |
| | |
| /* PREV/NEXT CONTAINERS VISIBILITY */
| |
| /* ALL: */
| |
| .CSSgal >s:target ~ .prevNext >* { visibility: hidden;}
| |
| /* ACTIVE: */
| |
| #s1:target ~ .prevNext >*:nth-child(1) {visibility: visible;}
| |
| #s2:target ~ .prevNext >*:nth-child(2) {visibility: visible;}
| |
| #s3:target ~ .prevNext >*:nth-child(3) {visibility: visible;}
| |
| #s4:target ~ .prevNext >*:nth-child(4) {visibility: visible;}
| |
| /* More slides? Add here more rules */
| |
| | |
| /* SLIDER ANIMATION POSITIONS */
| |
|
| |
|
| #s1:target ~ .slider {transform: translateX( 0%); -webkit-transform: translateX( 0%);}
| | 40% { |
| #s2:target ~ .slider {transform: translateX(-100%); -webkit-transform: translateX(-100%);}
| | margin-left: calc(-600px * 1); |
| #s3:target ~ .slider {transform: translateX(-200%); -webkit-transform: translateX(-200%);}
| | } |
| #s4:target ~ .slider {transform: translateX(-300%); -webkit-transform: translateX(-300%);}
| |
|
| |
|
| | 60% { |
| | margin-left: calc(-600px * 2); |
| | } |
|
| |
|
| .CSSgal{
| | 80% { |
| color: #fff; | | margin-left: calc(-600px * 3); |
| text-align: center;
| | } |
| }
| |
| .CSSgal .slider h2 {
| |
| margin-top: 40vh;
| |
| font-weight: 200;
| |
| letter-spacing: -0.06em; | |
| word-spacing: 0.2em;
| |
| font-size: 3em;
| |
| } | |
| .CSSgal span{
| |
| border-radius: 50%;
| |
| margin: 0 3px;
| |
| color: rgba(0,0,0,0.8);
| |
| text-decoration: none;
| |
| } | | } |