NoodlでCSSによる影の表現 #CSS

概要

NoodlのVer2で新規に実装されたCSSを使って、Noodlの表現向上を試してみます。

サンプルデモ・サンプルデータの利用

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で設定した例です。
詳しくはプロジェクトを確認ください。参考サイト。
デモはごちゃごちゃしてかっこ悪いですが、色々できますよという例です。

影や背景を設定することで視認性を変えることはできます。

淡い色のテキストを影で目立たせる

{
    textShadow:"1px 1px green"
}

背景色を使いTextInputの位置を明確にする

{
    padding:"0 16px",
    margin:"5px 10px",
    background:"#EDA"
}

まとめ

NoodlでもCSSを使うことで、これまで以上に色々な表現ができるようになります。
ユーザビリティ改善に活用してみてください。

NoodlでCSSによる影の表現

概要

目次