Adobe Illustrator CCでは、レイヤーのスタイルをCSSとして書き出す便利な機能があります。今回は、この機能でCSS3のグラデーション用のコードを書き出す方法とそのコードの実用性を紹介します。是非お試しください。
#Illustrator CCでのCSS プロパティ書き出し
Illustrator CCでCSS プロパティを書き出す方法を見て行きましょう。
[ウインドウ]→[CSS プロパティ]より、CSS プロパティを書き出すウインドウを表示させます。この状態で、グラデーションを要素を選択すると、CSS プロパティウインドウにグラデーションのCSSコードが書き出されます。
#書きだされたCSSコードは実用的
Photoshop CCにもCSSを書き出す機能がありますが、グラデーションのコードを実際に使用する場合はいくつか手を加える必要がありました(※Photoshop CCでCSSグラデーションを書き出すときは要注意！)。しかし、Illustratorで書き出されたCSSコードは古いIEを含め、クロスブラウザ対策がしっかりとなされており、手を加えずそのまま使用することが可能です。実際に書き出されたコードは以下です。
background : -moz-linear-gradient(0% 100% 45deg,rgba(233, 95, 118, 1) 0%,rgba(246, 180, 198, 1) 100%);
background : -webkit-linear-gradient(45deg, rgba(233, 95, 118, 1) 0%, rgba(246, 180, 198, 1) 100%);
background : -webkit-gradient(linear,0% 100% ,100% 0% ,color-stop(0,rgba(233, 95, 118, 1) ),color-stop(1,rgba(246, 180, 198, 1) ));
background : -o-linear-gradient(45deg, rgba(233, 95, 118, 1) 0%, rgba(246, 180, 198, 1) 100%);
background : -ms-linear-gradient(45deg, rgba(233, 95, 118, 1) 0%, rgba(246, 180, 198, 1) 100%);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#E95F76', endColorstr='#F6B4C6' ,GradientType=0)";
background : linear-gradient(45deg, rgba(233, 95, 118, 1) 0%, rgba(246, 180, 198, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E95F76',endColorstr='#F6B4C6' , GradientType=1);
Webkit系の古いブラウザでは-webkit-linear-gradient()という記述が必要ですが、それも生成されています。また、IEの8や9ではCSS3のグラデーションが使えませんが、その代わりにIEの独自フィルターを使用してグラデーションを表現しています。これらはグラデーションをクロスブラウザで表現する場合の常套テクニックで、自動でこのコードが書き出されるのはコーディング時間の短縮につながります。
こちらのCSSコードを使ったグラデーション表示のデモをjsdo.itにアップしました。
Illustrator CCのCSS書き出し機能によるグラデーション - jsdo.it
#ベンダープレフィックスは設定で制御可能
付与するベンダープレフィックスは、設定により制御が可能です。CSS プロパティウインドウの下部のボタンを押すと、設定画面が表示されます。
