Лента на угол сайта, контента или фотографии при помощи CSS3

Различные модификации основанные на html и css.
Интересные дополнения и украшения для вашего стиля.
Помощь при доработке шаблонов вашего стиля.
Аватара пользователя
CabinetAdmin

Лента на угол сайта, контента или фотографии при помощи CSS3

CabinetAdmin 17 июн 2013, 15:48 Сообщение

Добавление ленты "NEWS" на угол сайта, контента или фотографии при помощи CSS3.

Изображение


Создать уголок в фотошопе не составляет особого труда, но ведь гораздо интереснее это сделать на css. Тем более, что делается это довольно просто.

Структура состоит из двух блоков вложенных друг в друга:

Код: Выделить всё

<div class="ribbon-wrapper-green"><div class="ribbon-green">NEWS</div></div>


И небольшой код css:

Код: Выделить всё

.ribbon-wrapper-green { width: 85px; height: 88px; overflow: hidden; position: absolute; top: -3px; right: -3px; } .ribbon-green { font: bold 15px Sans-Serif; color: #333; text-align: center; text-shadow: rgba(255,255,255,0.5) 0px 1px 0px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); position: relative; padding: 7px 0; left: -5px; top: 15px; width: 120px; background-color: #BFDC7A; background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45); color: #6a6340; -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); box-shadow: 0px 0px 3px rgba(0,0,0,0.3); } .ribbon-green:before, .ribbon-green:after { content: ""; border-top: 3px solid #6e8900; border-left: 3px solid transparent; border-right: 3px solid transparent; position: absolute; bottom: -3px; } .ribbon-green:before { left: 0; } .ribbon-green:after { right: 0; }


Результат:
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
silver073000

Re: Лента на угол сайта, контента или фотографии при помощи CSS3

silver073000 18 июн 2013, 10:44 Сообщение

А суть этой ленты какая? Типа, наподобие rss? Попробовал себе добавить, уголок появился, но он не кликабельный и при появлении новых тем там ничего не меняется.

Аватара пользователя
CabinetAdmin

Re: Лента на угол сайта, контента или фотографии при помощи CSS3

CabinetAdmin 18 июн 2013, 11:45 Сообщение

По сути просто информативный уголок. Да и ссылкой его никто не запрещает сделать:

Код: Выделить всё

<div class="ribbon-wrapper-green"><div class="ribbon-green"><a href="#">NEWS</a></div></div>


Можно организовать так, чтобы этот уголок появлялся в списке тем, или форумов, при появлении в нём новых сообщений. Полноценный мод так сказать...
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
Uzanka

Re: Лента на угол сайта, контента или фотографии при помощи CSS3

Uzanka 18 июл 2013, 17:16 Сообщение

[b]CabinetAdmin[/b]
Большое спасибо за уголок! А можно получить код для такого же уголка как на этом сайте? т.е. 1) располагается слева 2) красный фон 3) шрифт италик.

Буду очень признательна.

Аватара пользователя
CabinetAdmin

Re: Лента на угол сайта, контента или фотографии при помощи CSS3

CabinetAdmin 18 июл 2013, 19:23 Сообщение

Здесь просто изображение.
Чтобы сделать уголок из первой темы на левую сторону, нужно немного поправить код, плюс в зависимости от надписи увеличить размеры. Цвет сделать такой же не проблема.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
Uzanka

Re: Лента на угол сайта, контента или фотографии при помощи CSS3

Uzanka 21 июл 2013, 17:36 Сообщение

А можно попросить сделать нам белый уголок? Т.е. пусть он остается правым, только нужно подобрать цвета, чтобы он был молочно-белым. Буду очень признательна, если вы подберете цвета и выложите код. Сама я вряд ли смогу. Большое спасибо за помощь. Наш сайт здесь www.scienceclub.listbb.ru

Аватара пользователя
CabinetAdmin

Re: Лента на угол сайта, контента или фотографии при помощи CSS3

CabinetAdmin 21 июл 2013, 18:05 Сообщение

