用CSS做出來一個文字漸層+文字白框+文字陰影的LOGO區塊，CSS最終解法並符合無障礙

網站符合無障礙已經是當今的趨勢了，所以在設計LOGO動畫上不能再用傳統的canvas動畫，因為圖片沒版法自流動，無法符合無障礙AA的CRTL+200放大版面流動效果，只能全部改為CSS+純文字，問題不是在動畫，而是如何用CSS至少能做出70%能像PSD圖檔那樣的文字效果，美觀也是要兼顧，經過努力研究與資料參考，終於寫出來這個【文字漸層+文字白框+文字陰影】CSS效果，如下圖：

以下就是整個代碼結構

透過F12撈出來的HTML結構

<div id="logoimgbox2" aria-label="桃園市立富岡國民中學">

<span aria-hidden="true" tabindex="-1" class="logo_01" data-storke="桃園市立">桃園市立</span>

略..........................

</div>

說明

aria-label是給讀報軟體用的讀報資訊

aria-hidden="true" tabindex="-1" 是讓讀報軟體不要讀取容器中的文字，因為用了::before建構一個文字在底層，同樣文字被讀報兩次會被列缺失

data-storke是給CSS::before的: attr(data-storke);用的

以下為CSS代碼

#logoimgbox2 {

    position: absolute;

    top: 44px;

    left: 174px;

    color: #181818;

    font-size: 290%;

    word-break: break-all;

    font-family: Noto Sans TC;

    font-weight: 600;

    filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, .5));  // 文字陰影(黑色)

    letter-spacing: 0.6rem;

}

#logoimgbox2 .logo_01 {

    position: relative;

    background: linear-gradient(0.5deg, #f49800 50%, #fbb100 50%);  //漸層背景

    -webkit-background-clip: text;  

    background-clip: text;   //讓文字顯示背景圖片(裁切遮罩)

    color: transparent;  //透明文字

}

//::before負責白框

#logoimgbox2 .logo_01::before {

    content: attr(data-storke);

    position: absolute;

    margin-top: 6px;

    z-index: -1;

    -webkit-text-stroke: 4px #FFFFFF;  //產生4px的白色邊框

    text-stroke: 4px #FFFFFF

}

這樣就能同時做出來一個文字漸層+文字白框+文字陰影CSS效果，雖然字體還是比PSD圖片字形差了點，但已經很接近PSD稿了，重點是文字，版面能自流動，不管是RWD還是CTRL+200都沒問題且符合無障礙可識別規範。

以上工作心得分享，有需要的朋友參考看看!

工作心得撰寫：徐嘉裕 Neil hsu