試圖在CSS中重現MS Word樣式

我正在嘗試重新創建CSS中的MS Word的附加樣式，以便在我正在爲朋友工作的ePUB中使用。我總是可以截取每章的標題，並以這種方式進行，但我更喜歡用CSS來完成。試圖在CSS中重現MS Word樣式

這是我在Word中已經有了：

enter image description here

這裏是我的代碼至今：

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

}

這裏是它的外觀呈現時在Safari中： enter image description here

我似乎在文本的「紋理」上遇到了麻煩，如果這樣做有道理的話。

的字體是可以在這裏找到，如果你有興趣嘗試的幫助： http://fontzone.net/font-details/ar-christy

我已經添加了以下兩種特寫照片，以賺取差價更加明顯。這裏的Word版：

enter image description here

而這裏的當前CSS版本：

enter image description here

編輯：多虧了凱利的建議下，我決定，我不得不使用多個影子層。這是我最後使用的代碼：

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

來源

2013-06-28 Lawson

最終的結果是沒有什麼東西可以完全模仿Word的樣式。我試圖使用上面提到的代碼來創建一個內部陰影，但它不適用於我使用的字體。

我結束了與不同的3D效果，這是通過分層多個陰影。下面是我使用的陰影代碼，最終文本一起：

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

我給了凱利的信貸給我正確的道路與多層。

來源

2013-07-03 00:57:36 Lawson

你只丟失陰影，質地不差..

剛剛加入這行，你會看到類似的結果..

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

編輯，

與陰影效果，修改此（如您不想-webkit-）

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

現在你想在字體tyhe 3D效果這是可能採用插入式陰影，檢查我創造的小提琴有2個文字一個有影子，另一個有插入的影子，創造看起來像一個效果..雖然它不像字3d， FIDDLE

我希望這會有所幫助。

來源

2013-07-01 07:08:49 MarmiK

我已經有文字陰影：2px 2px 2px＃888888;添加webkit版本的相同的東西沒有區別。 – Lawson

@Lawson類似這樣的東西：'text-shadow：0px 2px 10px rgba（0,0,0,0.8）' 如果你需要更多的模糊，請調整第三個參數（10px）。如果您需要較深的顏色，請增加alpha（0.8）。 – meiamsome

我怎麼不得不說，我已經提供了一半，圖層不一樣，你看，但如果它滿足你的需要，那很好，FYI仍然內部（插圖）陰影是缺少......在接受的答案.. – MarmiK

很難精確地模仿內部陰影效果，因爲'枕頭壓花'的錯覺（如photoshop效果）不是均勻分佈的效果。 AFAIK，CSS效果都是在一個對象後面的，所以你需要把一個版本放在另一個之上來讓它靠近。

來源

2013-07-01 22:38:35

我'我會給你獎勵點給我的想法分層多個陰影。我結束了這個：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.199219）0px 7px 1px， rgba（0，0，0，0.296875）0px 8px 6px; – Lawson

太棒了！謝謝你，好交易。 –

試圖在CSS中重現MS Word樣式

回答

相關問題