Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8644

NoodlでCSSによる影の表現

$
0
0

概要

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

目次

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

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

影の表現デモ
塗りつぶし表現デモ
おまけデモ

GitHub上のサンプルデータと構築手順

Githubから/Noodl2_CSSDemo以下を対象PCにCloneしてください。
プロジェクトには、影・塗りつぶし・おまけの3種類デモをコンポーネントとして作成し、3つのデバイスとして登録しています。実行時には実行したいdeviceを選択してください。

1. Noodl上でのCSSの書き方

あまり説明はありませんが、Noodl Ver2では各Visualノードに対して、CSS Styleを適用できます。Properttyes>AdvancedのEditから設定します。
image522.png

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

CSSNoodl
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ノードに影をつけてみましょう。影の設定方法はこの記事を参考にさせていただきました。

image520.png

通常の影
{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を使うことで、グラデーションやパターンを指定することができます。

image521.png

グラデーション
{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で設定した例です。
詳しくはプロジェクトを確認ください。

image508.png

まとめ

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


Viewing all articles
Browse latest Browse all 8644

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>