之前寫過一篇【用CSS做出來一個文字漸層+文字白框+文字陰影的LOGO區塊，CSS最終解法並符合無障礙】的工作心得，但經過多次實際驗證，filter: drop-shadow方法雖然較為美觀，但在行動瀏覽或是平板，容易觸發 GPU 合成層，導致版面異常(畫面上下空白)，裝置發燙等耗電等問題，因此經改良後，改用CSS LOGO 描邊陰影字工法能維持與原本 filter: drop-shadow相同的效果，且手機平版不會異常，方法如下：
以下是使用-webkit-text-stroke/text-shadow做出來的文字效果，幾乎能90%還原PSD設計效果
文字的PHP常數增加data-storke設定
define('_THEME_LOGO_02','<div class="logo_01_box" aria-hidden="true" tabindex="-1" data-storke="桃園市">桃園市</div><div class="logo_02_box" aria-hidden="true" tabindex="-1" data-storke="快樂">快樂</div><div class="logo_03_box" aria-hidden="true" tabindex="-1" data-storke="國民小學">國民小學</div>');
注意：
- aria-hidden="true"：視覺文字不給讀報軟體讀。
- - tabindex="-1"：避免視覺文字進入 TAB 流。
- data-storke：提供 CSS content:attr(data-storke); 使用。
- 外層已有可讀 aria-label 或 sr-only，不要讓同一段校名被讀兩次。
CSS 核心寫法
#toplogobox{
position:relative;
width:980px;
height:194px;
min-height:194px;
overflow:visible;
--logo_left:163px;
}
#toplogobox #logoimgbox2{
position:absolute;
left:var(--logo_left);
top:66px;
width:530px;
height:66px;
margin:0;
padding:0;
font-family:"Noto Sans TC","Microsoft JhengHei",Arial,sans-serif;
font-weight:800;
line-height:62px;
white-space:nowrap;
z-index:6;
letter-spacing:8px;
overflow:visible;
}
#toplogobox #logoimgbox2 .logo_01_box,
#toplogobox #logoimgbox2 .logo_02_box,
#toplogobox #logoimgbox2 .logo_03_box{
position:relative;
display:inline-block;
margin:0;
padding:0;
font-size:45px;
font-weight:600;
line-height:62px;
letter-spacing:10px;
vertical-align:top;
color:transparent;
-webkit-background-clip:text;
background-clip:text;
}
/*====重點區塊=======*/
/*===藍字是白框厚度====*/
/*===紫字是陰影厚度====*/
#toplogobox #logoimgbox2 .logo_01_box::before,
#toplogobox #logoimgbox2 .logo_02_box::before,
#toplogobox #logoimgbox2 .logo_03_box::before{
content:attr(data-storke);
position:absolute;
left:0;
top:0;
z-index:-1;
color:#ffffff;
-webkit-text-stroke:4px #ffffff;
text-stroke:4px #ffffff;
text-shadow:
1px 1px 0 rgba(145,145,145,.55),
2px 2px 0 rgba(205,205,205,.62),
3px 3px 5px rgba(0,0,0,.28);
}
#toplogobox #logoimgbox2 .logo_01_box{
background-image:linear-gradient(0.5deg,#A4215E 50%,#BF307E 50%);
}
#toplogobox #logoimgbox2 .logo_02_box{
margin-left:6px;
font-size:58px;
letter-spacing:12px;
background-image:linear-gradient(0.5deg,#1F7BB4 50%,#2C9ACB 50%);
}
#toplogobox #logoimgbox2 .logo_03_box{
margin-left:8px;
background-image:linear-gradient(0.5deg,#E57233 50%,#EE9249 50%);
}
這樣透過::before產生白框與陰影，疊在原本文字下方，就能做出圖片中文字白框陰影的效果，有需要的朋友參考看看!!
工作心得撰寫：徐嘉裕 Neil hsu
留言
張貼留言