Главная » Полезные статьи » HTML-верстка » Создание ленточки с подписью для изображений на CSS3
Распечатать статью

Создание ленточки с подписью для изображений на CSS3

Однажды я размышлял о том, что мне нравятся те маленькие ленточки, которые люди добавляют к своим изображениям. Поэтому я создал этот урок, чтобы показать, как сделать такую собственную. У меня появилось несколько идей, но, честно говоря, без использования картинок они смотрелись не очень хорошо. Эта CSS-ленточка подходит для большинства изображений и может легко быть интегрирована в существующий код.

Использование

Они часто используются, когда вы хотите подчеркнуть что-то как «новое» или «популярное», и, в тоже время, они легко могут быть прицеплены к любому изображению. Всё что нам потребуется, это создать один блок для текста, повернуть его, а затем использовать две треугольные границы для создания эффекта сгиба. Все это будет находиться внутри элемента div.

HTML

Вот таким образом будет выглядеть код. Он не слишком большой, поэтому не должно возникнуть трудностей в его создании.

<div class="side-corner-tag">

    <img src="1.jpg" alt="" />
    <p><span>newest</span></p>

</div>

Достаточно легко. При создании таких CSS-эффектов желательно оставлять минимальную разметку, чтобы лишний раз не усложнять проект. Заполнить пробелы в верстке мы можем, используя :before и :after. Теперь посмотрим на CSS.

CSS

Нам нужно убрать вообще переполнение, но мне больше нравится перекрытие, и добавить отступ к нашему главному div. В этом заключается суть нашего эффекта. Также нужно добавить несколько свойств для шрифта и изменить отображение на inline-block.

.side-corner-tag {
    position: relative;
    color: #fff;
    display: inline-block;
    padding: 5px;
    overflow: hidden;
    font-family: Arial, sans-serif;
    font-weight: 900;
} 

.side-corner-tag p {
    display: inline;
}

Теперь нам нужно создать стили для элемента р. Он будет выступать текстовым полем для нашей подписи. Определим ширину и поворот. 2D-повороты работают во всех последних версиях браузеров, поэтому не должно вызвать проблем, примерно у 75% пользователей будет правильно отображаться. Если вы беспокоетесь о поддержке этого эффекта, тогда нужно поставить display: none, используя Javascript или конкретные стили для IE. Затем нужно добавить отступы и немного тени, чтобы придать эффект градиента.

.side-corner-tag p span {
    position: absolute;
    display: inline-block;
    right: -25px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2), inset 0px 5px 30px rgba(255,255,255,0.2);
    text-align: center;
    text-transform: uppercase;
    top: 22px;
    background: #d93131;
    width: 100px;
    padding: 3px 10px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}

В конце добавьте треугольные границы, используя before и after, разместите их правильно, чтобы создать эффект огибания изображения текстом. Не забудьте разместить в правильном месте. Ах да, не забудьте ещё изменить z-index.

.side-corner-tag p:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: -17px;
    right: 69px;
    z-index: -1;
    border: 17px solid;
    border-color: transparent transparent #662121 transparent;
}

.side-corner-tag p:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 74px;
    z-index: -1;
    right: -10px;
    border: 17px solid;
    border-color: #662121 transparent transparent transparent;
}

Вуаля! Мы сделали. Для ленивых внизу есть скомбинированный CSS-код:

.side-corner-tag {
    position: relative;
    color: #fff;
    display: inline-block;
    padding: 5px;
    overflow: hidden;
    font-family: Arial, sans-serif;
    font-weight: 900;
} 

.side-corner-tag span p {
    position: absolute;
    display: inline-block;
    right: -25px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2), inset 0px 5px 30px rgba(255,255,255,0.2);
    text-align: center;
    text-transform: uppercase;
    top: 6px;
    background: #d93131;
    width: 100px;
    padding: 3px 10px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
} 

.side-corner-tag span:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: -17px;
    right: 69px;
    z-index: -1;
    border: 17px solid;
    border-color: transparent transparent #662121 transparent;
}

.side-corner-tag span:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 74px;
    z-index: -1;
    right: -10px;
    border: 17px solid;
    border-color: #662121 transparent transparent transparent;
}

ДЕМО          СКАЧАТЬ

Источник:  css-live.ru
Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

Похожие статьи