NoodlでCSSによる影の表現

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

## 目次

1. Noodl上でのCSSの書き方
2. 影の表現
3. 塗りつぶしの表現
4. おまけ

## サンプルデモ・サンプルデータの利用
･ [影の表現デモ](https://macole.github.io/Noodl2_CSSDemo/index.html?device=02_Shadow)
･ [塗りつぶし表現デモ](https://macole.github.io/Noodl2_CSSDemo/index.html?device=03_BackgroundImage)
･ [おまけデモ](https://macole.github.io/Noodl2_CSSDemo/index.html?device=01_Text)

## GitHub上のサンプルデータと構築手順
[Github](https://github.com/macole/Noodl)から/Noodl2_CSSDemo以下を対象PCにCloneしてください。
プロジェクトには、影・塗りつぶし・おまけの3種類デモをコンポーネントとして作成し、3つのデバイスとして登録しています。実行時には実行したいdeviceを選択してください。

## 1. Noodl上でのCSSの書き方
あまり説明はありませんが、Noodl Ver2では各Visualノードに対して、CSS Styleを適用できます。Properttyes>AdvancedのEditから設定します。
![image522.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/e60bbec1-4610-08a0-679f-a4a8ca084f7d.png)

文法は一般的なCSSと同じですが、若干違うところもあります。
例えば、通常下記左のようにCSSを設定しますが、Noodlでは右下のように書きます

|CSS|Noodl|
|:-:|:-:|
|p {color:blue;line-height:1.5;}|{color:"blue",lineHeight:"1.5"}|
|セレクタ{プロパティ:値;}|{プロパティ:"値"}|

### NoodlでのCSS設定(違い）
- セレクタを設定しない、書かない
- プロパティに-（ハイフン）がある場合、-を削除して続く文字を大文字にする
- 値は""(ダブルクオート)で囲む
- 複数のスタイルを指定する場合は;(セミコロン)ではなく,(コロン)で区切る
- プロパティと値の組合せは改行ができません。1行で書きましょう。
- などです。・・・上記でほぼOKですが、それでもNoodlで使えないプロパティなどありました。他にルールがわかる方、ご連絡お待ちしています。

### CSS Styleの設定例
```css
{
    boxShadow:"0 20px 0 -10px rgb(198, 224, 231)"
}
```

## 2. 影の表現
Groupノードに影をつけてみましょう。影の設定方法は[この記事](https://ics.media/entry/200406/)を参考にさせていただきました。

![image520.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/9a8d01ff-4159-1eed-c2b0-411e85991c47.png)

```css:通常の影
{
    boxShadow:"0 10px 25px 0 rgba(0, 0, 0, .5)"
}
```

```css:内側に影を出す
{
    boxShadow:"inset 0 10px 25px 0 rgba(0, 0, 0, .5)"
}
```

```css: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"
}
```

```css:重なった紙のような影
{
    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)"
}
```

```css:色と角度の違う影
{
    boxShadow:"-10px 10px 25px rgba(230, 180, 15, 0.9),10px -10px 25px rgba(8, 131, 161, 0.9)"    
}
```

また、CSS Stypeを使うことで、Imageにも影をつけることができます。


```css:BoxShadowでは透過領域にも影がつく
{
    boxShadow:"0 10px 25px 0 rgba(0, 0, 0, .5)"
}
```
```css:DropShadowでは透過領域を除いた正しい影がつく
{
      filter:"drop-shadow(0px 5px 10px rgb(0, 0, 0))"
}
```

## 3. 塗りつぶしの表現
Groupの背景色にCSSを使うことで、グラデーションやパターンを指定することができます。

![image521.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/a68af149-f3db-1906-2e1c-5f92bb7c55ea.png)

```css:グラデーション
{
    backgroundImage:"linear-gradient(45deg,#f4c14e, #d36950)"
}
```

```css:複数色のグラデーション
{
    backgroundImage:"linear-gradient(#6fb8d9, #f4c14e, #d36950)"
}
```

```css:グラデーションの線形リピート
{
    backgroundImage:"repeating-linear-gradient(#f4c14e 0%, #d36950 30%)"
}
```

```css:グラデーションの放射リピート
{
    backgroundImage:"repeating-radial-gradient(circle closest-side at 100px 200px, #f4c14e, #d36950)"
}
```

```css:縦横のリピートグラデーション
{
backgroundImage:"repeating-linear-gradient(90deg,#dddddd 0%, #eeeeee 10%),repeating-linear-gradient(180deg,#eeeeee 0%, #dddddd 10%)",
backgroundBlendMode:"difference"
}
```

## 4. おまけ
TextやTextBox、Groupの背景や枠線、影をCSSで設定した例です。
詳しくはプロジェクトを確認ください。[参考サイト](http://www.htmq.com/css3/)。
デモはごちゃごちゃしてかっこ悪いですが、色々できますよという例です。

![image550.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/036e234a-e188-b140-bf6b-39481eb8be58.png)

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

![image552.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/7961592a-28cb-09aa-991e-0708c99cf8ec.png)

```css:淡い色のテキストを影で目立たせる
{
    textShadow:"1px 1px green"
}
```

![image553.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/0103983c-478d-6e29-259d-4506168afc43.png)

```css:背景色を使いTextInputの位置を明確にする
{
    padding:"0 16px",
    margin:"5px 10px",
    background:"#EDA"
}
```

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