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

ساخت وبلاگ

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

body {

font-family: 'Roboto Mono', monospace;

background: #f44336;

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

/*** Zahi ***/

.nav--zahi .nav__item {

width: 2em;

height: 2em;

}

.nav--zahi .nav__item::before,

.nav--zahi .nav__item::after {

content: '';

position: absolute;

}

.nav--zahi .nav__item:not(:last-child)::before {

top: calc(2em - 9px);

left: 5px;

width: 2px;

height: calc(2em - 12px);

background: #98322a;

}

.nav--zahi .nav__item::after {

top: 50%;

left: 0;

width: 12px;

height: 12px;

margin: -5px 0 0 0;

border: 2px solid #98322a;

border-radius: 50%;

background: #f44336;

-webkit-transition: -webkit-transform 0.3s, border-color 0.3s, border-width 0.3s, background 0.3s;

transition: transform 0.3s, border-color 0.3s, border-width 0.3s, background 0.3s;

}

.nav--zahi .nav__item--current::after {

border-width: 1px;

border-color: #fff;

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

transform: scale3d(1.6,1.6,1);

}

.nav--zahi .nav__item:not(.nav__item--current):focus::after,

.nav--zahi .nav__item:not(.nav__item--current):hover::after {

border-color: #fff;

background: #fff;

}

.nav--zahi .nav__item-title {

font-family: 'Roboto Condensed', sans-serif;

line-height: 1.5;

display: block;

position: relative;

padding: 0 0 0 2.5em;

white-space: nowrap;

opacity: 0.3;

color: #98322a;

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

transition: opacity 0.3s, color 0.3s;

}

.nav--zahi .nav__item:not(.nav__item--current):focus .nav__item-title,

.nav--zahi .nav__item:not(.nav__item--current):hover .nav__item-title {

opacity: 0.5;

}

.nav--zahi .nav__item--current .nav__item-title {

opacity: 1;

color: #fff;

}

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

برچسب : استایل زیبا برای فتوشاپ,استایل زیبا برای نظرات وردپرس,استایل زیبا برای پاورپوینت,استایل زیبا برای جدول,استایل زیبا برای سایت,استایل زیبا برای جدول در css,استایل های زیبا برای فتوشاپ,دانلود استایل زیبا برای فتوشاپ,کد استایل زیبا برای سایت,دانلود استایل های زیبا برای فتوشاپ, نویسنده : استخدام کار 7learn بازدید : 234 تاريخ : پنجشنبه 1 مهر 1395 ساعت: 10:19

خبرنامه