【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

<p>/*チェックボックス*/
  <fieldset>
    <label>デフォルト
      <input type="checkbox" checked>
    </label>
    <label>カスタム
      <input type="checkbox" class="custom" checked>
    </label>
  </fieldset>
  <p>/*ラジオボタン*/</p>
  <fieldset>
    <label>デフォルト
      <input type="radio" checked>
    </label>
    <label>カスタム
      <input type="radio" class="custom" checked>
    </label>
  </fieldset>
  <p>/*レンジスライダー*/</p>
  <fieldset>
    <label>デフォルト
      <input type="range" checked>
    </label>
    <label>カスタム
      <input type="range" class="custom" checked>
    </label>
  </fieldset>
  <p>/*プログレスバー*/</p>
  <fieldset>
    <label>デフォルト
      <progress max="100" value="70">70%</progress>
    </label>
    <label>カスタム
      <progress max="100" value="70" class="custom">70%</progress>
    </label>
  </fieldset>
</p>

 

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を除く）、いつの間にか使えるようになっていました。
もっと深掘りしていきたいと思います！
 
 

• WEB
• Tips
• 技術情報

データ分析・AIの専門家集団 GRI

[データ分析・AIの専門家集団「GRI」と一緒に仕事をしませんか？ お問い合わせお待ちしております]