Сегодня мы хотели бы показать вам, как создать некоторые прогресс-бары CSS с особым 3D-видом. Рассмотрим этот урок CSS упражнений. Он вам даст вам представление о многих интересных 3D-свойствах и метододах затемнения. Создание компонентов пользовательского интерфейса, используя только CSS мы тренируем вашу способность представлять вне каких-либо стандартов. В этом уроке мы покажем вам некоторые трюки, как создать более сложную форму элемента и использовать его в качестве индикатора выполнения.
Мы будем использовать Sass (вместе с Compass) в этом уроке, поэтому убедитесь, что он настроен и вы знаете основы:
Если вы хотите использовать полноценное решение для анимированных прогресс баров, вы должны посмотреть ProgressBar.JS по Kimmo Brunfeldt или PACES HubSpot для страницы прогресс-бар загрузки.
Для генерации всех необходимых префиксов вы можете использовать что-то вроде Autoprefixer или плагин для Sublime Text.
Мы будем использовать много интересных свойств CSS, таких как transform, perspective и box-shadow. Мы также будем широко использовать SASS для экономии времени при создании позиций и скинов баров. Используя относительные размеры (em, проценты), мы гарантируем, что наши индикаторы прогресса легко изменяются.
Построение граней
Начнем с построения оболочки, которая будет содержать все шесть граней. Эта оболочка будет работать как наш главный контейнер. Мы также будем использовать свойство размера шрифта этой оболочки, это нам позволит масштабировать индикатор выполнения с помощью некоторой магии единиц измерения em.
Чтобы убедиться, что все грани являются частью нашего 3D пространства, нам нужно применить transform-style: preserve-3d к оболочке.
Итак, давайте начнем писать наши стили, инициируя некоторые цветовые переменные:
$light-gray: #e0e0e0;
$magenta: #ec0071;
$white: #f5f5f5;
.perspective {
font-size: 5em; // sets the main scale size
perspective: 12em; // sets the perspective
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 {
// -> The SCSS written before
.bar-face {
display: inline-block;
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
background-color: rgba($light-gray, .6); // just to see what is happening
}
}
Давайте напишем нашу разметку:
<div class="perspective"> <div class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> <div class="bar-face"></div> <div class="bar-face"></div> <div class="bar-face"></div> <div class="bar-face"></div> <div class="bar-face"></div> <div class="bar-face"></div> </div> </div>
Настройка граней
Это очень важная часть. Отображаемая часть нашего прогресс-бара должна быть хорошо ориентирована, чтобы у нас было меньше ошибок, когда начинаем добавлять процентные заливки.
.bar {
// -> The SCSS from before
.bar-face {
// -> The SCSS from before
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);
}
}
}
<div class="perspective">
<div class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<div class="bar-face roof"></div>
<div class="bar-face front"></div>
<div class="bar-face left"></div>
<div class="bar-face right"></div>
<div class="bar-face back"></div>
<div class="bar-face floor"></div>
</div>
</div>
Отлично, это хороший куб, но мы хотим построить прямоугольник для нашего бара. Если вы помните, мы уже построили отображение таким образом, чтобы они были резиновыми. Для этого примера мы использовали ширину 4ем.
Построение процентных Заливок
Процент заполнения будет содержаться внутри наших контейнеров, чтобы сохранить наш HTML-код минимальным, мы будем использовать псевдо-класс: before. Это генерируется: прежде чем элемент будет расти, чтобы показать процент по отношению к ширине его контейнера.
.bar {
// -> The SCSS from before
.bar-face {
// -> The SCSS from before
&.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;
}
}
}
<div class="perspective">
<div class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<div class="bar-face roof percentage"></div>
<div class="bar-face front percentage"></div>
<div class="bar-face left"></div>
<div class="bar-face right"></div>
<div class="bar-face back percentage"></div>
<div class="bar-face floor percentage"></div>
</div>
</div>
Теперь нам нужно написать стиль процентной заливки. Было бы утомительно писать сто классов вручную, поэтому давайте напишем какой-нибудь хитрый цикл, чтобы получить все значения для атрибута aria-valuenow из нашего HTML.
.bar {
// -> The SCSS from before
.bar-face {
// -> The SCSS from before
}
@for $i from 0 to 101 {
&[aria-valuenow='#{$i}'] {
.percentage:before {
width: $i * 1%;
}
}
}
}
Построение отображения
Для создания наших элементов мы будем использовать Sass-mixin. Чтобы получить реалистичный вид, мы будем играть со свойством box-shadow. Это свойство поддерживает массив значений, и этот массив позволит эмулировать освещение. Мы включим тень пола и освещение спереди этого элемента.
@mixin build-skin($color, $name) {
&.#{$name} {
.floor {
box-shadow:
0 -0.2em 1em rgba(0,0,0,.15),
0 0.2em 0.1em -5px rgba(0,0,0,.3),
0 -0.75em 1.75em rgba($white,.6);
}
.left {
background-color: rgba($color, .5);
}
.percentage:before {
background-color: rgba($color, .5);
box-shadow: 0 1.6em 3em rgba($color,.25);
}
}
}
.bar {
// -> The SCSS from before
@include build-skin(#57caf4, 'cyan');
}
<div class="perspective">
<div class="bar cyan" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="bar-face roof percentage"></div>
<div class="bar-face front percentage"></div>
<div class="bar-face left"></div>
<div class="bar-face right"></div>
<div class="bar-face back percentage"></div>
<div class="bar-face floor percentage"></div>
</div>
</div>
Кроме того, нам нужен трюк, чтобы осветить спереди наш элемент. Если мы введем узлы DOM нашего элемента в правильном порядке, мы увидим, что происходит магия:
<div class="perspective">
<div class="bar cyan" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="bar-face roof percentage"></div>
<div class="bar-face back percentage"></div>
<div class="bar-face floor percentage"></div>
<div class="bar-face left"></div>
<div class="bar-face right"></div>
<div class="bar-face front percentage"></div>
</div>
</div>
Что здесь произошло? Это просто: в то время как браузер отображает абсолютный элемент, он добавляет автоматически увеличенный z-index по умолчанию (если мы не редактируем это свойство). Итак, если мы изменим порядок рендеринга, поставив первым, его тень будет поверх всех граней задней стороны. Вот как мы можем применить реалистичное затемнение.
И это все, что есть в этом практическом маленьком прогресс-баре! Теперь, убедитесь, проверьте демо и файлы, и начните строить свои собственные скины, чтобы тренировать свои навыки.