От автора: в этом уроке вы узнаете, как сделать интересные 3D прогресс бары с тенью с помощью CSS/Sass, а также как использовать свойство box-shadow и градиенты.
Сегодня мы хотим вас рассказать о том, как создавать прогресс бары на чистом CSS, да еще и в 3D. Пройдя этот урок по продвинутому CSS, вы узнаете об интересных свойствах, работающих с 3D графикой и методах затемнения. Создавая интерфейсы на чистом CSS, вы оттачиваете свое мастерство. А в этом уроке мы покажем вам, как создавать довольное сложные формы объектов, которые потом мы используем в прогресс барах.
Обратите внимание: Некоторые свойства CSS поддерживаются только современными браузерами. В IE все еще не поддерживается свойство transform-style: preserve-3d, которое используется для создания вложенных 3D структур. Ваш прогресс бар может оказаться просто плоским в IE.
Мы совместно с Compass использовали немного Sass. Вам необходимо установить его и, если вы не знаете, что это, ознакомиться с основами:
Мы будем использовать множество интереснейших свойств CSS, таких как transform, perspective и box-shadow. Также для экономии времени при создании скинов для прогресс баров и определения их позиции постоянно будем применять SASS. Добьемся легкой масштабируемости при помощи относительных единиц измерения (em и проценты).
Создаем стороны фигуры
Начнем с создания блока, который будет хранить в себе все шесть сторон. Это будет наш основной контейнер, он будет влиять на размер прогресс баров. Также необходимо использовать блок-обертку для создания перспективы. Свойство font-size оберточного блока поможет нам масштабировать прогресс бары в em единицах измерения.
К основному блоку необходимо применить свойство transform-style: preserve-3d, дабы убедиться, что все стороны входят в общее 3D пространство. Начнем наши стили с инициализации пары переменных для цветов:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$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 } |
Теперь позаботимся о сторонах. Если мы хотим без проблем изменять размер основного блока, то стороны должны быть резиновыми и абсолютно позиционированы.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.bar { // -> тут написаны стили .bar-face { display: inline-block; width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; background-color: rgba($light-gray, .6); // Чтобы видеть, что происходит } } |
Напишем саму разметку и проверим ее на доступность:
|
1 2 3 4 5 6 7 8 9 10 |
<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> |
Настраиваем стороны фигуры
Это очень важная часть, наши стороны должны быть правильно расположены, чтобы при их заполнении не возникли проблемы.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
.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); } } } |
|
1 2 3 4 5 6 7 8 9 10 |
<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> |
Неплохой куб получился, но нам нужен прямоугольник. Если вы внимательно читаете статью, то мы уже раньше сделали наши стороны фигуры резиновыми. Так что нам просто осталось увеличить ширину для класса .bar. В нашем примере мы сделаем 4em.
Создаем заполнитель
Процентные заполнители прогресс бара будут находиться внутри блоков сторон фигуры. А для поддержания чистоты в нашем HTML, мы воспользуемся псевдоклассом :before. Генерируемый контент будет двигаться рядом с растущей стороной фигуры и будет показывать ее ширину.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.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; } } } |
|
1 2 3 4 5 6 7 8 9 10 |
<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> |
Теперь осталось написать стили для каждого процента. Было бы утомительно делать все это вручную, писать сотню классов. Мы напишем цикл в Sass для получения значений атрибута aria-valuenow.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.bar { // -> SCSS .bar-face { // -> SCSS } @for $i from 0 to 101 { &[aria-valuenow='#{$i}'] { .percentage:before { width: $i * 1%; } } } } |
Создаем скины
Для создания скинов напишем пару миксинов. Поиграемся со свойством box-shadow, чтобы добиться более реалистичного вида. Данным свойством поддерживается массив значений, и с помощью этого массива мы сможем имитировать блики. Под прогресс баром создадим тень, а на лицевой стороне наоборот световые блики.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
@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 { // -> SCSS @include build-skin(#57caf4, 'cyan'); } |
|
1 2 3 4 5 6 7 8 9 10 |
<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> |
Нужно подсветить наши стороны. Если правильно расположить стороны фигуры, то произойдет чудо:
|
1 2 3 4 5 6 7 8 9 10 |
<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 (если мы его не трогаем). Так что, если разместить нижнюю сторону выше в порядке, то ее тень будет закрывать все задние стороны. Вот так мы и получили реалистичный вид для прогресс бара.
Ну вот и все! Посмотрите все демо и скачайте исходники. Попробуйте создать свой скин, чтобы потренироваться.
Автор: Rafael Gonzalez
Источник: //tympanus.net/
Редакция: Команда webformyself.
