• Страница 1 из 1
  • 1
Форум Сталкер » Web-раздел » Скачать скрипты для сталкера » Лента на CSS3 без использования изображений Для UCOZ
Лента на CSS3 без использования изображений Для UCOZ
XemorDioДата: Понедельник, 04.04.2016, 12:59 | Сообщение # 1
Генерал-полковник
Группа: Пользователи
Сообщений: 897
Награды: 7
Репутация: 8
Статус: Offline



Описание Web разработки: Для создания ленты нам понадобится только тег h2. Для получения эффекта ленты мы используем псевдоэлементы :before и :after. Для простых лент можно использовать CSS, чтобы уменьшить количество загружаемых изображений в браузере пользователя. Лента будет отображаться во всей своей красоте только в современных браузерах, поддерживающих CSS3. В старых браузерах будет простая полоса, выходящая за пределы страницы сайта. Структура очень простая. Текст заключённый в тег будет выводиться в виде ленты:


Код
<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; - цвет загнутой части. Цвет должен совпадать с цветом основной части ленты. Размер и цвет настроите сами.
 
Форум Сталкер » Web-раздел » Скачать скрипты для сталкера » Лента на CSS3 без использования изображений Для UCOZ
  • Страница 1 из 1
  • 1
Поиск:
Поделись с другими сталкерами
Меню сайта
Гость
Статистика
Рейтинг@Mail.ru