CSS / 文字陰影效果 (適用各瀏覽器)－二流設計師的小筆記

CSS / 文字陰影效果 (適用各瀏覽器)

文字陰影

範例：測試內容 Test content

CSS Code

h3 {text-shadow: 0.1em 0.1em #333}

模糊文字陰影

範例：測試內容 Test content

CSS Code

h3.a {text-shadow: 0.1em 0.1em 0.05em #333}

h3.b {text-shadow: 0.1em 0.1em 0.2em black}

可讀的白色文字

範例：測試內容 Test content

CSS Code

h3 {color: white}

h3.a {color: white; text-shadow: black 0.1em 0.1em 0.2em}

多重陰影

範例：測試內容 Test content

CSS Code

h3 {text-shadow: 0.2em 0.5em 0.1em #600,-0.3em 0.1em 0.1em #060,0.4em -0.3em 0.1em #006}

立體凹凸

範例：測試內容 Test content

CSS Code

h3.a {text-shadow: -1px -1px white, 1px 1px #333}

h3.b {text-shadow: 1px 1px white, -1px -1px #444}

繪畫字母做為輪廓

範例：測試內容 Test content

CSS Code

h3 {text-shadow: -1px 0 black, 0 1px black,1px 0 black, 0 -1px black}

霓虹發光

範例：測試內容 Test content

CSS Code

h3.a {text-shadow: 0 0 0.2em #52dfff}

h3.b {text-shadow: 0 0 0.2em #fff582, 0 0 0.2em #fff582}

h3.c {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,0 0 0.2em #87F}

jun431869

二流設計師的小筆記

jun431869 發表在痞客邦留言(0) 人氣()

E-mail轉寄

二流設計師的小筆記

二流設計師的小筆記