【CSS】影ジェネレーター【Shadow Palette Generator】とは？

みなさんこんにちは！おさかなです！

今回は「Shadow Palette Generator」について、書いていこうと思います！

それでは、レッツゴー！！！！！

「Shadow Palette Generator」って何？

「Shadow Palette Generator」とは、CSSの影デザインを作成できる、ジェネレーターのことです。WebブラウザがあればOK！マウス操作で、パラメータを変更することで、影の形をカスタマイズできます！(いいね👍)

CSS Shadow Palette Generator

Friendly tutorials for developers. Focus on React, CSS, Animation, and more!

www.joshwcomeau.com

【マウス操作のみ】マーカー下線、CSSコードが生成できちゃうツール

みなさんこんにちは！おさかなです！今回は「Underline Generator」について、書いていこうと思います！それでは、レッツゴー！！！！！想定読者・「マーカー下線」デザインの、CSSコード作りたい方・デザイ...

osakanav.com

2022.12.28

実際に使ってみよう！

それでは早速サイトにアクセスしましょう！

(マウス乗せると動く〜おもしろい🎉)

影の形をカスタマイズ！

「Oomph」からは、影の雰囲気をカスタマイズできます。(ふむふむ…。)

Oomphが0の場合は、影が小さくなります。

「Oomph」を最大の1にすると、影が大きくなりました！(お〜！)

「Crispy」では、影の粒っぽさを変えられます。

Crispy0の場合

Crispy1の場合

Web制作・デザインの基礎知識を、クイズ形式でチェックしよう！

みなさんこんにちは！おさかなです！今回は「Semblance: a frontend design quiz」について、書いていこうと思います！それでは、レッツゴー！！！！！想定読者・Webの基礎知識を深めたい方・...

osakanav.com

2023.01.04

(少し休憩🍵)

影の位置・カラーをカスタマイズ！

左下のメニュー「Light Position」では、◯を動かすことで、光の当たり具合を変えられます。(いいね🌅)

◯を右下に移動させると、影は左上になりました！(雰囲気変わる！)

◯を左下に移動した場合は、こんな感じです。(おお！)

(目がまわる〜〜〜🍭)

「Background Color」からは、背景色を変更できます！

色の濃さによっても、影の見え方が変わるので色々と試してみるといいでしょう！(よーし！)

CSSコードを取得しよう！

ページをスクロールすると、「CSSコード」が確認できます。(ふむふむ…。)

コードをコピーする際は、「Copy CSS」を押せばOKです！(わーい☕)

プロの「引き出し」を増やす　HTML+CSSコーディングの強化書 | 草野あけみ | 工学 | Kindleストア | Amazon

Amazonで草野あけみのプロの「引き出し」を増やす　HTML+CSSコーディングの強化書。アマゾンならポイント還元本が多数。一度購入いただいた電子書籍は、KindleおよびFire端末、スマートフォンやタブレットなど、様々な端末でもお楽しみいただけます。

amzn.to

これで全ての操作は完了です。(やった～！)
お疲れ様でした☕

ここまで読んでくださり、ありがとうございました！

【CSS】FlexBoxの使い方が学べるサイト【FLEXBOX FROGGY】とは？

みなさんこんにちは！おさかなです！今回は「FLEXBOX FROGGY」について、書いていこうと思います！それでは、レッツゴー！！！！！想定読者・FlexBoxをマスターしたい方・Webサイト作成・Webデザインに...

osakanav.com

2022.10.17