最近接到一個需求,製作醫學疾病風險自我檢測頁面,客戶提供的設計圖質感不錯,只不過有設計感的畫面在製作 RWD 效果時,難度會提高很多。
其中一個部分需要使用高超的 CSS 技巧「縷空文字+外框」,這樣的效果無法用簡單的 CSS 語法做出來,原設計圖版面如下(紅框標示的部分):
那麼讀者可以先思考一下,如果使用純 CSS 的話,要怎麼做出這個「文字內部粗體縷空 + 文字外框陰影」效果?
-webkit-text-stroke 做到,教學範例可參考這篇「透過CSS3屬性text-stroke 實現縷空文字邊框效果」。
1. 效果1
一、文字外框 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 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。