Watermark cu CSS

Un amic cu care mai schimb cate o vorba din an in paste ma ruga odata sa ii arat si lui cum sa isi puna watermark pe pozele de pe site. Am zis oke, cu PHP si libraria GD2 se rezolva sau sa foloseasca varianta mai migaloasa: editarea pozelor in Macromedia Fireworks sau Adobe Photoshop. Suport PHP nu avea iar editarea pozelor pe rand dura prea mult. Atunci mi-a venit o idee de watermark cu ajutorul CSS-ului.

<style type="text/css">
div#photo {
	margin: 0 auto;
	width: 640px;
	height: 480px;
	border: 3px solid #E6E6E6;
}

div#watermark {
	width: 640px;
	height: 480px;
}

div#photo_thumbnail {
	margin: 0 auto;
	width: 100px;
	height: 75px;
	border: 3px solid #E6E6E6;
}

div#watermark_thumbnail {
	width: 100px;
	height: 75px;
}
</style>
<!-- exemplul 1 -->
<div id="photo" style="background-image: url(IMAGINE); width: 640px; height: 480px;">
	<div id="watermark"><img src="IMAGINE-WATERMARK" width="640" height="480" title="Image" alt="Image" /></div>
</div>

<!-- exemplul 2 -->
<div id="photo_thumbnail" style="background-image: url(IMAGINE-WATERMARK); width: 100px; height: 75px;">
	<div id="watermark_thumbnail"><img src="IMAGINE-WATERMARK" width="100" height="75" title="Image thumbnail" alt="Image thumbnail" /></div>
</div>

Cum functioneaza: poza originala o punem ca background iar in div adaugam ca poza watermark-ul. Cele 2 imagini se vor suprapune. Atentie insa ca poza cu watermark sa aibe transparenta pe toata suprafata in afara de textul / logo-ul nostru altfel va acoperi poza originala. Cine va da click dreapta pe poza pentru a o salva, va avea surpriza sa salveze poza watermark 🙂

Intrebari?

6 thoughts on “Watermark cu CSS”

  1. scopul watemarkului este si acela de a te face sa te mai gandesti odata dak sa iei poza sau nu. mi se pare o idee bunisoara

Leave a Reply

Your email address will not be published. Required fields are marked *