Создание наклонной ленточки с текстом
1 июля 2012 года, Размещено в категории: HTML / CSS
Добрый день дорогие друзья, сегодня я хочу предложить вам интересное решение для создания ленточки под средством CSS3.

Такая ленточка очень хорошо смотрится и её можно подставлять к любым изображениям на сайте, она придаст красочности и наглядности вашим картинкам.
Использование
Чаще всего, такие ленточки используются для указания "нового" или "популярного" на сайте. Всё выполняется на CSS3 в рамках одного бокса div. Могу вам посоветовать пост с описанием сервисов для автоматической генерации 3D-лент, может вы найдёте для себя что-нибудь интересное.
HTML код
К коду вставки изображения, надо добавить вот такой блок div
и указать текст, который будет отображаться на ленточке:
<div class="ribbon"> <img src="image.jpg" alt="Ленточка на CSS3" /> <p><span>Новое</span></p> </div> |
Всё довольно просто, теперь давайте займёмся оформлением в CSS.
CSS код
Первым делом давайте оформим нашу ленточку, для этого надо выбрать цвет, шрифт. Чтобы текст отображался нормально в боксе, надо указать для него display: inline
. Получился вот такой код:
.ribbon { color: #9ac42c; position: relative; display: inline-block; overflow: hidden; padding: 5px; font-weight: 900; font-family: Arial, sans-serif;} .ribbon p { display: inline;} |
Теперь давайте оформим сам текст. Нам надо его повернуть с помощью селектора transform, потом добавить немного тени, указать ширину и отступы.
Присутствует одна проблема – это отображение в IE, потому что он не поддерживает transform и текст будет выводится в горизонтальном виде. Я на это не обращаю внимания, потому что почти 75% посетителей пользуются нормальными браузерами.
В итоге мы получаем вот такой код:
.ribbon p span { -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); display: inline-block; right: -25px; text-align: center; position: absolute; text-transform: uppercase; box-shadow: 0px 0px 10px rgba(0,0,0,0.2), inset 0px 5px 30px rgba(255,255,255,0.2); top: 22px; background: #d93131; width: 100px; padding: 3px 10px;} |
В заключительной части нашего урока, надо добавить границы к полоске, чтобы создался эффект наворачивания ленточки за изображение. Для этого будем использовать псевдоэлемент :after и :before.
.ribbon p:before { content:""; width:0; position:absolute; height:0; top:-17px; border-color: transparent transparent #eeeeee transparent; z-index: -1; right:69px; border:17px solid;} .ribbon p:after { content:""; width:0; position: absolute; height:0; top: 74px; border:17px solid; z-index:-1; border-color:#eeeeee transparent transparent transparent; right:-10px;} |
На этом всё, у нас получилась очень красивая ленточка, которая может украсить любое изображение или графический элемент на сайте.
Так же вопросы по HTML и CSS, вы можете задавать на компьютерном форуме.
Не забываем подписываться на обновление сайта, потому что дальше будет ещё очень много уроков по CSS3.
Григорий
8 лет назад
Надо будет попробовать.)