シェイプに作った影をcssに変換する

シェイプに作った影をcssのbox-shadowに変換する方法、解説する機能は「CSS をコピー」です。



CSS をコピーの使い方

CSS をコピーはオブジェクトに作ったエフェクトをCSSに変換する機能ですが正しく出力するには少しコツが要ります。

  1. 色は何でも良いので[長方形ツール]でシェイプを作ります。属性パネルが一緒に開くのでそこで止まって下さい。

    属性パネルの幅と高さにhtml要素の物を入力します。

  2. [レイヤー] - [レイヤースタイル] - [ドロップシャドウ]又は[シャドウ(内側)]をクリックします。

    ドロップシャドウ

    任意

    不透明度

    任意

    角度

    任意

    包括光源を使用

    チェック外す

    距離

    任意

    スプレッド

    任意

    サイズ

    任意

    シャドウ(内側)

    任意

    不透明度

    任意

    角度

    任意

    包括光源を使用

    チェック外す

    距離

    任意

    チョーク

    任意

    サイズ

    任意

  3. [レイヤー] - [CSS をコピー]をクリックします。

  4. テキストエディター等にコピーしたコードを貼り付け、該当部分を再コピーします。

  5. 編集中のcssにペーストします。

box-shadowに複数の値を指定する

※box-shadowは復数指定することが出来ます。ドロップシャドウ、シャドウ(内側)の横にある+を押してスタイルを追加しましょう。