1

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

Improve this question
5
  • Retagged (after misreading and answering how to do a letterpress in photoshop)
    – Yisela
    Aug 15, 2012 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, 2012 at 1:27
  • @Jawad yes you're correct..I mistyped earlier.... moved info to an answer.
    – Scott
    Aug 15, 2012 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, 2012 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, 2012 at 10:30

2 Answers 2

Reset to default
1

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.

Improve this answer
3
  • 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, 2012 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, 2012 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, 2012 at 13:25
1

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 ;)

Improve this answer
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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