Add Watermarks to images using CSS and PNG |
| Software - Web Design | |
| Written by SPIRI | |
|
This tutorial explains a simple way of using PNG image files and CSS Coding to apply a simple Watermark effect on your images. By using this simple technique in collaboration with a Photo Gallery you can very easily auto apply watermarks to all your pictures. A Watermark is a visible digital seal applied onto an image, providing further copyright information or hidden attributes. In this tutorial we are using visible watermarks. The process we are explaining here is creating a transparent PNG image containing the watermark you want to apply to images. Create a PNG fileStart your favorite image editor, create a new document (ie: 100x100px), design the watermark label you are using, give it a WHITE collor (#FFF), select the watermark you created, and in the Properties Inspector of your editor modify the opacity to 15%.Give the image a transparent background and save it as a PNG image.  The HTML and CSS codingTo apply the watermark to your existing pictures all you need to do is overlay the PNG file onto the existing images.For example if you have a Photo Gallery that uses the following code to display images <img src="your-gallery-image.jpg"/> all you need to do is just apply a DIV around the area displaying the images and append the PNG Watermark just bellow the actual image (inside the DIV). The CSS Code:
#watermark_box { The img.watermark is a class attribute that positions all images (assigned to this class) 4 pixels down and 4 pixels to the right, just so your watermark logo does not "touch" the margins of the picture it is applied to. The HTML Code:
<div id="watermark_box">  Note: Almost all modern browsers fully support PNG images opacity except for Internet Explorer 6. Here is an example of a watermarked picture
written by JF , January 11, 2008
Muito bom, mas não mantem a integridade, ao baixar as fotos estão separadas
written by Adaptiv Media , January 26, 2008
This effect is very classy. Much better than using php's GD image functions.. Thank you for the insight and all the best.
written by Jerry Chambers , January 26, 2008
I'm noticing this is not working in IE7
written by Imrac , January 27, 2008
It wouldn't be too hard to rip the image if the look in view source =/ Though still pretty good.
written by SPIRI , January 27, 2008
Of course it wouldn't be hard to rip the image but the purpose of this is not protecting images. Its main purpose is styling and adding additional info to images.
written by R.Lakshmi , February 06, 2008
hi, I have create an watermark image , it's working fine in localhost , but while running online it's not working what is the problem? help me.
written by zhuzhu , April 20, 2008
CSS is client-side scripting. If the browser is not wking properly or not wking with the css, the picture will be displayed without the watermark. Isn't it safer to use server side script ie php to process the watermark?
written by Latha , April 22, 2008
how to create watermark images in fireworks without scripting and css Can you please tell me the steps expecting your reply soon
written by Sean , April 22, 2008
This isn't for everyone. If you are trying to copyright an image, this is pointless because anyone can still save the image and the watermark will no longer be there. I'm sticking with php and PNG IMAGE CREATE. However, this is a good solution if all you care about is branding, if you are doing an image feed where you don't own the image or anything similar. Thanks!
written by web design thailand , July 03, 2008
This is cool but is there anyway to make it workon IE6. There are many people still use this version.
written by Anees , December 04, 2008
its not working in ie6 . how can i use transparent png in ie6 without using js please explin. Do you need more help? Ask now!
|
|
| Last Updated ( Friday, 07 September 2007 ) | |
In this tutorial you will learn the basics of working with forms using only one php file.
