Від автора: у цьому уроці ви дізнаєтеся, як зробити цікаві 3D прогрес бари з тінню за допомогою CSS/Sass, а також як використовувати властивість box-shadow і градієнти.
Сьогодні ми хочемо вас розповісти про те, як створювати прогрес бари на чистому 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);
}
}
}
Непоганий куб вийшов, але нам потрібний прямокутник. Якщо ви уважно читаєте статтю, то ми вже раніше зробили наші боку фігури гумовими. Так що нам просто залишилося збільшити ширину для класу .bar. У нашому прикладі ми зробимо 4em.
Створюємо заповнювач
Процентні заповнювачі прогрес бару будуть знаходитися всередині блоків сторін фігури. А для підтримки чистоти в нашому 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;
}
}
}
Тепер залишилося написати стилі для кожного відсотка. Було б важко робити це вручну, писати сотню класів. Ми напишемо цикл в 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’);
}
Потрібно підсвітити наші сторони. Якщо правильно розташувати боку фігури, то станеться диво:
Отже, що ж, власне, сталося? Все просто: Коли браузер малює абсолютно які позиціюють себе елементи, то для кожного наступного елемента збільшується значення властивості z-index (якщо ми його не чіпаємо). Так що, якщо розмістити нижню сторону вище в порядку, то її тінь буде закривати всі задні сторони. Ось так ми і отримали реалістичний вигляд для прогрес бару.
Ну ось і все! Подивіться всі демо і скачайте исходники. Спробуйте створити свій скін, щоб потренуватися.
