ゆるっと広告業界

デザイナーのひねもす。

まだら模様、CSS。

こんばんは、さじです。

 

飛行機や重機などの大きな乗り物が好きです。

トラックやタンクローリーも。

乗り物に詳しい訳ではありませんが

遠目に見ているときと間近で見るときの違いに

ひやっというか、どきっというか

大きいなあ、と何度も思い出すのです。

 

昨年、羽田空港に用事で出かけた時の記事は既出ですが

空港でも何枚か写真を撮ってました。

f:id:conasaji:20200722211921j:plain

飛行機って雲の色にカムフラージュですが

地上にいる時は輝いて目立ちますね。

ピカピカな機体は自分の車より美しいです。

 

CSSで「迷彩柄」というキーワードが出ました。

グラデーション文字の記事でのコメント欄です。

そうそう、やりたい宿題があったんだったなと

連休前に一仕事です。

コードの解説は上記でどうぞ(笑)。

 

迷彩もカモフラージュなんですよね。まだら模様。

アーミー柄とも言いますでしょうか。

陸ではグリーン、海ではブルー、と

自衛隊の迷彩柄には違いがあるんだと以前聞きました。

なので、2パターンでいきます。

陸の方は、キャンプとかにも使えますね。 

 

陸上自衛隊

<p><span style="font-size: 50px; font-weight: bold; color: black; text-shadow: 10px 10px 10px #00000020; background-color: #02703b; background-size: 50px 60px; background-image: radial-gradient(circle 20px at 25% 25%,#295733 50%,transparent 80%),radial-gradient(circle 30px at 75% 75%,#a18d54 25%,transparent 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">陸上自衛隊</span></p>

 

海上自衛隊

<p><span style="font-size: 50px; font-weight: bold; color: black; text-shadow: 10px 10px 10px #00000020; background-color: #07547a; background-size: 50px 60px; background-image: radial-gradient(circle 20px at 25% 25%,#454e54 50%,transparent 80%),radial-gradient(circle 20px at 75% 75%,#023a69 25%,transparent 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">海上自衛隊</span></p>

 

自宅警備

<p><span style="font-size: 50px; font-weight: bold; color: black; text-shadow: 10px 10px 10px #00000020; background-color: #87898a; background-size: 50px 60px; background-image: radial-gradient(circle 20px at 25% 25%,#c9c9c9 50%,transparent 80%),radial-gradient(circle 30px at 75% 75%,#c9c9c9 25%,transparent 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">自宅警備隊</span></p>

 

3つ目は2つじゃ寂しいので、おまけです。

background-sizeを変えると繰り返しの柄が

細かくたくさんになります。

文字を大きくしたらわかりやすい。

陸自

<p><span style="font-size: 120px; font-weight: bold; color: black; text-shadow: 10px 10px 10px #00000020; background-color: #02703b; background-size: 50px 50px; background-image: radial-gradient(circle 20px at 25% 25%,#295733 50%,transparent 80%),radial-gradient(circle 30px at 75% 75%,#a18d54 25%,transparent 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">陸自</span></p>

 

我が家の自宅警備隊員は

初バイトの面接が近いのでどきどきのようです。

 

さじ