Как сделать ленты на CSS3 без картинок

Как сделать ленты на CSS3 без картинок

Открыть меню     Главная Статьи Карта сайта Сниппеты Контакты Demo

Существует несколько свойств css3, которые позволят нам создать трехмерный элемент без использования изображений. Мы будем использовать свойство box-shadow с RGBa; цветовая модель (RGBa) позволит нам регулировать цвет фона (background).

RGBа – это стандартная RGB (0,0,0 – 255 255 255) модель плюс опция (a), которая определяет непрозрачность. Мы можем использовать эту модель для любых свойств, хотя эти свойства будут работать только в новых браузерах.

CSS

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-radus, оно позволит нам создать закругленные углы для блочных, и не только, элементов.

CSS

-moz-border-radius: 10px; -khtml-border-radius: 10px; -khtml-border-radius: 10px;

Мы также будем использовать специфичные свойства границы (border), чтобы создать треугольники к нашей ленте (смотрите рисунок ниже).

CSS

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

Пример треугольника:

Стрелка поможет нам создать 3d-эффект для ленты. Свойство box-shadow определит тень, которая создаст глубину для ленты. Свойство border-radus позволит нам создать закругленные углы там, где это необходимо.

Взгляните на изображение ниже, чтобы понять, как мы будем использовать стрелку, тени и закругленные углы.

3d-эффект без использования изображений. Тлько CSS3

Ниже вы можете увидеть результат наших усилий. Также можете скачать архив и посмотреть demo.

лента css

demo

По материалам сайта www.pvmgarage.com Как сделать трехмерную ленту, используя только свойства CSS3.

Комментарии к статье

  • Категории
  • Архив
Как сделать ленты на CSS3 без картинок 58
CSS слайдер / Хабрахабр
Как сделать ленты на CSS3 без картинок 24
Как сделать RSS
Как сделать ленты на CSS3 без картинок 1
Можно ли сделать с помощью HTMLCSS ленту из стрелок
Как сделать ленты на CSS3 без картинок 76
Как сделать трехмерный элемент без изображений
Как сделать ленты на CSS3 без картинок 94
Как сделать блоки со слайдер эффектом на чистом CSS3
Как сделать ленты на CSS3 без картинок 51
Как сделать свою полосу прокрутки для сайта RUDEBOX
Как сделать ленты на CSS3 без картинок 7
Детальное описание верстки горизонтального меню joomla
Как сделать ленты на CSS3 без картинок 12
Как сделать красивую CSS ленту (ribbons) для
Как сделать ленты на CSS3 без картинок 9
Полоса прокрутки. Учебник CSS
Как сделать ленты на CSS3 без картинок 87
Беседка из бревна для дачи - фото вариантов и строительство
Как сделать ленты на CSS3 без картинок 8
Как сделать ленты на CSS3 без картинок 46
Как сделать ленты на CSS3 без картинок 89
Как сделать ленты на CSS3 без картинок 96
Как сделать ленты на CSS3 без картинок 45
Как сделать ленты на CSS3 без картинок 9
Как сделать ленты на CSS3 без картинок 88
Как сделать ленты на CSS3 без картинок 86