Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

I can't seem to get the color values/names correct so that I can get a Letter Press Effect on the text

To create the appearance of text that has been stamped, choose a text colour that is darker than the background, and then create a 1px text shadow with a 1px blur and offset it down 1px. Make the text-shadow slightly lighter than the background

background-color: rgba(255, 255, 255, 0.8);
color: #222;
text-shadow: 1px 1px 1px #FFFFFF;

So far I get only this

enter image description here

How would I go about

  1. Finding the text colour that is darker than the background. Background color is rgba (255, 255, 255, 0.8) and text color is #222.
  2. Finding the text shadow color that is ligher than the background. Background color is rgba (255, 255, 255, 0.8) and text shadow color is #FFFFFF;

I need to change the text color (currently #222) to a darker and text shadow color (currently #FFFFFF) to a lighter against a background color (currently rgba 255, 255, 255, 0.8). I can't change the background color to any other.

Have no designing skills and maybe someone would how what color values to change of the text as well as text shadow to have a letter press effect which is more obvious.

Thanks

share|improve this question
    
Retagged (after misreading and answering how to do a letterpress in photoshop) –  Yisela Aug 15 '12 at 1:27
    
@yisela -- Cool. I removed you're earlier edit.. since there's no mention Photoshop anywhere.. and the CSS is COMPLETELY unrelated to Photoshop or Illustrator. –  Scott Aug 15 '12 at 1:27
    
@Jawad yes you're correct..I mistyped earlier.... moved info to an answer. –  Scott Aug 15 '12 at 1:36
1  
yisela deleted an answer that's actually spot-on. The difference is that instead of using photoshop, you can just make two shadows in CSS. One white, one black and then set the opacity. The translucency and blur of the shadows make for a much more realistic effect. Example: text-shadow: 1px 1px rgba(255,255,255,0.4), -1px -1px rgba(0,0,0,0.4); –  DA01 Aug 15 '12 at 3:26
    
I think using a mix of decimal (0-255) and hex values (00-FF) is likely to confuse. Given that decimal values values are required in rgba() expressions, why not use decimal rgb() expressions as well, e.g. rgb(255,255,255) rather than #ffffff? –  e100 Aug 15 '12 at 10:30
add comment

2 Answers

up vote 1 down vote accepted

R255 G255 B255 is White, and .8 indicates 80% opacity. So you could change the .8 to a .9 to go lighter and a .7 to go darker.

If you specifically need hex values. You could look at a simply HTML color table like this one.

Or you could open the color picker in Photoshop, input your existing Hex, and adjust sliders or the color target to find the next hex value.

share|improve this answer
    
Thanks for teying to help but as i mentioned in my question I can't change the color of the background (rgba(255, 255, 255) and that includes the opacity of 0.8 as well. Just need to change the font/text color and font/text shadow color. –  Jawad Aug 15 '12 at 1:50
    
Well to change the text color from #222, you could use #221, or #220 those are ever so slightly lighter. Then you could move to #211 and #210, etc. For the shadow from #fff, you could go to #ffe for a yelowish white or #eff for a blueish white. Basically hex numbers from dark to light are 0 through 9, hex letters from dark to light are a through f –  Scott Aug 15 '12 at 3:16
    
You can also use the same text color but use an RGBA value for that, that way it is darker, the texture shines through a bit and it adds to "realism" of the letterpress. so you could use: color: rgba(000,000,000,0.4); –  Roberto De Vivo Aug 15 '12 at 13:25
    
great. Thank you. –  Jawad Aug 16 '12 at 19:43
add comment

You could also try an inset shadow "trick" to enhance the effect of the letterpress. The inset shadow will enhance the pseudo 3D a lot in comparison to only looking like a border.

A great example allowing you to tweak it is on jsFiddle. The only caveat is in this case that the background has to be solid, so no textures ;)

share|improve this answer
    
ok. thanks a lot –  Jawad Aug 16 '12 at 19:42
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.