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

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

body {

font-family: 'Roboto Mono', monospace;

background: #f7f5ed;

color: #d6856d;

-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 */

/* Aman */

.nav--aman {

font-size: 1.5em;

margin: 0 0 0 1em;

padding: 0 0 0 1em;

}

.nav--aman .nav__item {

width: 48px;

height: 48px;

opacity: 0.8;

background: url(image.svg) no-repeat 50% 50%;

background-size: auto 50%;

-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--aman .nav__item:not(.nav__item--current):focus,

.nav--aman .nav__item:not(.nav__item--current):hover {

opacity: 1;

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

transform: scale3d(1.25,1.25,1);

}

.nav--aman .nav__item--current {

pointer-events: none;

opacity: 1;

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

transform: scale3d(1.85,1.85,1);

}

.nav--aman .nav__pointer {

position: absolute;

top: 0;

left: 0;

width: 2em;

height: 2em;

margin: 0.45em 0 0 1.25em;

-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--aman .nav__item--current:nth-child(2) ~ .nav__pointer {

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

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

}

.nav--aman .nav__item--current:nth-child(3) ~ .nav__pointer {

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

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

}

.nav--aman .nav__item--current:nth-child(4) ~ .nav__pointer {

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

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

}

.nav--aman .nav__item--current:nth-child(5) ~ .nav__pointer {

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

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

}

.nav--aman .nav__icon {

display: block;

width: 90%;

height: 90%;

fill: #94938a;

}