Привет друзья! Сегодня хочу показать, как можно сделать угловую ленточку на своем сайте или отдельном блоке. Наша ленточка будет реализована без использования различных скриптов или картинок, а только средствами CSS и HTML. Мы с легкостью сможем менять надпись на ленте, цвет шрифта и цвет самой ленты.
Для начала нам понадобится html-разметка, которая будет выводить нашу ленту в окне браузера и размещается данный код после открывающего или перед закрывающим тегом <body> </body>:
Первый div задает отдельный блок, на котором будет расположена наша ленточка. Второй и третий – это расположение и сама лента соответственно.
Поместив данный код в коде нашей странице, мы увидим только надпись. Теперь нам нужно заняться стилями и для начала определим нашему основному блоку размеры, расположение и выделим его:
Вот, что у вас должно получиться:
НОВИНКА
Если вам нужно расположить ленту непосредственно на странице вашего сайта, тогда нужно исключить данный div из разметки и оставить только div-ы с классами ribbon и wrap-ribbon.
Далее задаем стиль непосредственно нашей ленточке и поворачиваем ее на угол 45 градусов:
Получаем вот такую картинку- повернутая лента с надписью:
НОВИНКА
Ну что, осталось самое малое: задаем расположение нашей ленты –двигаем вправо и обрезаем при помощи свойства overflow: hidden; все лишнее, чтобы не торчало за пределами блока:
Вот и все. У вас должна отобразиться следующая картинка:
Иногда бывает необходимость сделать так, чтобы наша ленточка была одновременно ссылкой, которая будет вести на другую страницу. Для этого нам нудно немного изменить код разметки вот таким образом:
Вместо # нужно вставить нужный адрес, по которому будет осуществляться переход. Свойство text-decoration: none; убирает подчеркивание надписи нашей ссылки.
Теперь вы можете использовать данную ленточку на своих ресурсах, надеюсь никаких трудностей не возникнет. Будут вопросы, пишите в комментариях под данной статьей.
источник
Комментариев нет:
Отправить комментарий