9 replies to this topic

[mahesh2k]

I have seen this text shadow effect in most of the websites and themes. Not sure how to make such effectively. I mean i know the tags but not sure what i want out of it. So i'm asking for personal favorites of your text shadow effects. example site or tutorial for that will be much better.

By the way, i came across many sites where title of the post used to have shadow and was looking like image and was hard to highlight. How this effect was achieved any idea ? You can check woothemes website for some texts that appears to be non-highligheted(it's not image i can confirm). There are some themrs that you can see as well for seeing this effect in action.

[web_designer]

one of CSS3 feautures is "text shadow" and " box shadow". and they are used in the most common browsers like opera and firefox. even if they are not now,i am sure they will be in the near future. and they are really a great feautures, i used some of them in my portfolio.

http://www.meinterest.com/myportfolio/

if you open it, then you can see the box shadow of the sideshow in opera, but not in firefox.

so, if you want the code to add a text shadow, here it is:

text-shadow: 2px 2px 2px #000;

this code gives a 2px righ and below the text, and blurs for 2px. this code should work in safari 3+, opera 9.5, firefox 3,konqueror and icab.

and all you have to do, is make a div tag to the text you want to highlighted, and add this property to the tag in the CSS file.

for example, you want to highlight the text of your post's title. so, add a div tag around the title, like this:

<div class="post_title">

your text should be here...

</div>

in CSS file, you should add this:

.post_title {
text-shadow: 2px 2px 2px #000;
}

that's all. and i explained it in details in case you don't know a lot about CSS, well i can't remember if you are so, just in case you don't know how to use it. and you can do the same in wordpress theme. just add the div tag around the text you want to highlighted such as in index.php, single.php,...or any other files, and add the property in style.css file.

i hope i could help you, and this what you want. and if you have any further questions please ask me, good luck.

[mahesh2k]

Hi WD,

i figured out how to work with text shadow. but i was looking for some effect that i have seen with wordpress where text was rendered like image and was not highlighted. When you right click on it will not let you save as image because it's not image. I don't know how this effect was achieved.

Digging old website design from archive.org hope that makes my point clear.

http://web.archive.o...rowse-interview

i don't know if opening this archive will preserve the CSS of this effect. I have seen the effect of text-to-image like effect there. You can see the effect on woothemes site if you want to see what i mean here. I'm looking for a ways to produce this effect.

[Quatrux]

The CSS3 text shadow feature is really great, most of updated browsers has it working as far as I know. For older browsers, you can always create an image with a shadow and show it with CSS2

[mahesh2k]

Not sure if it's CSS 3 effect. But you can check this one more wordpress theme.

http://www.elegantth...e-today#more-73

I don't know how they managed this effect. Either have to look at CSS using firebug or see if anyone else can help. I'm confused with what firebug is showing to me. cufon class or something for this blogs post title. :\

[Quatrux]

If you're talking about the shadows in the the borders at the bottom, then it's just an image which CSS is showing: http://www.elegantth...hadow-small.jpg

[mahesh2k]

No. that wasn't the image for it. I finally found what this is all about

This CSS effect was from javascript called cufons. You can read more about it :

http://fearlessflyer...our-web-design/

So this solves my thread.

I can't use this effect after knowing this is the only method to deal with it. There is no other way than cufons to this and which usually requires more server resources sometimes if hosted on your server. I'm going to skip it. I guess i came up with something which even most of the members were not aware of.

[Iniyila]

Oh tanks this is very useful

This will reduce number of peoples who are copy/pasting the content of website. will this effect increase the bandwidth usage ? as i see it's not image so it shouldn't increase bandwidth usage very much , but its a script and scripts will increase server load. is this overload perceptible ?

[web_designer]

thanks for the information, they are so useful. this is the first time i hear about such technique. and it is really helpful for all web designer, and it will reduce a lot of work on imaging. i will try it as soon as i can and post the result. thanks for sharing .

[mahesh2k]

Iniyila, on 07 November 2010 - 04:14 PM, said:

Oh tanks this is very useful

This will reduce number of peoples who are copy/pasting the content of website. will this effect increase the bandwidth usage ? as i see it's not image so it shouldn't increase bandwidth usage very much , but its a script and scripts will increase server load. is this overload perceptible ?

Yes this will increase the bandwidth and number of HTTP calls to your pages. You know what disadvantages it gives when there are lots of HTTP calls to your pages. This will slow down the loading even though in case of broadband connection. In short this will slow down the site. I do know that this may prevent direct copy pasting somewhat. But feeds if set to full can be used to copy entire site or post anyway.