Illustratorで作ったボタンをCSSで再現したい。US2020年2月5日水曜日Illustratorで作ったボタンをCSSで再現したい。デザイン部のSatoです。今回はIllustratorでデザインを作ったオブジェクトのグラデーションなどの設定をCSSで再現したい時に使える機能をご紹介します。この機能のを使えばグラデーションが細かいボタンをの色をCSSで数分で再現できるのでコーディングがかなり楽になります。最高の機能なのでもうAdobeに足を向けて寝れません!Illustratorのグラデーション機能を使い作成したボタンを用意しました。色が多くて設定も少し複雑なのでCSSで再現するのが大変そうです。今回は「CSSプロパティ」という機能を利用してグラデーションの色味などの設定を書き出していきます。最初にCSSプロパティパネルをワークスペースに表示させます。Illustratorメニューバーの「ウィンドウ」の「CSSプロパティ」をクリックします。CSSプロパティパネルがワークスペースに表示されます。グラデーションの設定をコピーしたいオブジェクトのオブジェクト名を設定します。生成」にチェックを入れると書き出してくれるようになるようです)グラデーションの設定をコピーしたいオブジェクトを選択するとCSSプロパティパネルにCSSが表示されます。選択スタイルをコピーボタンをクリックすると生成されたCSSが全てコピーされます。これをcssファイルにペーストすると色、角丸の角度などが設定できました。ボタンの高さや幅、ボタンの中のフォントサイズなどの調整は必要ですがIllustratorで作ったボタンをほぼそのまま再現できます。CSSのグラデーションに苦手意識があったのでいつも時間がかかっていたのですが、この機能を知ってから数分でグラデーションを再現できるようになったので助かっています。2019に参加してきました。Illustratorで作ったボタンをCSSで再現したい。Weblogtemplates。