Всем привет!Сегодня я вам расскажу как сделать вотермарк картинкой на uCoz'e в трех видах:
- Эффект рамки для изображения.Пример 1
- Водяной знак на изображении.Пример 2
- Подпись к изображению.Пример 3
Для начала активируем Допольнительно поле #1.Потом идем в замена стандартных надписей - Добавление в модуль новости - и меняем Дополнительное Поле 1 на URL Изображения.
Эффект рамки для изображения:
Потом идем в вид материалов новостей:
В самый верх вида материалов вставляем,или вставялем в любое место в CSS.
Водяной знак на изображении:
CSS:
Код
<style>.frame-block
{
position: relative;
display: block;
width: 575px;
}
.frame-block span {
background: url(Ваша рамка) no-repeat
center top;
height:335px; /*Размеры*/
width: 575px; /*Размеры*/
display: block;
position: absolute;
}
.img-desc {
position: relative;
display: block;
width: 575px;
}
.img-desc cite {
background: #111;
filter:alpha(opacity=55);
opacity:.55;
color:
#fff;
position: absolute;
bottom: 0;
left:
0;
width: 555px;
padding: 10px;
border-top: 1px solid #999;
}
.transp-block {
background: #000 url(Водяной знак)
no-repeat;
width: 575px;
}
img.transparent {
filter:alpha(opacity=75); /* Прозачность watermark'a*/
opacity:.75;
}</style>
А потом уже вставляем в вид материалов:
Код
<div class="frame-block">
<div class="transp-block">
<div class="img-desc">
<span></span>
<img class="transparent"
src="$OTHER1$"
alt="" />
<cite>Ваша подпись</cite>
</div>
</div>
</div>
Ну вот и все!!!
Не забудьте написать ссылку на вотермарк в css!
Скрипт, Watermark, для, Ucoz, реально
|