Създаване на ефект на воден знак с CSS
Публикувана от smilev на January 12 2011 09:22:10

---

---

Разширена новина

---

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

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

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

Надявам се, че урокът е бил полезен. Ако имате въпроси или предложения, пишете ми на aaaa.1927@abv.bg .

От aaaa.1927