Кусок кода который отвечает за цвет (.ribbon-green {), просто белый:

Код: Выделить всё

.ribbon-green { font: bold 15px Sans-Serif; color: #333; text-align: center; text-shadow: rgba(255,255,255,0.5) 0px 1px 0px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); position: relative; padding: 7px 0; left: -5px; top: 15px; width: 120px; background-color: #FFFFFF; color: #6a6340; -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); box-shadow: 0px 0px 3px rgba(0,0,0,0.3); }


С небольшим градиентом:

Код: Выделить всё

.ribbon-green { font: bold 15px Sans-Serif; color: #333; text-align: center; text-shadow: rgba(255,255,255,0.5) 0px 1px 0px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); position: relative; padding: 7px 0; left: -5px; top: 15px; width: 120px; background-color: #FFFFFF; background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#EBEBEB)); background-image: -webkit-linear-gradient(top, #FFFFFF, #EBEBEB); background-image: -moz-linear-gradient(top, #FFFFFF, #EBEBEB); background-image: -ms-linear-gradient(top, #FFFFFF, #EBEBEB); background-image: -o-linear-gradient(top, #FFFFFF, #EBEBEB); color: #6a6340; -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); box-shadow: 0px 0px 3px rgba(0,0,0,0.3); }
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
Uzanka

Re: Лента на угол сайта, контента или фотографии при помощи CSS3

Uzanka 21 июл 2013, 18:55 Сообщение

Большое спасибо! Отлично получилось.
Форум Science-Леди www.scienceclub.listbb.ru

igorbond

Re: Лента на угол сайта, контента или фотографии при помощи CSS3

igorbond 23 июл 2013, 13:59 Сообщение

А возможно как то сделать уголок для форума на аватарке когда человек онлайн, а когда нет уголок исчезает ???

Аватара пользователя
CabinetAdmin

Re: Лента на угол сайта, контента или фотографии при помощи CSS3

CabinetAdmin 23 июл 2013, 15:37 Сообщение

Можно. Добавить к структуре пару строк кода из первого поста и прописать для них стили, например, имеем:

Код: Выделить всё

<a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a>


Добавляем код уголка и условие когда он должен появляться:

Код: Выделить всё

<a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR} <!-- IF postrow.S_ONLINE and not postrow.S_IGNORE_POST --><span class="ribbon-wrapper-green"><span class="ribbon-green">online</span></span><!-- ENDIF --></a>


Не проверял.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
silver073000

Re: Лента на угол сайта, контента или фотографии при помощи CSS3

silver073000 27 ноя 2013, 21:23 Сообщение

А можно ли придать тексту как-бы такое лёгкое свечение? :)

Аватара пользователя
CabinetAdmin

Re: Лента на угол сайта, контента или фотографии при помощи CSS3

CabinetAdmin 28 ноя 2013, 14:34 Сообщение

Ну если брать именно эту модификацию, то за свечение текста отвечает:

Код: Выделить всё

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


Белый цвет с прозрачностью в 50%. Пикселями выставляется тень, первое значение по горизонтали, второе по вертикали, последнее размытие.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект


Аватара пользователя
Ангелочек

Re: Лента на угол сайта, контента или фотографии при помощи CSS3

Ангелочек 27 апр 2014, 12:44 Сообщение

А куда это вставлять? В какой шаблон? У меня что то ни чего не получилось :(
... Я Ангел только крылья в стирке и нимб на подзарядке ....
http://forymo4ek.ru/

Аватара пользователя
CabinetAdmin

Re: Лента на угол сайта, контента или фотографии при помощи CSS3

CabinetAdmin 27 апр 2014, 13:54 Сообщение

В хедере, там где шапка. Примерно так, после конструкции:

Код: Выделить всё

<div id="logotop"> ... </div>


Стили, само собой, в стили. Плюс находите #logorow { и добавляете к нему position: relative;.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект



Похожие темы

Вернуться в «HTML модификации»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 2 гостя