Заходи
Гость

Хостинг

Статистика
Яндекс.Метрика Счетчик PR-CY.Rank
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Ccылки

Свежак

Главная » 2013 » Сентябрь » 11 » Лента с использованием только CSS
21:40
Лента с использованием только CSS

Лента с использованием только CSS


Ленты являются чрезвычайно популярным элементом дизайна.

Сделаем  элемент, использующийся в оформлении страниц веб проектов - ленту с текстом. Для решения задачи потребуется только один HTML элемент и CSS. Никаких изображений и JavaScript.

 

ДЕМО      СКАЧАТЬ ИСХОДНИК

HTML

Для формирования элемента потребуется всего лишь один элемент. Мы воспользуемся заголовком и добавим возможность редактировать надпись на ленте непосредственно в браузере:

 

<h1 contenteditable>Один элемент и CSS - Печатаем здесь...</h1>

 

 

Также включим в код страницы плагин для автоматической расстановки префиксов браузеров.

 

<script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js" type="text/javascript"></script>

 

 

CSS

Для формирования образа ленты будут применяться псевдо-элементы и трюк с "треугольниками". Также будем использовать тени и градиенты для усиления 3D эффекта.

 

/*Сброс*/

* {margin: 0; padding: 0;}

 

html, body {height: 100%;}

 

body {

                background: #B1E3E2;

                box-shadow: inset 0 0 100px 20px #80D0CF;

                text-align: center;

}

 

h1 {

                display: inline-block;

                font-size: 14px;

                line-height: 28px;

                color: #8699A0;

                text-shadow: 0 0 1px #758890;

                margin: 120px 0;

                font-family: arial, verdana;

                outline: none;

                padding: 14px 30px;

                position: relative;

                text-transform: uppercase;

                /* Небольшие тени для 3D эффекта */

                box-shadow:

                               0 0 30px 0 rgba(0, 0, 0, 0.1),

                               0 36px 0 -18px #B1E3E2;

}

 

/* Концы ленты*/

h1:before {

                content: '';

                position: absolute;

                top: 18px;

                left: -15%;

                z-index: -1;

                width: 130%;

                /* Используем логику треугольника - 2 боковые рамки и высота 0. Таким образом, получаются треугольники слева и справа */

                height: 0;

                border: 28px solid rgba(0, 0, 0, 0);

                border-left: 28px solid #B1E3E2;

                border-right: 28px solid #B1E3E2;

}

 

/* Псевдоэлемент after будет негативом для ленты, чтобы заквершить построение эффекта*/

h1:after {

                content: '';

                width: 100%;

                height: 0;

                position: absolute;

                top: 100%; left: 0;

                z-index: -1;

                /* Высота верхней рамки такая же как и ширина левой и правой рамок для плавного эффекта. Высота верхней рамки также одинаковая сос смещением элемента :before сверху*/

                border-top: 18px solid #99acb2;

                border-left: 18px solid transparent;

                border-right: 18px solid transparent;

}

 

h1, h1:before {

                /*Многоцветный фон - используем комбинацию 4 фонов для построения эффекта */

                background-image:

                               /* 2 серых рамки */

                               linear-gradient(

                                               transparent 8%,

                                               rgba(0, 0, 0, 0.1) 8%,

                                               rgba(0, 0, 0, 0.1) 14%,

                                               transparent 14%,

                                               transparent 86%,

                                               rgba(0, 0, 0, 0.1) 86%,

                                               rgba(0, 0, 0, 0.1) 92%,

                                               transparent 92%

                               ),

                               /* Белый глянцевый градиент */

                               linear-gradient(

                                               rgba(255, 255, 255, 0.75),

                                               rgba(255, 255, 255, 0)

                               ),

                               /* Тонкие полоски */

                               linear-gradient(

                                               45deg,

                                               transparent 40%,

                                               rgba(0, 0, 0, 0.1) 40%,

                                               rgba(0, 0, 0, 0.1) 60%,

                                               transparent 60%

                               ),

                               /* Белая основа */

                               linear-gradient(white, white);

                background-size:

                               cover, /* Рамки */

                               cover, /* Белый глянец */

                               4px 4px, /* Тонкие полоски */

                               cover; /* Белая основа */

}

 

h1, h1:before, h1:after {

                box-sizing: border-box;

                /* Выводим рамки по концам ленты */

                background-origin: border-box;

}

 

 

 

ДЕМО      СКАЧАТЬ ИСХОДНИК

 

 

Ссылка на источник

Категория: HTML/CSS | Просмотров: 200 | Добавил: Iron | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск

Статьи
[Менеджмент]
Факторы микросреды организации
[Безопасность систем]
Защита исходных текстов и двоичного кода
[Устронение ошибок систем]
Сообщения об ошибках AMI BIOS (часть 2)
[Прогараммирование]
Разработка ПО с открытыми исходными текстами как особый вид прикладной науки
[Устронение ошибок систем]
Возможные нежелательные последствия разгона
[Прогараммирование]
Как работает CSS?(часть 2 Шрифты, Текст и Ссылки)
[Устронение ошибок систем]
Использование "чистой загрузки" для устранения неполадок в работе Windows
[Операционные системы]
MAC OS
[Прогараммирование]
Как работает CSS?
[Прогараммирование]
ДОКУМЕНТИРОВАНИЕ ПРОГРАММ

Категории
HTML/CSS [21]
jQuery/JS [36]
PHP [4]
Для Ucoz [38]

Популярный софт
Iron Kaspersky Internet Security 2015
Kaspersky Internet Security 2015
Iron Virtual DJ
Virtual DJ
Iron SoundForge 11
SoundForge 11
Iron Alcohol 120
Alcohol 120
Iron Norton Internet Security 2014
Norton Internet Security 2014
Iron Loaris Trojan Remover
Loaris Trojan Remover

Жми

Copyright MyCorp © 2018Конструктор сайтов - uCoz