Создание объемной ленты с помощью CSS3
Многие разработчики добиваются эффекта трехмерности на своих вебсайтах, используя изображения (особенно на заднем фоне), линии и некоторые 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 треугольник, тени и закругленные углы.
Теперь создадим простое меню с помощью списка, к каждому элементу которого применим свойство transform
-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg);
Чтобы вы представляли как это будет выглядеть – посмотрите на конечный результат:
Весь пример состоит из двух простых файлов index.html и style.css. Вот как выглядит код HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS Ribbon</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div class="menu"> <ul> <li class="l1"><a href="#">CSS3</a></li> <li class="l2"><a href="#">может</a></li> <li class="l3"><a href="#">все</a></li> </ul> </div> <div class="bubble"> <div class="rectangle"><h2>3D CSS Лента</h2></div> <div class="triangle-l"></div> <div class="triangle-r"></div> <div class="info"> <h2>Мы использовали только CSS!</h2> <p> Для этого туториала мы использовали только свойства CSS3. Вы можете реализовать прекрасный 3D эффект используя только CSS, это просто фантастично.<br />Не работает только в IE! </p> </div> </div> </div> </body> </html>
Для облегчения понимания изобразим блоки графически:
Стили приводить не будем, т.к. разобрали их по фрагментам выше. Стоит упомянуть, что код получается стопроцентно валидным и не заметить всю красоту можно только в Internet Explorer. Но это нормально.
Удачного вам эксперимента!
Последние уроки категории:
Css техники для новичков
CSS - простая, мощная и легкая для использования техника. Но, несмотря на свою простоту, в ней скрывается немало возможностей. Если спросить любого дизайнера, то он скажет, что основной источник проблем с кодом и их решений скрывается в CSS.
Создание объемной ленты с помощью CSS3
Меню в стиле Mac на CSS3
Создаем кнопку с помошью CSS3
Комментарии:
vl092 08.04.2012 12:45:24