| ||
|
Създаване на ефект на воден знак с CSSЕто самия код, който след това ще коментирам: <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: progidXImageTransform.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
|
|