Лента на CSS3 для оформления сайта без использования изображений - Сайт вебмастера
Меню сайта
Для Веб-Мастера Скрипты для сайта Онлайн игры Видео онлайн Картинки Заказать рекламу О нашем сайте Правила нашего сайта Обратная связь Карта сайта XML
Реклама
Наш опрос
Где сидел кузнечик в детской песни Н.Носова ?
Всего ответов: 1269
Статистика


Онлайн всего: 2
Гостей: 1
Пользователей: 1

Гости Пользователи
Дополнительно
Главная » Скрипты для сайта » Разные скрипты

Лента на CSS3 для оформления сайта без использования изображений

Хочешь сказать спасибо? Кликни на рекламный баннер.

24.07.2013, 22:29
Для создания ленты нам понадобится только тег 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; - цвет загнутой части. Цвет должен совпадать с цветом основной части ленты.

Размер и цвет настроите сами.





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

Источник материала: Неизвестен/Не указан
При коприровании материала просьба ставить ссылку на оригинальную статью.

Ссылка:
BB-код:
HTML-код:
Добавил: -angel- | Просмотров: 5901 | Загрузок: 0 | Рейтинг: 3.9/14
Теги: CSS, скрипт, оформление сайта, css лента, Лента, лента на css
Всего комментариев: 0
ВНИМАНИЕ !!!
Добавлять комментарии могут только зарегестрированные пользователи!
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
А знаете ли Вы, что ...

В 1880 году кокаин свободно продавался для лечения простуды, невралгии, головной боли и бессонницы.


Реклама
Популярные материалы
Наша кнопка
Мы будем вам признательны, если вы разместите нашу кнопку у себя на сайте:

Скрипты для сайта

Друзья сайта