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

[silver073000]

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

[CabinetAdmin]

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

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

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

Можно организовать так, чтобы этот уголок появлялся в списке тем, или форумов, при появлении в нём новых сообщений. Полноценный мод так сказать...

[Uzanka]

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

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

[CabinetAdmin]

Здесь просто изображение.
Чтобы сделать уголок из первой темы на левую сторону, нужно немного поправить код, плюс в зависимости от надписи увеличить размеры. Цвет сделать такой же не проблема.

[Uzanka]

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

[CabinetAdmin]

Кусок кода который отвечает за цвет (.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);
}

[Uzanka]

Большое спасибо! Отлично получилось.

[southklad]

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

[CabinetAdmin]

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

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

<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>

Не проверял.

[silver073000]

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

[CabinetAdmin]

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

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

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

Белый цвет с прозрачностью в 50%. Пикселями выставляется тень, первое значение по горизонтали, второе по вертикали, последнее размытие.

[silver073000]

Всё ясненько Благодарю

[Ангелочек]

А куда это вставлять? В какой шаблон? У меня что то ни чего не получилось

[CabinetAdmin]

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

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

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

Стили, само собой, в стили. Плюс находите #logorow { и добавляете к нему position: relative;.