Полезное в сети

Всегда в теме

Статистика


Яндекс.Метрика


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

Рекомендуем



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


21:51
Лента с использованием только 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;

}

 

 

 

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

 

 

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

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

Поиск

Вход

Гость
  • Вход
  • Регистрация
  • Читаемое

    Категории

    Заходи не жди