2016.12.29CSSでグラデーション作成:簡単快適ジェネレーター「Blend」ツイートシェアはてブ送るPocketWEBサイトにグラデーションを表示する場合、ほんの数年前まではIllustratorやPhotoshopで画像に書き出して、それを貼り付けるのが普通でした。ところが最近はCSSのコードで記述するのが主流になってきて、Illustratorにもコードを書き出す機能が実装されました。Illustratorを使わずとも、単純なグラデーションならブラウザ上のジェネレーターで手軽にサクサクッと書き出すことが出来ます。今回は、簡単に使えるジェネレーター「Blend」のご紹介。gradients.作成できるグラデーションは、一方の色から一方の色へと変化していく単純なパターンのみです。複雑に変化するパターンには対応していません。Blendの使用方法まず、Blendのサイトを開きます。Blend!」をクリックします。左下と右下の調整パネルで2つの色を決めます。色番号を直接打ち込むこともできます。変化する色を見ながら直感的に操作できるので、この手のジェネレーターとしては驚くほど使いやすいです。右上のパネルでは、「線形」と「円形」の2パターンを切り替えられます。「線形」のグラデーションでは、角度を調整することも出来ます。気に入ったパターンが出来たら、右上の「</>」をクリックします。すると、CSSのコードが表示されるので、これをコピーして使ってください。実際に作ってみました実際に3パターンほど作ってみました。これ、画像じゃありません。CSSで書き出してます。コードはHTMLタグにstyle属性で直接指定しています。作成に要した時間はほんの数分。新・WordPressテーマ「Lightning」でサイト制作:まとめページWordPressテーマ「BusinessPress」でWEBサイトを制作:まとめページ便利なWordPressプラグイン:まとめページ無料画像編集ソフト「PhotoScape」使用方法:まとめページランサーズ受注ノウハウ:まとめページブログ主プロフケンです。後半開始⇒帰郷して職業訓練⇒2人会社勤務⇒フリーランスとなる。◇Twitterは更新通知+小ネタ用です。