Saturday, June 14, 2008

3 useful CSS image tricks for your blog

>

CSS can be a very powerful tool in the hands of a web developer. Some CSS techniques can do wonderful things to your site. Here I have shown 3 nifty tricks that you can do with background images.


1. Images that can't be saved

Does it piss you when someone steal images from your site? The best way to prevent copying of your images is to watermark them. But if you don't want anybody to save the image even on their hard disk, then you can try this CSS trick. Remember though, that you can't make it impossible to save an image. Anything that is available on the Internet can be saved, but at least you can make it difficult.

The trick is use the image as a background image. Try saving the following image by right-clicking on it

You can't isn't it? Of course, you can look at the source to find out the URL of the image but that takes some effort. Besides, for those who don't know the trick, there is no way of saving the image.

The code I used is this:

<div style="width:300px;height:243px;background:url(http://img115.imageshack.us/img115/2387/winlogoxv0.jpg)"></div>

You have to put the proper dimension of the image in the <div> tag otherwise it would distort the image.

2. Labeling images with hovering text

Look at the following image.

Cool Waves


The text "cool waves" is not a part of the image but is added on top of the image with CSS. Confirm this by selecting the text on top of the image. Again, the background image trick is used here. The code to use is

<div style="width:350px;height:232px;background:url(http://img524.imageshack.us/img524/5294/coolwaveswz5.jpg) repeat;"><h1 style="color:white;width:100%;background:url(http://img524.imageshack.us/img524/5294/coolwaveswz5.jpg);font-size:28px;line-height:2em;text-align:center;">Cool Waves</h1></div>

You can add some transparency effects too. In the following image the text opacity is reduced to 75%

Cool Waves



This time, we will make the background image transparent (40% opacity) and the text opaque.

Cool Waves

<div style="width:350px;height:232px;background:url(http://img524.imageshack.us/img524/5294/coolwaveswz5.jpg) repeat;filter:alpha(opacity=40);-moz-opacity:.40;opacity:.40;"><h1 style="color:black;width:100%;background:url(http://img524.imageshack.us/img524/5294/coolwaveswz5.jpg);font-size:28px;line-height:2em;text-align:center;">Cool Waves</h1></div>

You can adjust the transparency level to your liking.

3. Making a background image clickable

This is particularly helpful in blog or website headers. Often, the header image containing the logo or a banner is set as a background image in CSS for easier coding. Doing so makes the header image unclickable, but we would like the header to link to the hompage. That can be done with this trick.

The stylesheet of your website usually defines the header background something like this

#header

{
    background: url(logo.jpg);
    width: 300px;
    height: 150px;
}

Add these lines below the above code in your CSS file

#header h1 {
    width: 300px;
    height: 100px;
    }
#header h1 a {
   display: none;

}

The width and height will define the clickable area on the header image.

After that, in your template modify the <div> tags for the header

<div id="header">
        <a href="/" title="Home"><h1>Title</h1></a>
    </div>

What you are doing is adding a hyperlink to the text "Title" on top of the header image, which is in the background. But since the text inside the header section is set to display:none, you get only the hyperlink without the text. If you use background image on your header, then this trick is worth trying.

Source: Mandarin Designs, Haacked

9 comments:

  1. Hi , I'd like to say that I can't really understand what you mean in the first two tricks when saying "you can't save the images with right-clicking".
    In both situations (in firefox under Ubuntu/linux if that matters) I just right-clicked and chose:
    "View Background Image"
    When the image appeared in a new tab, I could save it.
    Maybe the trick is about not knowing that the image is set as background , so when you see "view background image" you think that the image that would appear by clicking it would be the "main" background?
    Nevermind, I find your feed very interesting and you have suggested us many useful things

    ReplyDelete
  2. Apparently, that option is available only in Firefox. With Opera and IE you can't save a background image. Sorry, I never saw that one!

    ReplyDelete
  3. Not to mention they could just view your source ;)

    ReplyDelete
  4. Not an image trick but a neat trick to clean up your source code on the page is overflow:scroll. You can read a nice article at:
    http://www.dotnetscraps.com/dotnetscraps/post/Why-do-I-like-overflowscroll-so-much.aspx

    Thanks to mswatcher on DZone.com for the article!

    -chris

    ReplyDelete
  5. One trick that I've seen in some web pages (Flicker if I recall correctly)is to add a transparent layer or div on top of the picture, so clicking on it will not let you save the image.

    You can still find the image location by doing a view source though.

    ReplyDelete
  6. In IE you can just right-click the image and select Save Background Image as...

    ReplyDelete
  7. In IE after you save image as, look at the image you saved! It's not what you wanted gtucker

    ReplyDelete
  8. css layer examples / properties and layer attributes
    http://css-lessons.ucoz.com/css-layer-properties.htm

    ReplyDelete
  9. hmmm not sure there is any point to that — a simple Ctrl+PrtScr is all that's needed, then Ctrl+V in your favourite graphics app. Win7 also comes with a handy SnippingTool to make it even simpler.
    obviously if there is text overlapping the image you might have to resort to the suggested methods.
    generally streaming HD video is the only thing that's tricky to grab, unless it's on youtube — however it's only a matter of time before PCs are fast enough to capture HD video in real time with grabbing software.

    ReplyDelete

Popular Posts