استایل زیبا برای نشان دهنده اسلایدرها - Navigation Indicators ( نمونه 16)

*, *::after, *::before { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; }

body {

font-family: 'Roboto Mono', monospace;

background: #d2f1ca;

color: #e54f4f;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

button, html input[type="button"], input[type="reset"], input[type="submit"] {

-webkit-appearance: button;

cursor: pointer;

}

.hidden {

position: absolute;

overflow: hidden;

width: 0;

height: 0;

pointer-events: none;

}

.section {

display: -webkit-flex;

display: flex;

-webkit-flex-direction: column;

flex-direction: column;

-webkit-justify-content: center;

justify-content: center;

-webkit-align-items: center;

align-items: center;

}

.section--nav {

position: relative;

overflow: hidden;

-webkit-flex-direction: row-reverse;

flex-direction: row-reverse;

}

.section__title {

font-size: 0.65em;

font-weight: 700;

-webkit-flex: none;

flex: none;

margin: 3em 0 15em;

text-indent: 3px;

letter-spacing: 3px;

text-transform: uppercase;

color: #d1d1d1;

}

.section.section--intro {

font-size: 1.6em;

position: relative;

min-height: 100vh;

text-align: center;

color: #fff;

background: #333;

}

.section--intro p {

max-width: 1000px;

margin: 0 auto;

padding: 1em;

}

/* Mockup Slider */

.mockup-slider {

position: relative;

width: calc(100% - 12em);

margin: 0 0 0 2em;

max-width: 600px;

}

.mockup-slider::before,

.mockup-slider::after {

content: '';

width: 100%;

background: rgba(0,0,0,0.05);

height: 100px;

position: absolute;

top: 0;

}

.mockup-slider::after {

top: auto;

bottom: 0;

}

.mockup-slider img {

position: relative;

display: block;

max-width: 100%;

margin: 150px 0;

box-shadow: 0 10px 20px -4px rgba(0,0,0,0.6);

}

.mockup-slider__title {

position: absolute;

font-size: 3em;

bottom: 30%;

left: -0.5em;

font-weight: normal;

margin: 0;

}

.mockup-slider__subtitle {

position: absolute;

top: 70%;

left: -1em;

background: #1b3050;

margin: 0;

color: #fff;

font-size: 1.05em;

padding: 0.25em 0.5em;

z-index: 100;

}

/* General styles */

.nav {

position: relative;

width: 8em;

margin: 0 0 0 3em;

}

.nav__item {

line-height: 1;

position: relative;

display: block;

margin: 0;

padding: 0;

letter-spacing: 0;

color: currentColor;

border: 0;

background: none;

-webkit-tap-highlight-color: rgba(0,0,0,0);

}

.nav__item:focus {

outline: none;

}

/* Individual styles */

/* Kafa */

.nav--kafa .nav__item {

margin: 0.5em 0;

}

.nav--kafa .nav__item--current {

pointer-events: none;

}

.nav--kafa .nav__item-ier {

display: block;

overflow: hidden;

width: 2.85em;

height: 2.85em;

opacity: 0.6;

border-radius: 50%;

background: #b5daab;

-webkit-transform: scale3d(0.65,0.65,1);

transform: scale3d(0.65,0.65,1);

-webkit-transition: -webkit-transform 0.5s, opacity 0.3s;

transition: transform 0.5s, opacity 0.3s;

-webkit-animation-timing-function: cubic-bezier(0.2,1,0.3,1);

animation-timing-function: cubic-bezier(0.2,1,0.3,1);

}

.nav--kafa .nav__item:not(.nav__item--current):focus .nav__item-ier,

.nav--kafa .nav__item:not(.nav__item--current):hover .nav__item-ier {

opacity: 1;

}

.nav--kafa .nav__item--current .nav__item-ier {

opacity: 1;

-webkit-transform: scale3d(1,1,1);

transform: scale3d(1,1,1);

}

.nav--kafa .nav__item-img {

display: block;

width: 2.5em;

margin: 0.5em auto 0;

-webkit-transform: translate3d(0,100%,0);

transform: translate3d(0,100%,0);

-webkit-transition: -webkit-transform 0.5s;

transition: transform 0.5s;

-webkit-animation-timing-function: cubic-bezier(0.2,1,0.3,1);

animation-timing-function: cubic-bezier(0.2,1,0.3,1);

}

.nav--kafa .nav__item--current .nav__item-img {

-webkit-transform: translate3d(0,0,0);

transform: translate3d(0,0,0);

}

.nav--kafa .nav__item-title {

font-weight: bold;

line-height: 2.85em;

position: absolute;

top: 0;

left: 3.75em;

white-space: nowrap;

pointer-events: none;

opacity: 0;

-webkit-transform: translate3d(-15px,0,0);

transform: translate3d(-15px,0,0);

-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;

transition: transform 0.5s, opacity 0.5s;

-webkit-animation-timing-function: cubic-bezier(0.2,1,0.3,1);

animation-timing-function: cubic-bezier(0.2,1,0.3,1);

}

.nav--kafa .nav__item--current .nav__item-title {

opacity: 1;

-webkit-transform: translate3d(0,0,0);

transform: translate3d(0,0,0);

}