CSS、曖昧の数値化。

こんばんは、さじです。

昨日書いた記事でCSSに集中するあまり小見出しに誤植を見つけて大慌ての朝を迎えました。デザインにコードに、とあちこちに手を出すと結果、誤植が多くなる。。という分不相応の言葉が頭を過ぎります。

得意な方にはこうでしょ？なCSS。
LSSさんに再現していただけました。

little-strange.hatenablog.com

もしかしたら、と淡い期待を込めて
最後に載せたイラレでの作成物。↓

これを元に、コードを書いてくださいました。
LSSさん、ありがとうございます！！

で、コピペしてみました。CSS。 ↓

「青い空とペンキ塗り。」

限りなく近づいてます！これは凄いです！

昨日、悩んでいて、今日検証したのは以下です。

1.色の指定が上手く入らない！

HSLでの指定だと透過度が云々とありました。
HEXでの指定がスムーズなのでそっちでチョイス。

2.どこが位置情報なのかわからない！

影の位置指定の法則を理解しました。
text-shadow:のあとがXY値と。

3.影の色が背景グラデに乗せられない！

何らかの不手際があったと推測されます。
昨日のは文字への情報を途中増やしたため
何が何だかわからなくなっていました。

そうそう、もともと昨日のCSSはLSSさんのコピペCSSを書き換えて作ってましたがCSSの変更って「ある公式」があります。ではそれを利用してこれを作ってみましょう」みたいな数学（算数）のように感じていました。だから苦手意識が。。

自分のイメージした物をコードに起こしてもらって検証したことで、ここがコレでここがソレ、の答え合わせが出来たので非常に身近になりました。

で、楽しくなったので自分の中で宿題にしていた秋、春、冬バージョンも作成してみました。色の部分は書いておきますね。

影をもう少しぼんやりしたいので色を薄く。
text-shadow: 12px 12px 5px #444455
→text-shadow: 12px 12px 6px #636363

右側を白に抜けさせる為に、グラデーションを青→水色→白にして応用が効きやすく（書き換えをより少なく！）しました。

夏空。調整後。
linear-gradient(90deg, hsl(223,100%,70%) 0%,hsl(179,100%,60%) 60%, #ffffff 90%)

「 青い空とペンキ塗り。」

 

秋。
linear-gradient(90deg, hsl(0,53%,58%) 0%,#cfc463 60%, #ffffff 90%)

「 秋の名曲アルバム。」

冬。
linear-gradient(90deg, #cfd1d1 0%,#8dc7c7 60%, #ffffff 90%)

「 凍てつく冬。」

春。
linear-gradient(90deg, #ff709b,#fff370 60%, #ffffff 90%)

「 春のおすすめ本。」

おまけ。text-shadowもいじって遊びました。

スタイリッシュ。
linear-gradient(90deg, #454545 0%,#3f5375 60%, #ffffff 90%)
text-shadow: 12px 12px 6px #ffffff

「 スタイリッシュ。」

ビタミンカラー。
linear-gradient(90deg, #9cff66 0%,#fcf400 30%, #fc7600 60%, #ffffff 90%)
text-shadow: 6px 6px 10px #fc0000

「 ビタミンセッシュ。」

おあとがよろしいようで。作ってもらったコードで色々出来て楽しい！

もし気に入った色合いがありましたらご自由にお使いくださいませ。cssコードは上述LSSさんちにあります。

さじ