フィルター
filter: hue-rotate()
要素にhue-rotateフィルターを適用するためのユーティリティ。
| クラス | スタイル |
|---|---|
hue-rotate-<数値> | filter: hue-rotate(<数値>deg); |
-hue-rotate-<数値> | filter: hue-rotate(calc(<数値>deg * -1)); |
hue-rotate-(<カスタムプロパティ>) | filter: hue-rotate(var(<カスタムプロパティ>)); |
hue-rotate-[<値>] | filter: hue-rotate(<値>); |
例
基本例
hue-rotate-90やhue-rotate-180のようなユーティリティを使用して、要素の色相を度数で回転させます。
hue-rotate-15
hue-rotate-90
hue-rotate-180
hue-rotate-270
<img class="hue-rotate-15" src="/img/mountains.jpg" /><img class="hue-rotate-90" src="/img/mountains.jpg" /><img class="hue-rotate-180" src="/img/mountains.jpg" /><img class="hue-rotate-270" src="/img/mountains.jpg" />負の値の使用
-hue-rotate-15や-hue-rotate-45のようなユーティリティを使用して、負の色相回転値を設定します。
-hue-rotate-15
-hue-rotate-45
-hue-rotate-90
<img class="-hue-rotate-15" src="/img/mountains.jpg" /><img class="-hue-rotate-45" src="/img/mountains.jpg" /><img class="-hue-rotate-90" src="/img/mountains.jpg" />カスタム値の使用
次の hue-rotate-[<値>] 構文 を使用して、色相回転を完全にカスタムな値に基づいて設定します。
<img class="hue-rotate-[3.142rad] ..." src="/img/mountains.jpg" />CSS変数の場合は、次の hue-rotate-(<カスタムプロパティ>) 構文
<img class="hue-rotate-(--my-hue-rotate) ..." src="/img/mountains.jpg" />も使用できます。これは hue-rotate-[var(<カスタムプロパティ>)] の省略記法で、var()関数を自動的に追加します。
レスポンシブデザイン
プレフィックスa filter: hue-rotate()ユーティリティ にmd:のようなブレークポイントバリアントを付けると、ユーティリティをmedium 以上の画面サイズでのみ適用できます。
<img class="hue-rotate-60 md:hue-rotate-0 ..." src="/img/mountains.jpg" />バリアントの使用方法の詳細については、バリアントのドキュメントをご覧ください。