CODEWITHSUNDEEP
cssms-wordepub
Lawson
Lawson

Reputation: 634

Attempting to reproduce MS Word styling in CSS

I'm attempting to recreate the attached style from MS Word in CSS to use in an ePUB I'm working on for a friend. I can always take a screenshot of each chapter heading and do it that way, but I'd prefer that it be done in CSS.

Here's what I've got in Word:

enter image description here

enter image description here

Here is the code I have so far:

@font-face {
    font-family : "AR Christy";
    font-style : normal;
    font-weight : normal;
    src : url("../fonts/archristy.ttf");
}
h1 {
    font-family : "AR Christy", serif;
    font-weight : bold;
    font-style : normal;
    font-size : 30pt;
    text-decoration : none;
    font-variant : normal;
    color : #95B932;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: white;
   -webkit-text-stroke: 1px white;
text-shadow: 2px 2px 2px #888888;
    line-height : 1;

}

And here's how it looks when rendered in Safari: enter image description here

I seem to be having trouble with the "texture" of the text, if that makes sense.

The font is available here if you're interested in trying to help: http://fontzone.net/font-details/ar-christy

I've added the following two closeup pictures to make the difference more obvious. Here's the Word version:

enter image description here

And here's the current CSS version:

enter image description here

EDIT: Thanks to Kelly's suggestion, I decided that I had to use multiple shadow layers. This is the code I ended up using:

text-shadow: rgb(187, 187, 187) 0px 1px 0px,
  rgb(181, 181, 181) 0px 2px 0px,
  rgb(172, 172, 172) 0px 3px 0px,
  rgb(160, 160, 160) 0px 4px 0px,
  rgb(145, 145, 145) 0px 5px 0px,
  rgb(127, 127, 127) 0px 6px 0px,
  rgba(0, 0, 0, 0.199219) 0px 7px 1px,
  rgba(0, 0, 0, 0.296875) 0px 8px 6px;

Which looks like this... Not exactly a match, but I like the overall feel:

enter image description here

Upvotes: 1

Views: 736

Answers (3)

Lawson
Lawson

Reputation: 634

The end result is that nothing would mimic Word's styling exactly. I attempted to use the code mentioned to create an inner shadow, but it didn't work with the font I was using.

I ended up going with a different 3d effect, that was achieved by layering multiple shadows. Here's the shadow code I used, along with the final text:

text-shadow: rgb(187, 187, 187) 0px 1px 0px,
  rgb(181, 181, 181) 0px 2px 0px,
  rgb(172, 172, 172) 0px 3px 0px,
  rgb(160, 160, 160) 0px 4px 0px,
  rgb(145, 145, 145) 0px 5px 0px,
  rgb(127, 127, 127) 0px 6px 0px,
  rgba(0, 0, 0, 0.199219) 0px 7px 1px,
  rgba(0, 0, 0, 0.296875) 0px 8px 6px;

enter image description here

I gave Kelly credit for sending me down the right path with multiple layers.

Upvotes: 0

kelly johnson
kelly johnson

Reputation: 1636

It will be hard to exactly mimic that inner-shadow effect as the illusion of 'pillow embossed' (as in the photoshop effect) isn't an evenly distributed effect. AFAIK, css effects are all behind an object so you would need to get into placing one version above another to get it close.

Upvotes: 0

MarmiK
MarmiK

Reputation: 5785

You are missing shadow only, not texture difference..

just add this line and you will see similar result..

 -webkit-text-shadow: 2px 2px 2px #888888;

Edit,

with the shadow effect, modify this(as you don't want -webkit-)

text-shadow:2px 4px 6px RGBA(0,0,0,0.7);

Now you want tyhe 3d effect in font that is possible using inset shadow, check the fiddle I have created that have 2 text one have shadow, and another have inset shadow, that creates look a like effect.. although its not the same as word 3d, FIDDLE

I hope this will help.

Upvotes: 1

Related Questions