【CSS】Color関連のTipsまとめ

CSSだけでこんなこともできるようになってたのか、、と最近知ったカラー関連のTIPS（一応）2021年編です。

1.テキストにグラデーション

HTML

<h1>Hello, world</h1>

CSS

h1{
  background: linear-gradient(90deg, #e14fad 0%, #f9d423 100%);
 -webkit-background-clip: text;/*背景をテキストの中に切り取って表示*/
 color: transparent;/*透明にする*/
}

2.borderにグラデーション

HTML

<h1>Hello, world</h1>

CSS

h1{
 border-bottom: 8px solid #e14fad;
 border-image: linear-gradient(90deg, #e14fad 0%, #f9d423 100%);
 border-image-slice: 1;
}

3.乗算などのブレンドモード

HTML

<ul class="mix-blend-mode">
 <li>
   <p>通常</p>
   <div class="circle circle-1 normal"></div>
   <div class="circle circle-2 normal"></div>
 </li>
 <li>
   <p>乗算</p>
   <div class="circle circle-1 multiply"></div>
   <div class="circle circle-2 multiply"></div>
 </li>
 <li>
   <p>スクリーン</p>
   <div class="circle circle-1 screen"></div>
   <div class="circle circle-2 screen"></div>
 </li>
 <li>
   <p>オーバーレイ</p>
   <div class="circle circle-1 overlay"></div>
   <div class="circle circle-2 overlay"></div>
 </li>  
</ul>

CSS

.circle {
 position: absolute;
 width: 100px;
 height: 100px;
 border-radius: 50%;
}

.circle-1 {
 background: #e14fad;
}

.circle-2 {
 left: 50px;
 background: #f9d423;
}

.multiply{
 mix-blend-mode: multiply;/*乗算*/
}

.screen{
 mix-blend-mode: screen;/*スクリーン*/
}

.overlay{
 mix-blend-mode: overlay;/*オーバーレイ*/
}

.mix-blend-mode {
 display: flex;
 gap: 30px;
 isolation: isolate;
}

.mix-blend-mode li {
 position: relative;
 width: 150px;
 list-style: none;
 text-align: center;
}

.mix-blend-mode p {
 text-align: center;
}

4.チェックボックス等のフォーム要素のカラーを1行のCSSで変更

HTML

/*チェックボックス*/
<fieldset>
<label>
  デフォルト
  <input type="checkbox" checked>
</label>
<label>
  カスタム
  <input type="checkbox" class="custom" checked>
</label>
</fieldset>

/*ラジオボタン*/
<fieldset>
<label>
  デフォルト
  <input type="radio" checked>
</label>
<label>
  カスタム
  <input type="radio" class="custom" checked>
</label>
</fieldset>

/*レンジスライダー*/
<fieldset>
<label>
  デフォルト
  <input type="range" checked>
</label>
<label>
  カスタム
  <input type="range" class="custom" checked>
</label>
</fieldset>

/*プログレスバー*/
<fieldset>
<label>
  デフォルト
  <progress max="100" value="70">70%</progress>
</label>
<label>
  カスタム
  <progress max="100" value="70" class="custom">70%</progress>
</label>
</fieldset>

CSS

fieldset {
 display: flex;
 gap: 30px;
 border: none;
}

label {
 font-size: 14px;
 margin-bottom: 30px;
 text-align: center;
}

input {
 display: block;
 width: 100px;
 height: 30px;
 margin: 8px auto 0;
 text-align: center;
}

.custom {
 accent-color: #e14fad;/*フォーム要素の色を変更*/
}

※accent-colorプロパティは、2021年12月現在、主要ブラウザ内で、ios Safariのみサポートされていません。

まとめ

これまで、画像で対応していたところが、主要ブラウザでサポートされ（IEを除く）、いつの間にか使えるようになっていました。
もっと深掘りしていきたいと思います！