ゆるっと広告業界

デザイナーのじたばた。

Go To Anywhere、CSS。

こんばんは、さじです。

 

どこか行く?どこにも行けないね!の東京都民です。

都民はおうちで過ごしましょう。。

といいますか、梅雨が明けないのです。

このまま冷夏になってしまったら。。

照りつける日差しが恋しい今日この頃。

 

このところ少しやってませんでしたが

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;に変更しました。