Як зробити 3D прогрес бари з тінню на CSS/Sass

17

Від автора: у цьому уроці ви дізнаєтеся, як зробити цікаві 3D прогрес бари з тінню за допомогою CSS/Sass, а також як використовувати властивість box-shadow і градієнти.

Як зробити 3D прогрес бари з тінню на CSS/Sass

Як зробити 3D прогрес бари з тінню на CSS/SassЯк зробити 3D прогрес бари з тінню на CSS/Sass

Сьогодні ми хочемо вас розповісти про те, як створювати прогрес бари на чистому CSS, та ще й в 3D. Пройшовши цей урок по просунутому CSS, ви дізнаєтеся про цікаві властивості, які працюють з 3D графікою і методи затемнення. Створюючи інтерфейси на чистому CSS, ви оттачиваете свою майстерність. А в цьому уроці ми покажемо вам, як створювати достатньо складні форми об’єктів, які потім ми використовуємо в прогрес барах.

Зверніть увагу: Деякі властивості CSS підтримуються тільки сучасними браузерами. В IE все ще не підтримується властивість transform-style: preserve-3d, яке використовується для створення вкладених 3D структур. Ваш прогрес бар може виявитися просто плоским в IE.

Ми спільно з Compass використовували трохи Sass. Вам необхідно встановити його і, якщо ви не знаєте, що це, ознайомитися з основами:

Встановити Sass і Основи з Sass

Встановити фреймворк Compass і Compass CSS3

Ми будемо використовувати безліч цікавих властивостей CSS, таких як transform, perspective і box-shadow. Також для економії часу при створенні скінів для прогрес барів та визначення їх позиції постійно будемо застосовувати SASS. Доб’ємося легкої масштабованості за допомогою відносних одиниць вимірювання (em і відсотки).

Створюємо боку фігури

Почнемо зі створення блоку, який буде зберігати в собі всі шість сторін. Це буде наш основний контейнер, він буде впливати на розмір прогрес барів. Також необхідно використовувати блок-обгортку для створення перспективи. Властивість font-size оберточного блоку допоможе нам масштабувати прогрес бари в em одиницях виміру.

До основного блоку необхідно застосувати властивість transform-style: preserve-3d, щоб переконатися, що всі сторони входять у загальне 3D простір. Почнемо наші стилі з ініціалізації пари змінних для квітів:

$light-gray: #e0e0e0;
$magenta: #ec0071;
$white: #f5f5f5;
.perspective {
font-size: 5em; // основний розмір
perspective: 12em; // перспектива
perspective-origin: 50% 50%;
text-align: center;
}
.bar {
display: inline-block;
width: 1em;
height: 1em;
margin-top: 1em;
position: relative;
transform: rotateX(60deg); // sets the view point
transform-style: preserve-3d; // perspective for the children
}

Тепер подбаємо про сторонах. Якщо ми хочемо без проблем змінювати розмір основного блоку, то сторони повинні бути гумовими і абсолютно позиціоновані.

.bar {
// -> тут написані стилі
.bar-face {
display: inline-block;
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
background-color: rgba($light-gray, .6); // Щоб бачити, що відбувається
}
}

Напишемо саму розмітку і перевіримо її на доступність:

Налаштовуємо боку фігури

Це дуже важлива частина, наші сторони повинні бути правильно розташовані, щоб при їх заповненні не виникли проблеми.

.bar {
// -> Тут були SCSS стилі
.bar-face {
// -> Тут був SCSS
transform-origin: 50% 100%;
&.roof {
transform: translateZ(1em);
}
&.front {
transform: rotateX(-90deg);
}
&.right {
left: auto;
right: -.5em;
width: 1em;
transform: rotateX(-90deg) rotateY(90deg) translateX(.5em);
}
&.back {
transform: rotateX(-90deg) rotateY(0deg) translateZ(-1em);
}
&.left {
width: 1em;
transform: rotateX(-90deg)rotateY(-90deg) translateX(-.5em) translateZ(.5em);
}
}
}

Як зробити 3D прогрес бари з тінню на CSS/Sass

Непоганий куб вийшов, але нам потрібний прямокутник. Якщо ви уважно читаєте статтю, то ми вже раніше зробили наші боку фігури гумовими. Так що нам просто залишилося збільшити ширину для класу .bar. У нашому прикладі ми зробимо 4em.

Як зробити 3D прогрес бари з тінню на CSS/Sass

Створюємо заповнювач

Процентні заповнювачі прогрес бару будуть знаходитися всередині блоків сторін фігури. А для підтримки чистоти в нашому HTML, ми скористаємося псевдоклассом :before. Генерований контент буде рухатися поруч зі зростаючою стороною фігури і буде показувати її ширину.

.bar {
// -> SCSS
.bar-face {
// -> SCSS
&.percentage:before {
content: «;
display: block;
position: absolute;
bottom: 0;
width: 0;
height: 100%;
margin: 0;
background-color: rgba($magenta, .8);
transition: width .6s ease-in-out;
}
}
}

Як зробити 3D прогрес бари з тінню на CSS/Sass

Тепер залишилося написати стилі для кожного відсотка. Було б важко робити це вручну, писати сотню класів. Ми напишемо цикл в Sass для отримання значень атрибута aria-valuenow.

.bar {
// -> SCSS
.bar-face {
// -> SCSS
}
@for $i from 0 to 101 {
&[aria-valuenow=’#{$i}’] {
.percentage:before {
width: $i * 1%;
}
}
}
}

Створюємо скіни

Для створення скінів напишемо пару миксинов. Пограємося з властивістю box-shadow, щоб домогтися більш реалістичного вигляду. Даними властивостями підтримується масив значень, і з допомогою цього масиву ми зможемо імітувати відблиски. Під прогрес баром створимо тінь, а на лицьовій стороні навпаки світлові відблиски.

@mixin build-skin($color, $name) {
&.#{$name} {
.floor {
box-shadow:
0 -0.2 em 1em rgba(0,0,0,.15),
0 0.2 em 0.1 em -5px rgba(0,0,0,.3),
0 -0.75 em 1.75 em rgba($white,.6);
}
.left {
background-color: rgba($color, .5);
}
.percentage:before {
background-color: rgba($color, .5);
box-shadow: 0 1.6 em 3em rgba($color,.25);
}
}
}
.bar {
// -> SCSS
@include build-skin(#57caf4, ‘cyan’);
}

Як зробити 3D прогрес бари з тінню на CSS/Sass

Потрібно підсвітити наші сторони. Якщо правильно розташувати боку фігури, то станеться диво:

Як зробити 3D прогрес бари з тінню на CSS/Sass

Отже, що ж, власне, сталося? Все просто: Коли браузер малює абсолютно які позиціюють себе елементи, то для кожного наступного елемента збільшується значення властивості z-index (якщо ми його не чіпаємо). Так що, якщо розмістити нижню сторону вище в порядку, то її тінь буде закривати всі задні сторони. Ось так ми і отримали реалістичний вигляд для прогрес бару.

Ну ось і все! Подивіться всі демо і скачайте исходники. Спробуйте створити свій скін, щоб потренуватися.