Помогни ни да направим Uroci.net по - богат! Добави урок

Създаване на ефект на воден знак с CSS

acidmartin   трудност:    видян: 16692

Ето самия код, който след това ще коментирам:

<div class="watermark bottomright">
<div class="text">Watermark Text</div>
<img xsrc="Images/image_01.jpg" width="441" height="324" alt="Summer's End" />
</div>


За да постигнем целта, използваме един заобикалящ <div> с class=”watermark bottomright”. Класът watermark съдържа в себе си основните сетинги, необходими за позиционирането на картинката и текста към нея:

div.watermark
{
background: #fefefe;
border: solid 1px black;
float: left;
position: relative;
-moz-user-select: none; /* Unselectable text for Mozilla FF */
}


Вътрешния <div> с клас “text” e позициониран абсолютно, за да може да застане върху картинката, а с filter, opacity и moz-opacity му сетваме прозрачност:

div.watermark .text
{
position: absolute;
cursor: default;
font: bold 22px Verdana, Arial, Sans-serif;
color: White;
margin: 4px;
line-height: 20px;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */
opacity: .5; /* Mozilla 2x, Opera 8x */
-moz-opacity: .5; /* Mozilla 1x */
}


Да се върнем отново на <div class="watermark bottomright">. Там освен класът “watermark” сме дефинирали и 4 класа за позиционирането на текста върху картинката - “горе-ляво”, “горе-дясно”, “долу-дясно” и “долу-ляво”, съответно “topleft”, “topright”, “bottomright” и “bottomleft”, които сетваме според предпочитанията си. Ето и самите дефиниции:

.topleft .text
{
/* default */
}

.topright .text
{
right: 0;
}

.bottomleft .text
{
bottom: 0;
}

.bottomright .text
{
right: 0;
bottom: 0;
}


Още скриптове, които могат да ви се сторят полезни - тук.
Демо на кода + конфигуратор за позиционирането - тук.
Даунлоуд на кода - тук.

Надявам се, че урокът е бил полезен. Ако имате въпроси или предложения, пишете ми на acid_martin@yahoo.com, martin@acidmartin.com, или ползвайте формата за контакт на сайта ми.

Мартин Иванов
http://acidmartin.wemakesites.net/



Коментари (1)

acidmartin на 31.03 2007 в 22:55ч.
Получих запитване как този код може да се използва с много картинки. Просто го копирайте колкото пъти е нужно, а после сменете текста на водния знак, alt и src атрибутите на картинките, т.е:


Image 1 Watermark Text




Image 2 Watermark Text




Image 3 Watermark Text

Регистрирайте се, за да добавите коментар


Калдейта ЕООД - © 2003-2010. Всички права запазени.
Препоръчваме: Национален Бизнес | Bomba.bg | IT Новини | Диплома.бг | TRAVEL туризъм | Реферати | AmAm.bg | Иде.ли | Курсови работи | Фото Форум | Spodeli.net | Фото-Култ | Atol.bg | Elmaz.com | MobileBulgaria.com | Казанлък.Com