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

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

body {

font-family: 'Roboto Mono', monospace;

background: #a7a7a7;

    color: #ffeb3b;

    min-height: 510px;

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

/*** Beca ***/

.nav--beca {

position: absolute;

top: 50%;

left: 0;

margin: 0;

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

transform: translate3d(0,-50%,0);

}

.nav--beca .nav__item {

width: 5em;

height: 1.5em;

}

.nav--beca .nav__item::before {

content: '';

position: absolute;

top: 50%;

left: 0;

width: 50%;

height: 2px;

margin: -1px 0 0 0;

opacity: 0.5;

background: #fff;

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

transform: scale3d(0.5,1,1);

-webkit-transform-origin: 0% 50%;

transform-origin: 0% 50%;

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

transition: transform 0.5s, opacity 0.5s;

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

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

}

.nav--beca .nav__item:not(.nav__item--current):focus::before,

.nav--beca .nav__item:not(.nav__item--current):hover::before {

opacity: 1;

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

transform: scale3d(0.75,1,1);

}

.nav--beca .nav__item--current::before {

opacity: 1;

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

transform: scale3d(2,1,1);

}

.nav--beca .nav__item-title {

font-size: 1.25em;

font-weight: bold;

display: block;

overflow: hidden;

margin: -1.15em 0 0 1.6em;

text-align: left;

white-space: nowrap;

pointer-events: none;

}

.nav--beca .nav__item-title span {

display: block;

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

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

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

transition: transform 0.5s;

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

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

}

.nav--beca .nav__item--current .nav__item-title span {

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

transform: translate3d(0,0,0);

}