Letter Press Effect

1
votes

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

4
htmlcolorscss
I guess this doesn't look unreasonable: jsfiddle.net/userdude/JPhmN – Jared Farrish
@Jared Farrish: Thanks but it's really not that obvious. Maybe something like midwinter-dg.com/… – Jawad
This looks a little better: jsfiddle.net/userdude/JPhmN/1 Part of the problem is your choice of background; it's hard to see the white border. – Jared Farrish
You currently have a letterpress effect, what more are you after? – joshnh
Maybe: jsfiddle.net/userdude/JPhmN/2 – Jared Farrish

4 Answers

2
votes

fool around with this use of a few text-shadows ---

http://jsfiddle.net/sheriffderek/bTZs9/1/

the blur really depends on the font-size... and using rgba color helps take the guess work out of finding different tints to match the paper color...

enter image description here

1
votes

Why don't you just do less of a blur on the text-shadow?

You're using:

color: #222;
text-shadow: 1px 1px 1px #FFF;

Use less of a blur and your text-shadow becomes more prevalent:

color: #222;
text-shadow: 1px 1px 0px #FFF;

Blur is the third parameter in this case, which you should have a value of 0px rather than 1px for a more letter-press-like effect.

0
votes

Color #222 is so dark. You must use to #333 or #444 to stamp ink. And the ink is not solid thing. You have to give some noise to text with like this thing : http://www.mightymeta.co.uk/demos/css-noise/

0
votes

It's a little bit fancy, but you could use pseudo elements:



JSFiddle

http://jsfiddle.net/Asustaba/MLEwp/



CSS


    #stamped {
    display: block;
    color: white;
    font: 3em Arial, sans-serif;
    position: relative;
    }

    #stamped:before, #text:after {
    content: attr(title);
    color: #222;
    position: absolute;
    }

    #stamped:before { top: 1px; left: 1px; }
    #stamped:after  { top: 2px; left: 2px; }



HTML


    <h1 id="stamped" title="CATTLE FARMS">CATTLE FARMS</h1>