Создание объемной ленты с помощью CSS3 » Techno-Co — Всё для вебмастера, для создание сайтов с нуля. {title}

20.04.2015
Без рубрики

Многие разработчики добиваются эффекта трехмерности на своих вебсайтах, используя изображения (особенно на заднем фоне), линии и некоторые CSS техники, помогающие создать иллюзию объемного пространства. Мы постараемся это реализовать используя только CSS и HTML.

НИКАКИХ КАРТИНОК

Есть несколько свойств CSS, которые помогут нам выполнить поставленную задачу. Мы будем использовать box-shadow, для создания тени с RGBa, цветовой моделью, которая будет нормально отображаться на любом бэкграунде. RGBa – это стандартная цветовая модель RGB(0,0,0 – 255,255,255) плюс прозрачность.

background: rgba(196,89,30,0.65);
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);

Другое свойство, которое мы будем использовать border-radius, с которым мы давно знакомы

-moz-border-radius: 10px; /*radius of 10px*/
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;

Также мы будем использовать особенный бордер для создания треугольника – загиба ленты. Ниже представлен код для треугольника в виде стрелки:

.triangle {
    border-color: transparent #7d90a3 transparent transparent;
    border-style:solid;
    border-width:15px;
    height:0px;
    width:0px;
}

Итак, что мы имеем. Во-первых, заданная с помощью CSS стрелка-треугольник, являющаяся загибом ленты и тем самым придающая ей трехмерный объем. Во-вторых, box-shadow – тень нашей ленты. В-третьих, border-radius с помощью которого мы будем закруглять необходимые элементы. По картинке ниже можно проследить, как мы будем использовать CSS треугольник, тени и закругленные углы.

Теперь создадим простое меню с помощью списка, к каждому элементу которого применим свойство transform1

-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);

Чтобы вы представляли как это будет выглядеть – посмотрите на конечный результат: Весь пример состоит из двух простых файлов index.html и style.css. Вот как выглядит код HTML:





        CSS Ribbon

3D CSS Лента

Мы использовали только CSS!

                    

                    Для этого туториала мы использовали только свойства CSS3.
                    Вы можете реализовать прекрасный 3D эффект используя только CSS,
                    это просто фантастично.
Не работает только в IE!

Для облегчения понимания изобразим блоки графически: Стили приводить не будем, т.к. разобрали их по фрагментам выше. Стоит упомянуть, что код получается стопроцентно валидным и не заметить всю красоту можно только в Internet Explorer. Но это нормально.

Удачного вам эксперимента!