みなさんこんにちは!おさかなです!
今回は「Shadow Palette Generator」について、書いていこうと思います!
それでは、レッツゴー!!!!!
想定読者
・マウス操作でCSSの影を生成したい方
・影ジェネレーターを探している方
・Webデザインに携わっている方
・マウス操作でCSSの影を生成したい方
・影ジェネレーターを探している方
・Webデザインに携わっている方
「Shadow Palette Generator」って何?
「Shadow Palette Generator」とは、CSSの影デザインを作成できる、ジェネレーターのことです。WebブラウザがあればOK!マウス操作で、パラメータを変更することで、影の形をカスタマイズできます!(いいね👍)
![](https://osakanav.com/wp-content/uploads/cocoon-resources/blog-card-cache/3baeaba80c4b754d9729ce64a80dda75.png)
CSS Shadow Palette Generator
Friendly tutorials for developers. Focus on React, CSS, Animation, and more!
![](https://osakanav.com/wp-content/uploads/2022/12/underline-generator-top-160x90.png)
【マウス操作のみ】マーカー下線、CSSコードが生成できちゃうツール
みなさんこんにちは!おさかなです!今回は「Underline Generator」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・「マーカー下線」デザインの、CSSコード作りたい方・デザイ...
実際に使ってみよう!
それでは早速サイトにアクセスしましょう!
![](https://osakanav.com/wp-content/uploads/2023/01/joshwcomeau-1.png)
(マウス乗せると動く〜おもしろい🎉)
![](https://osakanav.com/wp-content/uploads/2023/01/joshwcomeau.gif)
影の形をカスタマイズ!
「Oomph」からは、影の雰囲気をカスタマイズできます。(ふむふむ…。)
![](https://osakanav.com/wp-content/uploads/2023/01/dt2eDLLXVNw0cJR1673244658_1673244697.png)
Oomphが0の場合は、影が小さくなります。
![](https://osakanav.com/wp-content/uploads/2023/01/joshwcomeau-o-1.png)
「Oomph」を最大の1にすると、影が大きくなりました!(お〜!)
![](https://osakanav.com/wp-content/uploads/2023/01/joshwcomeau-omax-1.png)
「Crispy」では、影の粒っぽさを変えられます。
![](https://osakanav.com/wp-content/uploads/2023/01/dt2eDLLXVNw0cJR1673244658_1673244790.png)
Crispy0の場合
![](https://osakanav.com/wp-content/uploads/2023/01/joshwcomeau-c-1.png)
Crispy1の場合
![](https://osakanav.com/wp-content/uploads/2023/01/joshwcomeau-c-max-1.png)
![](https://osakanav.com/wp-content/uploads/2023/01/semblance-top-160x90.png)
Web制作・デザインの基礎知識を、クイズ形式でチェックしよう!
みなさんこんにちは!おさかなです!今回は「Semblance: a frontend design quiz」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・Webの基礎知識を深めたい方・...
(少し休憩🍵)
影の位置・カラーをカスタマイズ!
左下のメニュー「Light Position」では、◯を動かすことで、光の当たり具合を変えられます。(いいね🌅)
![](https://osakanav.com/wp-content/uploads/2023/01/dt2eDLLXVNw0cJR1673244658_1673244929.png)
◯を右下に移動させると、影は左上になりました!(雰囲気変わる!)
![](https://osakanav.com/wp-content/uploads/2023/01/joshwcomeau-houkou-1.png)
◯を左下に移動した場合は、こんな感じです。(おお!)
![](https://osakanav.com/wp-content/uploads/2023/01/joshwcomeau-houkou1-1.png)
(目がまわる〜〜〜🍭)
![](https://osakanav.com/wp-content/uploads/2023/01/kage.gif)
「Background Color」からは、背景色を変更できます!
![](https://osakanav.com/wp-content/uploads/2023/01/joshwcomeau-color-1.png)
色の濃さによっても、影の見え方が変わるので色々と試してみるといいでしょう!(よーし!)
![](https://osakanav.com/wp-content/uploads/2023/01/joshwcomeau-pink-1.png)
CSSコードを取得しよう!
ページをスクロールすると、「CSSコード」が確認できます。(ふむふむ…。)
![](https://osakanav.com/wp-content/uploads/2023/01/joshwcomeau-code-1.png)
コードをコピーする際は、「Copy CSS」を押せばOKです!(わーい☕)
![](https://osakanav.com/wp-content/uploads/2023/01/hK3eyrDbwXerOBa1673245131_1673245142.png)
https://amzn.to/3vPdEvm
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
おさかな
色々不安すぎるけど、不安は行動でしか解消できないと思う。
![ナビまる](https://osakanav.com/wp-content/uploads/2019/09/navmaru-2.jpg)
ナビまる
陰の努力ってやつだねー
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!
![](https://osakanav.com/wp-content/uploads/2022/10/flexboxfroggy-top-160x90.png)
【CSS】FlexBoxの使い方が学べるサイト【FLEXBOX FROGGY】とは?
みなさんこんにちは!おさかなです!今回は「FLEXBOX FROGGY」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・FlexBoxをマスターしたい方・Webサイト作成・Webデザインに...