Создание наклонной ленточки с текстом

Добрый день дорогие друзья, сегодня я хочу предложить вам интересное решение для создания ленточки под средством 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.