最近接到一個需求，製作醫學疾病風險自我檢測頁面，客戶提供的設計圖質感不錯，只不過有設計感的畫面在製作 RWD 效果時，難度會提高很多。
其中一個部分需要使用高超的 CSS 技巧「縷空文字+外框」，這樣的效果無法用簡單的 CSS 語法做出來，原設計圖版面如下(紅框標示的部分)：
那麼讀者可以先思考一下，如果使用純 CSS 的話，要怎麼做出這個「文字內部粗體縷空 + 文字外框陰影」效果？
一、文字外框 text-stroke
一開始 Google 到文字外框的效果可用 CSS 語法-webkit-text-stroke: 1px #fff;
先來測試基本效果，以上 CSS 語法先測試 1px 外框，效果如下：
WFU BLOG
文字縷空外框範例
- 英文字體效果還可以
- 中文字不太行，看起來 text-stroke 會吃掉字體寬度
-webkit-text-stroke: 1px #fff; font-weight: bold;
因為 text-stroke 會佔據 font-size 寬度，所以試著把字體加粗：
WFU BLOG
文字縷空外框範例
這樣子看起來好多了。
3. 效果3
-webkit-text-stroke: 2px #fff; font-weight: bold;
但是外框要粗一點效果比較好，所以語法改 2px外框：
WFU BLOG
文字縷空外框範例
中文字又不行了，text-stroke 吃掉字體寬度的情況，是必須解決的大問題。
二、文字陰影 text shadow
另一個製作文字外框的技巧，是使用 CSS 語法 text shadow，教學範例可參考這個討論串「Font outline using only CSS」。text-shadow: 0 0 5px #5b947f, 0 0 5px #5b947f, 0 0 5px #5b947f, 0 0 5px #5b947f; font-weight: bold;
利用以上語法測試效果，將字體加粗並設定了 5px 外框陰影，效果如下：
WFU BLOG
文字縷空外框範例
- 看起來效果很不錯，無論字體多大多寬，text shadow 都不會侵佔字體空間
- 只可惜這效果跟客戶提供的設計圖稍稍不太一樣
三、完美組合語法
還好找到這篇教學「如何利用 CSS 製作完美的文字外框」。作者製作的原理整理如下：- 製作兩層一模一樣的文字內容，位置重疊
- 上層為原本的文字，會遮蓋下層
- 下層利用 text-stroke 做出更大面積的文字，自然形成外框效果
四、Blogger 實作技巧
以下提供範例程式碼：<div class="stroke" data-stroke="WFU BLOG">WFU BLOG</div>
<div class="stroke" data-stroke="文字縷空外框範例">文字縷空外框範例</div>
<style>
.stroke {position: relative; color: #fff; font-size: 2rem; z-index: 10; background: #A7CFA2; text-align: center; padding: 5px; letter-spacing: 10px; }
.stroke:before {position: absolute; z-index: -1; -webkit-text-stroke: 5px #5b947f; content: attr(data-stroke); }
</style>
下面可看到以上 CSS 的效果，總算比較接近客戶的設計圖了：
WFU BLOG
文字縷空外框範例
更多 CSS 相關技巧：
沒有留言:
張貼留言注意事項：
◎ 勾選「通知我」可收到後續回覆的mail！
◎ 請在相關文章留言，與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器，否則無法登入 Google 帳號留言(只能匿名留言)！
◎ 提問若無法提供足夠的資訊供判斷，可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢，建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」；或參考「Blogger 行動版範本修改技巧 」，或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站，請參考「Blogger 免費諮詢 + 付費諮詢」
◎ 若是使用官方 RWD 範本，請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改！
◎ 若留言要輸入語法，"<"、">"這兩個符號請用其他符號代替，否則語法會消失！
◎ 為了過濾垃圾留言，所有留言不會即時發佈，請稍待片刻。
◎ 本站「已關閉自刪留言功能」。