10:51 Watermark на uCoz, добавление надписи на картинку, рамка на картинку |
| Скриншот: 1.  2.  3.  Для начала активируем Допольнительно поле #1.Потом идем в замена стандартных надписей - Добавление в модуль новости - и меняем Дополнительное Поле 1 на URL Изображения. Эффект рамки для изображения: Потом идем в вид материалов новостей: В самый верх вида материалов вставляем,или вставялем в любое место в CSS.
Code <style>.frame-block { position: relative; display: block; height:335px; width: 575px; } .frame-block span { background: url(Ваша рамка.png) no-repeat center top; height:335px; - Размеры width: 575px; - Размеры display: block; position: absolute; } </style> А потом уже встаялем в вид материалов: Code <div class="frame-block"> <span> </span> <img src="$OTHER1$" alt="" /> </div> Водяной знак на изображении: CSS: Code <style>.transp-block { background: #000 url(Водяной знак.jpg) no-repeat; width: 575px; height: 335px; } img.transparent { filter:alpha(opacity=75); - Прозачность watermark'a opacity:.75; }</style> HTML: Code <div class="transp-block"> <img class="transparent" src="$OTHER1$" alt="" /> </div> Подпись к изображению: CSS: Code <style> .img-desc { position: relative; display: block; height:335px; 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; } </style> HTML:
Code <div class="img-desc"> <img src="$OTHER1$" alt="" /> <cite>Ваша подпись</cite> </div> Идея взята: ruseller.com |
|
|
| Всего комментариев: 1 | ||
| ||
