html css text effect 文字

三種特別的文字效果 Text Effect

王淳藝 Celia Wang 2023/03/22 14:00:00

0 3592

文字是網頁組成的一大部分，有時希望可以來點吸睛的文字造型，但為了盡量不影響到SEO，若可以用真正的文字而非以圖片檔呈現絕對是最好的。

本篇就來介紹三種簡單卻特別的CSS文字效果！

----

1. 麥克筆感文字

首先第一款是帶有麥克筆POP感的文字效果，主要運用的CSS概念為 "text-shadow"

我們可以先到 google fonts 網站挑選一個帶有POP感的字體，此處使用 "Titan One" 字體當作示範

Html：

<div class="scene1">
   <h1>CSS IS COOL</h1>
</div>

CSS (SCSS)：

.scene1{
  h1 {
    text-shadow: -5.5px -5.5px 5px rgba(#fff, 0.3), 6.5px 6.5px 1px #ff0054;
    color: transparent;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #000;
    font-family: 'Titan One', cursive;
  }
}

可以看到在 text-shadow 的部分疊了兩層陰影，第一層為透白色，第二層為桃紅色，但兩者的偏移程度不同，因此在兩者重疊的部分會混合成較淡的粉色，而沒有重疊的部分就是單純的白色與桃紅，如此就可以營造出麥克筆的深淺感。

第二個重點是文字使用了 color: transparent 搭配 text-stroke 來創造鏤空文字效果，如此才能讓文字的填色以上面提到的陰影方式來呈現。

這樣就成功了，真的非常容易！

2. 斜切雙色文字

第二款要介紹的是以斜線一分為二的雙色拼接文字，主要運用的CSS概念為 "linear-gradient" 以及 "background-clip"

我們可以先到 google fonts 網站挑選一個較粗的字體，此處使用 "Monoton" 字體當作示範

Html：

<div class="scene2">
   <h1>CSS IS COOL</h1>
</div>

CSS (SCSS)：

.scene2{
  h1{
    color:transparent;
    font-size: 70px;
    letter-spacing:1px;
    font-family: 'Monoton', cursive;
    background: linear-gradient(5deg, #fff 50%, #ff0054 50%);
    -webkit-background-clip: text;
  }
}

在這個例子中，由於我們需要以背景色的方式來寫斜切撞色，所以需要先用 color: transparent 來取消文字本身的預設色彩

再來進入斜切撞色的撰寫，可以看到此處運用了 background: linear-gradient ，這邊就來介紹後面括弧中的含義

background-image: linear-gradient(角度, 起始色彩 起始色彩位置, 結束色彩 結束色彩位置);

如此我們藉由 background: linear-gradient(5deg, #fff 50%, #ff0054 50%); 可以得到以下這樣的斜切撞色：

再來加入最後一句 -webkit-background-clip: text; 就可以讓文字作為遮罩來裁切這塊撞色背景了

這樣就大功告成囉～～～

3. 柔和陰影堆疊文字

最後來到柔和陰影堆疊的文字，主要運用的CSS概念為 "text-shadow" 以及 "letter-spacing"

這個效果創造出來的文字立體感與層次感都非常強烈，很像一張一張文字造型的紙張互相堆疊的感覺。

Html：

<div class="scene3">
  <span>S</span>
  <span>H</span>
  <span>A</span>
  <span>D</span>
  <span>O</span>
  <span>W</span>
</div>

為了讓每個字母都有壓在前一個字母上的效果，我們需要將每個文字拆開，才能讓文字彼此之間有前後之分。

CSS (SCSS)：

.scene3 {
  span {
    font-family: 'Anton', sans-serif;
    font-size: 50px;
    text-shadow: -12px 5px 15px #ced0d3;
    color: white;
    letter-spacing: -0.05em;
  }
}

在這邊我們讓陰影的 X軸向左偏移得更多，同時也讓陰影的擴散加大，這樣能夠更自然的創造左高右低的堆疊效果。

最後加上負值的 letter-spacing，讓文字彼此之間靠得更近、重疊感更明顯，如此一來就完成很有質感的柔和堆疊文字囉！

以上三種文字效果的撰寫都只運用了基本的 CSS 概念，但卻創造出了特別的效果，下次不妨也試試看～

----

參考來源：

https://codepen.io/kassandrasanch/pen/YzOEeOa

https://codepen.io/agathaco/pen/KqVWEw

https://ithelp.ithome.com.tw/articles/10248148