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

ساخت وبلاگ

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

body {

font-family: 'Roboto Mono', monospace;

background: #3992fd;

color: #fff;

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

/* Totit */

.nav--totit .nav__item {

width: 2.5em;

height: 2.5em;

margin: 0.5em 0;

}

.nav--totit .nav__item::before {

content: '';

position: absolute;

top: 50%;

left: 50%;

width: 0.65em;

height: 0.65em;

margin: -0.325em 0 0 -0.325em;

border-radius: 50%;

background: #fff;

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

transition: transform 0.3s, 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--totit .nav__item:not(.nav__item--current):focus::before,

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

opacity: 0.6;

}

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

opacity: 0;

-webkit-transform: translate3d(0,1.5em,0) scale3d(0,0,1);

transform: translate3d(0,1.5em,0) scale3d(0,0,1);

}

.nav--totit .nav__icon {

z-index: 100;

display: block;

width: 100%;

height: 100%;

margin: 0 auto;

opacity: 0;

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

transform: scale3d(0,0,1);

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

transform-origin: 50% 100%;

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

transition: transform 0.3s, 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);

fill: #0b64ce;

}

.nav--totit .nav__item--current .nav__icon {

opacity: 1;

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

transform: scale3d(1,1,1);

}

.nav--totit .nav__item-title {

font-weight: bold;

line-height: 2.5em;

position: absolute;

top: 0;

left: 3em;

white-space: nowrap;

pointer-events: none;

opacity: 0;

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

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

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

transition: transform 0.3s, 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--totit .nav__item--current .nav__item-title {

opacity: 1;

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

transform: translate3d(0,0,0);

-webkit-transition-delay: 0.15s;

transition-delay: 0.15s;

}

سون لرن • آموزش...
ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : استایل زیبا برای فتوشاپ,استایل زیبا برای نظرات وردپرس,استایل زیبا برای پاورپوینت,استایل زیبا برای جدول,استایل زیبا برای سایت,استایل زیبا برای جدول در css,استایل های زیبا برای فتوشاپ,دانلود استایل زیبا برای فتوشاپ,کد استایل زیبا برای سایت,دانلود استایل های زیبا برای فتوشاپ, نویسنده : استخدام کار 7learn بازدید : 519 تاريخ : شنبه 17 مهر 1395 ساعت: 15:37

خبرنامه