【丁寧なCSSグラデーション創り】 イラレのグラデーションをCSSで再現するには

こんにちは　FULL Web Designの渡邊です。

グラデってイラレだと、中級？スキルかな？

うまく使えるようになるまで少し時間がかかるかも。

それで、イラレで絶妙なグラデを使ってデザインするように、

CSSでWEBでもできたらなっていつも思うのだが、

ベタで素通りしてきた。

そこで、今回どうしても、金ぽい色をグラデで表現したく、

試行錯誤した記録。

1まずはイラレで好きなグラデでオブジェクトを作る

例えばボタンを作成する。

その場合、まずグラデ　メタルなどで、好きに表現するとおもうが、とりあえず線形で。

コピーしたオブジェクトで、掛けたい始点から終点までで終わるように作成し直す。

完成したら、今度は、そのボタンをコピーして、

そのグラでをコピーしたオブジェクトで、掛けたい始点から終点までで終わるように作成し直す。

こういう感じ。

そのaiファイルをXDで開く

Copy CSS to Clipboardをインストールしておく。

XDで開いて、グラデを選択して、

これで、グラデがコピー出来ている。

VS CODEにてcssをコピー

コピーすると、今度は、回転が効いていない　

斜めに掛けたのに、縦まっすぐにかかってる

なので、cssに回転を加える。

linear-gradient(135deg,・・・;

135degで再現できる。

ホームページ制作ならFULL ウェブデザインにお任せ下さい。

開業１２年以上の経験で、あなたのビジネス・サービスをインターネット上で認知されるお手伝いをいたします。

グラフィックデザインは２０年以上の経験ですので、シンプルかつ、いい感じにホームページを制作いたします。

お気軽にお問い合わせください。

初回お問い合わせは、メールにてお願いいたします。

お問い合わせフォーム