Блог Андрея Юрченко

Авторский блог с полезными статьями по темам: создание сайта, заработок на сайте, заработок в интернете, работа на дому, работа в интернете, инфобизнес

Угловая лента на CSS

Привет друзья! Сегодня хочу показать, как можно сделать угловую ленточку на своем сайте или отдельном блоке. Наша ленточка будет реализована без использования различных скриптов или картинок, а  только средствами CSS и HTML. Мы с легкостью сможем менять надпись на ленте, цвет шрифта и цвет самой ленты.

угловая лента, угловая лента png, лента png

Для начала нам понадобится html-разметка, которая будет выводить нашу ленту в окне браузера  и размещается данный код после открывающего или перед закрывающим тегом <body> </body>:

<div class=»wrap»>

            <div class=»wrap-ribbon»>

                        <div class=»ribbon»>НОВИНКА</div>

            </div>

</div>

Первый div задает отдельный блок, на котором будет расположена наша ленточка. Второй и третий – это расположение и сама лента соответственно.

Поместив данный код в коде нашей странице, мы увидим только надпись. Теперь нам нужно заняться стилями и для начала определим нашему основному блоку размеры, расположение и выделим его:

.wrap {

  margin: 50px auto;

  width: 480px;

  height: 300px;

  background: white;

  border: 1px solid #000;

  position: relative;

  z-index: 99;

}

Вот, что у вас должно получиться:

НОВИНКА

Если вам нужно расположить ленту непосредственно на странице вашего сайта, тогда нужно исключить данный div из разметки и оставить только div-ы с классами ribbon и wrap-ribbon.

Далее задаем стиль непосредственно нашей ленточке и поворачиваем ее на угол 45 градусов:

.ribbon {

            position: relative;

            width: 150px;

            background-color: #BFDC7A; /* цвет ленты */

            font: bold 16px Sans-Serif;

            color: #333;    /* цвет шрифта */

            text-align: center;

            text-shadow: 1px 1px 0px rgba(255,255,255,0.5);

            padding: 7px 0;

            top: 25px;

            left: -10px;

            -webkit-transform: rotate(45deg);

            -moz-transform:    rotate(45deg);

            -ms-transform:     rotate(45deg);

            -o-transform:      rotate(45deg);

}

Получаем вот такую картинку- повернутая лента с надписью:

НОВИНКА

Ну что, осталось самое малое: задаем расположение нашей ленты –двигаем вправо и обрезаем при помощи свойства overflow: hidden; все лишнее, чтобы не торчало за пределами блока:

.wrap-ribbon {

            width: 106px;

            height: 106px;

            overflow: hidden;

            position: absolute;

            top: 0;

            right: 0;

}

Вот и все. У вас должна отобразиться следующая картинка:

НОВИНКА

Иногда бывает необходимость сделать так, чтобы наша ленточка была одновременно ссылкой, которая будет вести на другую страницу. Для этого нам нудно немного изменить код разметки вот таким образом:

<div class=»wrap»>

            <div class=»wrap-ribbon»>

            <a href=»#» target=»_blank» style=»text-decoration: none;»>

                        <div class=»ribbon»>НОВИНКА</div>

            </a>

            </div>

</div>

Вместо # нужно вставить нужный адрес, по которому будет осуществляться переход. Свойство text-decoration: none; убирает подчеркивание надписи нашей ссылки.

Теперь вы можете использовать данную ленточку на своих ресурсах, надеюсь никаких трудностей не возникнет. Будут вопросы, пишите в комментариях под данной статьей.

С уважением, Андрей Юрченко

Поделитесь статьей в социальных сетях!

Подпишись на RSS-рассылку и получай новые статьи на почту!

Введите свой e-mail:

МАГИЧЕСКИЙ ШАБЛОН ПОДПИСНОЙ СТРАНИЦЫ В ПОДАРОК, ЗАБИРАЙТЕ

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Комментарии Вконтакте:

Content Tab Three

Блог Андрея Юрченко © 2016

ВВЕРХ