iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 24
2
Modern Web

鉄人28号FX系列 第 24

鉄人28号FX 鉄人24号「影隨者」text-shadow

★ 地圖雷奧鎮市中心 ↓↓↓

顯示雷奧鎮街上位置圖

街上好不熱鬧,隨處閒晃著。(
竹輪也太美味! 呵 )

真想再吃?!

怪? 從剛就??? (
揉眼睛。)

:到底怎麼回事!!
眼前怎麼全是幻覺疊影??

持續暈眩中!!!
(◎o◎)

雷奧鎮 [影隨者]
只要試著掌控,分辨其中真偽,就能消除症狀!!
進入鎮內所有人,都需面對此考驗。


★★★ 關卡條件 ↓↓↓

文本陰影 (color, offset-x, offset-y, blur-radius)

該屬性為文字添加陰影。它接受以半形逗號分隔的陰影列表,應用於文本及其 text-decoration。每個陰影由元素的 XY 方向偏移值,模糊半徑和顏色值組成。

適用於 ::first-letter::first-line 偽元素。當給出多個陰影時,順序由前至後作用,首個指定的陰影位於最前層。多重模糊範圍會產生疊加效果。

  • offset-xoffset-y
    必選值。offset-x、offset-y兩個連續給值,這些 <length> 值指定陰影相對文字的偏移量。<offset-x> 指定水平偏移量,若是負值則陰影位於文字左側。<offset-y> 指定垂直偏移量,若是負值則陰影位於文字上側。如果兩個值均為 0,則陰影位於文字正後方。(<blur-radius> 模糊範圍若向外擴散,為可見效果)

  • blur-radius
    可選值。為一個 <length> 值。數值越大模糊範圍越擴散,陰影同時變寬和變亮。如未指定,則初始值為 0

  • color
    可選值。陰影顏色。可以在偏移值之前或之後給定義。如未指定,則顏色值將留給瀏覽器決定,如需跨瀏覽器保持色彩一致,則應明確定義顏色。


雷奧鎮 [影隨者]
剩沒多少時間!!快!!
方法已告訴你,接下來只能靠自己找到其規則。

:難道? 我懂了!!
好像是~~ 啊~劇烈頭痛!!!!
text-shadow

/* Shadows are visible under slightly transparent text color */
h2 {
  font: italic bold 6em / 2em Georgia, Serif;
  text-align: center;
  margin: 0;
}

.sample_shadow1 {
  color: rgba(10, 60, 150, 0.8);
  text-shadow: 1px 4px 6px #def, 0 0 0 #000, 1px 4px 6px #def;
}

.sample_shadow2 {
  background-color: #3a50d9;
  color: #e0eff2;
  text-shadow: -4px 3px 0 #3a50d9, -14px 7px 0 #0a0e27;
}

.sample_shadow3 {
  color: #444;
  text-shadow: 
      1px 0px 1px #ccc, 0px 1px 1px #eee, 2px 1px 1px #ccc,
      1px 2px 1px #eee, 3px 2px 1px #ccc, 2px 3px 1px #eee, 
      4px 3px 1px #ccc, 3px 4px 1px #eee, 5px 4px 1px #ccc, 
      4px 5px 1px #eee, 6px 5px 1px #ccc, 5px 6px 1px #eee, 
      7px 6px 1px #ccc;
}

:皆是陰影,只有單一是真的。

好!好了。(
暈眩立馬好轉。)

看來我是找到對的答案了。


[ 追加經驗值 ]
註:參考來源 CSS-Tricks text-shadow
關於 MDN 由 Mozilla Contributors 製作,以 CC-BY-SA 2.5 釋出。


上一篇
鉄人28号FX 鉄人23号「字臉獅」@font-face
下一篇
鉄人28号FX 鉄人25号「圖形鹿」SVG <text> <tspan>
系列文
鉄人28号FX30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言