概要
NoodlのVer2で新規に実装されたCSSを使って、Noodlの表現向上を試してみます。
目次
- Noodl上でのCSSの書き方
- 影の表現
- 塗りつぶしの表現
- おまけ
サンプルデモ・サンプルデータの利用
GitHub上のサンプルデータと構築手順
Githubから/Noodl2_CSSDemo以下を対象PCにCloneしてください。
プロジェクトには、影・塗りつぶし・おまけの3種類デモをコンポーネントとして作成し、3つのデバイスとして登録しています。実行時には実行したいdeviceを選択してください。
1. Noodl上でのCSSの書き方
あまり説明はありませんが、Noodl Ver2では各Visualノードに対して、CSS Styleを適用できます。Properttyes>AdvancedのEditから設定します。
文法は一般的なCSSと同じですが、若干違うところもあります。
例えば、通常下記のようにCSSを設定しますが、Noodlでは下のように書きます
CSS | Noodl |
---|---|
p {color:blue;line-height:1.5;} | {color:"blue",lineHeight:"1.5"} |
セレクタ{プロパティ:値;} | {プロパティ:"値"} |
NoodlでのCSS設定(違い)
- セレクタを設定しない、書かない
- プロパティに-(ハイフン)がある場合、-を削除して続く文字を大文字にする
- 値は""(ダブルクオート)で囲む
- 複数のスタイルを指定する場合は;(セミコロン)ではなく,(コロン)で区切る
- プロパティと値の組合せは改行ができません。1行で書きましょう。
- などです。・・・上記でほぼOKですが、それでもNoodlで使えないプロパティなどありました。他にルールがわかる方、ご連絡お待ちしています。
CSS Styleの設定例
{boxShadow:"0 20px 0 -10px rgb(198, 224, 231)"}
2. 影の表現
Groupノードに影をつけてみましょう。影の設定方法はこの記事を参考にさせていただきました。
通常の影
{boxShadow:"0 10px 25px 0 rgba(0, 0, 0, .5)"}
内側に影を出す
{boxShadow:"inset 0 10px 25px 0 rgba(0, 0, 0, .5)"}
Neumorphism(ニューモーフィズム)
{transition:"box-shadow 0.5s",boxShadow:"10px 10px 30px rgba(18, 47, 61, 0.5),-10px -10px 30px rgba(248, 253, 255, 0.9),inset 10px 10px 30px transparent,inset -10px -10px 30px transparent"}
重なった紙のような影
{boxShadow:"0 20px 0 -10px rgb(198, 224, 231),0 40px 0 -20px rgb(105, 171, 209),0 60px 0 -30px rgb(27, 115, 165)"}
色と角度の違う影
{boxShadow:"-10px 10px 25px rgba(230, 180, 15, 0.9),10px -10px 25px rgba(8, 131, 161, 0.9)"}
また、CSS Stypeを使うことで、Imageにも影をつけることができます。
BoxShadowでは透過領域にも影がつく
{boxShadow:"0 10px 25px 0 rgba(0, 0, 0, .5)"}
DropShadowでは透過領域を除いた正しい影がつく
{filter:"drop-shadow(0px 5px 10px rgb(0, 0, 0))"}
3. 塗りつぶしの表現
Groupの背景色にCSSを使うことで、グラデーションやパターンを指定することができます。
グラデーション
{backgroundImage:"linear-gradient(45deg,#f4c14e, #d36950)"}
複数色のグラデーション
{backgroundImage:"linear-gradient(#6fb8d9, #f4c14e, #d36950)"}
グラデーションの線形リピート
{backgroundImage:"repeating-linear-gradient(#f4c14e 0%, #d36950 30%)"}
グラデーションの放射リピート
{backgroundImage:"repeating-radial-gradient(circle closest-side at 100px 200px, #f4c14e, #d36950)"}
縦横のリピートグラデーション
{backgroundImage:"repeating-linear-gradient(90deg,#dddddd 0%, #eeeeee 10%),repeating-linear-gradient(180deg,#eeeeee 0%, #dddddd 10%)",backgroundBlendMode:"difference"}
4. おまけ
TextやTextBox、Groupの背景や枠線、影をCSSで設定した例です。
詳しくはプロジェクトを確認ください。
まとめ
NoodlでもCSSを使うことで、これまで以上に色々な表現ができるようになります。
ユーザビリティ改善に活用してみてください。