こんばんは、さじです。
どこか行く？どこにも行けないね！の東京都民です。
都民はおうちで過ごしましょう。。
といいますか、梅雨が明けないのです。
このまま冷夏になってしまったら。。
照りつける日差しが恋しい今日この頃。
このところ少しやってませんでしたが
CSSの新アレンジをLSSさん（id:little_strange）が
提案してくれてました。
グラデーションの文字バージョンですね。
これ見て真っ先に考えたのが、「影つけたい！」 。
コメントで書いたら教えてくださいましたので
早速とりかかりました。超久しぶりのCSS遊びです。
文字をグラデーション表現するのは
Illustratorなどではちょちょいのちょいなのですが
CSSだと色々と小細工が必要のようです。
グラフィックでグラデーションを綺麗に見せるには
光の透過をイメージして自然な仕上がりにするのが
最近の流行りみたいなので、自分が仕事でよくやる
グラデーションをCSSで表現してみました。
Go To Anywhere.
。。細かすぎて伝わらないでしょうか？（笑）
text-shadow入れてるんですが影なくない？って思いますよね。
なので、これもご用意しました。
Go To Anywhere.
text-shadowなしのバージョンです。
ほんの少し、上のやつのが深みが出ません？
比べないとわからないという、この地味な違いを
楽しんでいただけましたら幸いです。
<p><span style="font-family:arial black; font-size: 40px; font-weight: bold; color: lightblue; text-shadow: 0px 0px 5px #00000020; background-color: #b3b3b3; background-image: linear-gradient(180deg,transparent 20%,#999999,transparent 60%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"> Go To Anywhere.</span></p>
これはブログの見出しなどではちょっとね、なので
（もやっとして見えるので読みにくいです）
一般的に好まれるであろう、普通の影も作りました。
北海道行く人用。
Go To Hokkaido!
<p><span style="font-family:Verdana; font-size: 39px; font-weight: bold; color: lightblue; text-shadow: 10px 10px 5px #00000020; background-color: #09ab1b; background-image: linear-gradient(180deg,transparent 20%,#17e009 60%,transparent 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"> Go To Hokkaido!</span></p>
京都行く人用。
Go To Kyoto!
<p><span style="font-family:Verdana; font-size: 40px; font-weight: bold; color: lightblue; text-shadow: 10px 10px 5px #00000020; background-color: red; background-image: linear-gradient(180deg,transparent 20%,#8c0707 60%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"> Go To Kyoto!</span></p>
東京都民用。
Go To Home.
<p><span style="font-family:Verdana; font-size: 40px; font-weight: bold; color: lightblue; text-shadow: 10px 10px 5px #00000020; background-color: gray; background-image: linear-gradient(180deg,transparent 20%,black 60%,transparent 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"> Go To Home.</span></p>
Go To どこか。行きたいです。
さじ
7/19追記
太字表記font-family:arial black;に変更しました。
7/19追記(2)
上記arial blackがiPhone非対応のため太字表記font-family:Verdana;に変更しました。