« Week 3 of HTML and XHTML for CSS Now Available | Main | Week 4 of HTML and XHTML for CSS now ready »

September 06, 2005

How do they create that effect on the Westciv logo?

Ever since I last reworked the Westciv site I've received a constant stream of emails asking how I achieve the transparency effect on the logo in the top left corner. I lost track long ago of how many people I promised a tutorial on the subject. Well, here it is. The added bonus for waiting so long is that here you won't just learn how I create the visual effect as the page scrolls. I've also written about how I made the background image into a link to the home page which will always be there no matter how far someone scrolls down the page.

TrackBack

TrackBack URL for this entry:
http://www.typepad.com/t/trackback/6131/3128973

Listed below are links to weblogs that reference How do they create that effect on the Westciv logo?:

Comments

Nice tutorial as always;)

Finally a new tutorial from westciv after a long time, that is great.
Now i hope you will update tutorials and articles on the site more frequently, 'cause you really rock people.

I'm also waiting (like many others as i see in many comments) for new courses on php, javascript and maybe gimp and other similar arguments.
Thank you.

Great tutorial! I've often come across instances where I've wanted to link to the homepage from a logo as a background graphic, and this has shown me how to do it, thanks!

I have a concern, using FireFox 1.0.6, I don't see the image on the blue background. Do you why this is?

Was wondering how you did that. Thanks for posting the how to tutorial.

This is very cool. In Firefox. But the fixed background in the header doesn't work in my IE(6)? I've downloaded the page and css, and tried it myself. Can't keep a fixed background steady in IE.

I like this watermark effect. For sites where you might expect someone to print from the webpage, this is an effective watermarking, they will always have your logo in the screenshot.

wicked sick !
I always wondered about the efect. I was very close when i guessed it's a background image overlay, but never thought it's so well done.
And now I found the tutorial I'm really beginning to love it :)
good job
P.S. hope that IE7 has correct CSS support .. so ppl won't need to do silly workarounds
thanx again

As one of those admiring and asking about this effect I want to say thanks for the great tutorial. Very subtle and very cool. Really wish Microsoft could get it's act together to support web standards!

Please don't wait too long for more tutorials and articles. You folks really do great stuff.
Thanks!

Post a comment

Comments are moderated, and will not appear on this weblog until the author has approved them.

If you have a TypeKey or TypePad account, please Sign In

April 2008

Sun Mon Tue Wed Thu Fri Sat
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30      

Recent Comments

Recent Posts