iT邦幫忙

2025 iThome 鐵人賽

DAY 24
2
Modern Web

關於那些有趣的 CSS 效果系列 第 24

( Day 24 ) 純 CSS 漸層色文字、雙色文字、圖片背景文字

  • 分享至 

  • xImage
  •  

最近玩 UNO 的手氣一直不太順,牌常常多到可以變成一把扇子,每當懊惱著運氣不好,就會看著 UNO 牌面組成的漂亮漸層色發呆,心想用純 CSS 是否能做出漸層色文字或雙色文字呢?值到聽到對手大喊 UNO 又將我拉回現實,繼續對著這麼多的牌發著呆....
純 CSS 漸層色文字、雙色文字、圖片背景文字

正文開始

這篇教學會使用 CSS 的裁切背景 background-clip 樣式屬性,產生漸層色文字、雙色文字和圖片背景文字等效果,最後還會搭配動畫 animation 做出有趣的漸層色文字動畫和淡出淡出動畫。

CSS 教學 - CSS 漸層色文字、雙色文字、圖片背景文字

使用 background-clip 製作文字背景效果

CSS background-clip 樣式屬性如果設定為 text,可以將背景裁切成內容文字的形狀,只要將文字原本的顏色設定為「透明色」,就可以產生具有各種特別背景色的文字,下方範例會產生漸層色文字、雙色文字以及圖片背景文字。

<!-- HTML 程式碼 -->
<h1 class="a0">OXXO.STUDIO</h1>
<h1 class="a1">OXXO.STUDIO</h1>
<h1 class="a2">OXXO.STUDIO</h1>
<h1 class="a3">OXXO.STUDIO</h1>

<!-- CSS 程式碼 -->
<style>
  h1 {
    margin: 10px;
    padding: 0;
    width: max-content;
    font-family: impact, arial-black;  /* 設定成比較粗的字體 */
    font-size: 80px;
    line-height: 1;
  }
  /* 沒有設定 background-clip 就不會進行裁切 */
  .a0 { 
    background: linear-gradient(#f00,#f90,#fd0,#0c0,#09f);
  }
  .a1 {
    color: #0000;           /* 文字顏色設定為透明 */
    background: linear-gradient(#f00,#f90,#fd0,#0c0,#09f);
    background-clip: text;  /* 設定背景裁切為文字形狀 */
  }
  .a2 {
    color: #0000;           /* 文字顏色設定為透明 */
    background: linear-gradient(#f00 50%,#fa0 50%);
    background-clip: text;  /* 設定背景裁切為文字形狀 */
  }
  .a3 {
    color: #0000;           /* 文字顏色設定為透明 */
    background: url(https://steam.oxxostudio.tw/image/index-css.jpg);
    background-clip: text;  /* 設定背景裁切為文字形狀 */
  }
</style>

CSS 教學 - CSS 漸層色文字、雙色文字、圖片背景文字 - 使用 background-clip 製作文字背景效果

background-clip 應用於多行文字

background-clip 會裁切整個背景,如果有「多行文字」,不同行的文字會出現不同的背景,由於這種特性,只要特別指定背景漸層色的位置,就能讓不同行的的文字變成不同顏色的效果,下方範例的第二組 p 文字,將漸層背景分成五等份,就能讓五行文字呈現不同顏色。

線上展示:https://codepen.io/oxxo/pen/ZYExbNe

<!-- HTML 程式碼 -->
<p class="p1">STEAM 教育學習網秉持著 STEAM/STEM 的精神,透過一系列免費且高品質的教學與範例,讓所有人都能輕鬆跨入 STEAM 的學習領域</p>
<p class="p2">STEAM 教育學習網秉持著 STEAM/STEM 的精神,透過一系列免費且高品質的教學與範例,讓所有人都能輕鬆跨入 STEAM 的學習領域</p>

<!-- CSS 程式碼 -->
<style>
  p {
    margin: 10px;
    width: 300px;
    font-size: 24px;
    color: #0000;  /* 文字顏色設定為透明 */  
  }
  .p1 {
    background: linear-gradient(#f00,#f90,#fd0,#0c0,#09f);
    background-clip: text;
  }
  .p2 {
    /* 指定漸層色中每個顏色的位置 */
    background: linear-gradient(#f00 20%,
      #f90 20%, #f90 40%,
      #fd0 40%, #fd0 60%,
      #0c0 60%, #0c0 80%,
      #09f 80%);
    background-clip: text;
  }
</style>

CSS 教學 - CSS 漸層色文字、雙色文字、圖片背景文字 - background-clip 應用於多行文字

雙色文字動畫效果

透過自訂屬性 @property 產生背景的漸層色動畫,就可以讓文字具有顏色變幻的動畫效果,下方範例呈現雙色背景旋轉以及從上到下淡出的文字效果。

<!-- HTML 程式碼 -->
<h1>OXXO.STUDIO</h1>
<p>STEAM 教育學習網秉持著 STEAM/STEM 的精神,透過一系列免費且高品質的教學與範例,讓所有人都能輕鬆跨入 STEAM 的學習領域。</p>

<!-- CSS 程式碼 -->
<style>
  /* 自訂義角度屬性 */
  @property --deg {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0deg;
  }
  h1 {
    margin: 10px;
    padding: 0;
    width: max-content;
    font-family: impact, arial-black;  /* 設定成比較粗的字體 */
    font-size: 80px;
    line-height: 1;
    color: #0000;                      /* 文字顏色設定為透明 */
    background: linear-gradient(var(--deg), #f00 50%, #000 50%); /* 套用角度自訂屬性 */
    background-clip: text;
    animation: a 2s linear infinite;   /* 動畫 */
  }       
  /* 動畫改變自訂屬性數值 */
  @keyframes a {
    0%{--deg: 0deg;}
    100%{--deg: 360deg;}
  }
  /* 自訂義百分比屬性 */
  @property --p1 {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 100%;
  }
  /* 自訂義百分比屬性 */
  @property --p2 {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 100%;
  }
  p {
    margin: 30px;
    width: 320px;
    font-size: 24px;
    color: #0000;           /* 文字顏色設定為透明 */  
    background: linear-gradient(to top, #fff var(--p1), #000 var(--p2), #000 100%); /* 套用百分比自訂屬性 */
    background-clip: text;
    animation: b 2s linear infinite alternate;   /* 動畫 */
  }       
  /* 動畫改變自訂屬性數值 */
  @keyframes b {
    0%{
      --p1: 100%;
      --p2: 100%;
    }
    50%{
      --p1: 0%;
      --p2: 50%;
    }
    100%{
      --p1: 0%;
      --p2: 0%;
    }
  }
</style>

CSS 教學 - CSS 漸層色文字、雙色文字、圖片背景文字 - 雙色文字動畫效果

小結

background-clip 是一個比較新的樣式屬性,只要運用這篇教學的做法,就能輕鬆做出各種非常有特色的文字囉。


上一篇
( Day 23 ) 純 CSS 流動色彩文字
下一篇
( Day 25 ) 純 CSS 空心文字、文字水波背景動畫
系列文
關於那些有趣的 CSS 效果35
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言