Главная » 2014 » Май » 5 » Лента на CSS3 для оформления текста (Скрипты для ucoz)
05.05.2014, 20:51

Лента на CSS3 для оформления текста




Для создания ленты нам понадобится только тег h2. Для получения эффекта ленты мы используем псевдоэлементы :before и :after.
Для простых лент можно использовать CSS, чтобы уменьшить количество загружаемых изображений в браузере пользователя.
Лента будет отображаться во всей своей красоте только в современных браузерах, поддерживающих CSS3. В старых браузерах будет простая полоса, выходящая за пределы страницы сайта.
Структура очень простая. Текст заключённый в тег <h2> будет выводиться в виде ленты:
Код
<div class="ribbon">  
<h2 class="simple">Лента на CSS3</h2>  
  <p>Эффект ленты снова в моде. Для создания ленты нам понадобится только тег <h2> </p>  

<h2>Использование</h2>  
  <p>Такой элемент дизайна можно использовать для меню, фона, заголовков и других частей.</p>  

<h2>Плюсы и минусы</h2>  
  <p>Для простых лент вполне можно использовать CSS, чтобы уменьшить количество загружаемых в браузер пользователя изображений.  
Лента будет отображаться в современных браузерах, поддерживающих CSS3.</p>  
</div>


И стиль CSS:

Код
.ribbon{  
width: 70%;  
padding: 55px;  
margin: 0 auto;  
background-color: #fff;  
border: 1px solid #333;  
border-radius: 6px;  
-webkit-border-radius: 6px;  
-moz-border-radius: 6px;}  

h2 {  
position: relative;  
width: 50%;  
font-size: 1.5em;  
font-weight: bold;  
padding: 6px 20px 6px 70px;  
margin: 30px 10px 10px -75px;  
color: #000000;  
background-color: #B14444;  
text-shadow: 0px 1px 2px #bbb;  
-webkit-box-shadow: 0px 2px 4px #888;  
-moz-box-shadow: 0px 2px 4px #888;  
box-shadow: 0px 2px 4px #888;}  

h2:after {  
content: ' ';  
position: absolute;  
width: 0;  
height: 0;  
left: 0px;  
top: 100%;  
border-width: 5px 10px;  
border-style: solid;  
border-color: #666 #666 transparent transparent;}  

h2:before {  
content: ' ';  
position: absolute;  
width: 30px;  
height: 0;  
left: -30px;  
top: 12px;  
border-width: 20px 10px;  
border-style: solid;  
border-color: #B14444 #B14444 #B14444 transparent;}  
   
h2.simple:before {display: none;}


background-color: #B14444; - цвет ленты
border-color: #B14444 #B14444 #B14444 transparent; - цвет загнутой части. Цвет должен совпадать с цветом основной части ленты.

Размер и цвет настроите сами.
Материал взят с сайта infoscript.ru
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: Неизвестен
Категория: Скрипты uCoz | Просмотров: 1455 | Добавил: sold93 | Рейтинг: 4.0/1 |
Теги: оформления, текст, на, css3, для, лента
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]