みなさんこんにちは！おさかなです！
今回は「Shadow Palette Generator」について、書いていこうと思います！
それでは、レッツゴー！！！！！
想定読者
・マウス操作でCSSの影を生成したい方
・影ジェネレーターを探している方
・Webデザインに携わっている方
・マウス操作でCSSの影を生成したい方
・影ジェネレーターを探している方
・Webデザインに携わっている方
「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です！(わーい☕)
https://amzn.to/3vPdEvm
amzn.to
おさかな
色々不安すぎるけど、不安は行動でしか解消できないと思う。
ナビまる
陰の努力ってやつだねー
これで全ての操作は完了です。(やった～！)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました！
【CSS】FlexBoxの使い方が学べるサイト【FLEXBOX FROGGY】とは？
みなさんこんにちは！おさかなです！今回は「FLEXBOX FROGGY」について、書いていこうと思います！それでは、レッツゴー！！！！！想定読者・FlexBoxをマスターしたい方・Webサイト作成・Webデザインに...
osakanav.com
2022.10.17
