CSSを使って、円形(楕円形)のグラデーションを表現する

  • このエントリーをはてなブックマークに追加

円形のグラデーション表現はCSSでできます

デザインする時に、グラデーションをかけたい事があると思います。

昔は、グラデーションをかけた画像を用意して、背景に設定して、リピートして・・・
色の変更があった場合は、画像を作り直して・・・

なんだか当たり前にやっていた時期もありますが、思い出すだけでも面倒な事がわかりますね。

今ではCSSを使って実装する事で、色の変更やグラデーションのサイズ、位置など、画像を用意する事なく、対応する事ができます。
また、背景画像を読み込まなくてよくなるので、管理するファイル数を減らす事ができます。

では実際にやってみましょう!

例えばこんな具合


CSSを使って、グラデーション表現をしてみました。
円のサイズやグラデーションの位置など、細かく作り込む事ができるので、これから順を追って紹介していきますね。

実装してみよう

では早速実装してみましょう。
先ほどの例を再現するには、次のようにします。

HTML
<div class=”gradient-circle”></div>

CSS
.gradient-circle {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, #0967a5, #4ab1f5, #072437);
}
backgroundの中にcircleを指定する事で円形にできます。
楕円形にしたい場合は、ここをellipseにする事で対応できます。

続いて、中心から色の指定をそれぞれつけていきます。
例では3色ですが、2つにすれば2色でグラデーションを表現できます。
5つにすれば5色と、書いただけ細かくグラデーションをつけていくことができます。

サイズを変更したい場合

グラデーションをつけたい要素に対して、縦横のサイズを調整したい事もあると思います。
例えば・・・

このように、円の半径を変更する事もできます。
変更するには

background: radial-gradient(circle 50px, #0967a5, #4ab1f5, #072437);
circleに続けて、円の半径を指定することで、サイズの調整ができます。
もちろん、emやvwも使えますよ。
%は指定できないので、注意です。

楕円形の場合

background: radial-gradient(ellipse 60% 40%, #0967a5, #4ab1f5, #072437);
ellipseに続けて、円の縦と横を指定することで、サイズの調整ができます。
こちらは%を使って指定ができます。
もちろん、pxやem、vwも使って、細かく調整する事もできます。

中心を指定したい場合

グラデーションの位置を調整したいよーという要望にも、もちろん対応できます。

このように変更するには・・・

background: radial-gradient(circle at 50% 30%, #0967a5, #4ab1f5, #072437);
circleに続けて、グラデーションの位置を指定します。 指定するにはat 50% 30%と記述します。
横方向、縦方向の順に位置を指定します。

もちろん、pxやem、vwも使って、細かく調整する事もできます。
楕円形の場合は、circleellipseに変更する事で対応できますよ。

サイズも中心も、同時に指定したい場合

グラデーションのサイズも、位置も、両方調整したいですよね。
それにも対応できますよ。

background: radial-gradient(circle 50px at 50% 30%, #0967a5, #4ab1f5, #072437);
例えば・・・こう!!


両方を記述する事で、表現できました!
もちろん楕円形にする事もできます!!

色の変化する位置を調整する

グラデーションの間隔を調整したい事もあると思います。
全体の5割までこの色で~8割まではこの色~のような調整もできますよ。

background: radial-gradient(circle, #0967a5 50%, #4ab1f5 80%, #072437);

色の指定をして、半角スペース、その後に何パーセント適用させるのかを記述すれば、より細かく調整する事ができます。
もちろん、これまでに紹介した、楕円形や大きさ、位置の調整も一緒に設定する事ができます。

CSSを活用して、効率を高めよう

CSSはどんどん便利になっていきます。
昔は画像を用意する必要があったようなものも実装する事が出来るようになりました。

あまり変更の頻度が少ないから、画像を作り直せば良い。と言えばそうかもしれませんが、元となる作業ファイルが何処にあるかわからなくなった、意図せず消えてしまった、編集に使っていたソフトが使えなくなってしまった・・・
などのトラブルが想定されます。

Webサイトを表示するという観点からも、読み込む際のファイル容量の圧縮に貢献する事が期待できます。
また、管理するファイル数が減り、このファイルは何に使っているのかな?と、考える回数を減らす事もできます。

便利に使える機能を正しく使って、作業効率を高めていきたいですね。
  • このエントリーをはてなブックマークに追加

CONTACTお問い合わせ

ホームページ制作に関するご質問などございましたら、
お気軽にお問い合わせください。

※ブログ記事に関するご質問はお答えしかねます。

TEL:0258-31-5005FAX:0258-37-7301

ホームページ制作やSEOのお悩みはぜひ弊社へご相談ください