このページの本文へ

CSSで円錐形グラデーションが描けるって知ってた? 便利な活用アイデアも紹介

2017年09月28日 21時03分更新

記事提供:WPJ

  • この記事をはてなブックマークに追加
本文印刷

CSSで円錐型グラデーションを描画できるconic-gradient関数の実装が始まっています。線形・円形グラデーションとの違い、使いどころをまとめました。

グラデーションを使ったWebサイトがますます増えてきています。ナビゲーションコンポーネントや、ボタンなどの要素にグラデーションを使ったり、画像とグラデーションを併用したりして素敵な効果を演出しているWebサイトもあります。

CSSの基本的な線形・円形グラデーションには、かなり前からすべてのブラウザーが対応してきました。CSS Gradients: A Syntax Crash Course(CSSグラデーション構文短期集中講座)には、線形・円形グラデーションの作成に必要な構文が簡潔にまとめられています。グラデーションの繰り返しを使った基本パターンの作成方法もあり、Webパフォーマンスに気を配り、可能な限り画像を使いたくない人におすすめします。

線形・円形グラデーションに続き、円錐形グラデーション(conic gradient)のブラウザー対応が徐々に進んでいます。円錐形グラデーションの先駆者はLea Verouです。

この記事をWPJのサイトで読む

Web Professionalトップへ

Web Professionalトップページバナー

WebProfessional 新着記事

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング