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?