開發交互式用戶界面時，層級樣式表 (CSS) 非常強大。 CSS 有一些驚人的隱藏提示和技巧，可以用來改善你的網站的外觀。

在本文中，將介紹每個前端開發人員在開發出色且用戶友好的網頁時需要知道的一些很棒的 CSS 技巧。

1.首字下沉

可以在 CSS 中實現首字下沉。 它看起來很簡單。 比如下面顯示的圖像和代碼片段。

p:first-letter {
    font-size: 3rem;
}

2.給文字添加漸變

為文本添加漸變使文本提供了令人驚嘆的顏色。

它還為你的設計添加了一些引人注目的功能。

要向文本添加漸變，它采用下面顯示的代碼片段的形式。

p {
  font-size: 48px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

3. 使用 SVG 遮罩圖像

有了這個功能，我們可以在 SVG 中屏蔽圖像。 檢查下面顯示的圖像。

CSS 非常強大，為我們提供了許多可以實現的功能來實現此功能。

<svg>
<clippath id='clippath'>
/* Enter your svg here*/
</clippath>
</svg>

<style>
img:{
clip-path:url(#clippath)
}
</style>

4. 使用圖像作為光標

我們可以在 CSS 中使用圖像作為光標。 舉個例子，你想在你的內容上提供一個圖像光標。

要執行此操作，只需要提供如下代碼片段所示。

h1{
    cursor:url("custom.gif"), auto;

}

5. 為列表標記設置樣式

厭倦了普通無聊的列表？CSS 使列表的樣式成為可能。

要自定義列表標記，只需要對 CSS 進行編碼，如下所示。

::marker{
  color:#f548r9;
  text-shadow:2px 2px black;
    
}

6. 設計視頻的字幕。

CSS 具有強大的提示偽元素，可用于設置視頻中的字幕樣式。

::cue{
    color:green;
    background:red;
}

7. 用文字剪輯視頻

CSS 使剪輯帶有文本的視頻成為可能。

查看下面代碼片段。

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<stye>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}


.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  height: 500px;
}

.container video {
  width: 100%;
  height: 100%;
}

.container .text {
  position: absolute;
  top: 0;
    line-height: 350px;
  width: 100%;
  height: 100%;
  text-align: center;
  background: #ffffff;
  mix-blend-mode: screen;
  font-size: 15em;
  font-family: 'Bebas Neue', sans-serif;
}
</style>
<div class="container">
  <video autoplay loop muted>
    <source src="https://res.cloudinary.com/dptgkdbjg/video/upload/v1623121486/video_iqbbwc.mp4" type="video/mp4">
  </video>
  <div class="text">
    <p>OCEAN</p>
  </div>
</div>

8.平滑滾動

雖然我們可以使用 JavaScript 實現平滑滾動，但 CSS 使我們可以更輕松地在我們的網站中實現平滑滾動。

要啟用平滑滾動，需要將 smooth-behavior 設置為平滑。

檢查下面顯示的代碼段。

html{
  scroll-behavior:smooth;
}

9. 過濾圖像

圖像構成了網絡的很大一部分，可以使用過濾器來模糊圖像。 也可以使用過濾器屬性來模糊、飽和、添加亮度、添加其他屬性中的飽和度。

查看下面的代碼片段。

.blur {
  filter: blur(5px);
}

.grayscale {
  filter: grayscale(100%);
}

.brightness {
  filter: brightness(150%);
}

.saturate {
  filter: saturate(200%);
}

.invert {
  filter: invert(100%);
}

.huerotate {
  filter: hue-rotate(180deg);
}

10. 自定義移動瀏覽器標題中的地址欄。

看看下面顯示的圖像。 移動瀏覽器標題有多種顏色。 我們可以修改它并創建與我們網站的顏色主題相融合的顏色。

要更改或自定義移動瀏覽器標題中的默認地址欄，我們需要包含元標記，如下面的代碼片段所示。

<meta name='theme-color' content='#0575e6' />

在元標記中，我們需要傳入兩個參數，即名稱和內容，我們指定我們想要的顏色。 您可以在十六進制代碼中包含顏色。

最后的想法

當想要構建交互式用戶界面時，層級樣式表非常強大。

這些只是我們可以在 CSS 中利用的一些提示和技巧。

CSS的世界里，視覺效果的呈現方式多種多樣，其中mask-image屬性就是一個強大的工具，它允許我們利用圖像作為遮罩層來隱藏元素的部分內容。本文將深入探討mask-image屬性的用法、功能以及實際應用場景。

一、什么是mask-image

mask-image是CSS的一個屬性，用于定義一個圖形遮罩應用于元素的背景和/或內容區域，以此決定哪些部分可見，哪些部分不可見。它的行為與background-image類似，但作用于透明度層面，而非顏色層面。

.example {
  mask-image: url('mask.png');
}

在上述代碼中，.example元素的內容將根據mask.png圖像的透明度進行裁剪，透明的地方會顯示元素的內容，不透明的地方則會隱藏元素的內容。

二、mask-image的值類型

1. URL

可以引用外部圖像資源作為遮罩。

2. Gradient（漸變）

同樣可以使用線性漸變（linear-gradient）或徑向漸變（radial-gradient）作為遮罩。

3. Pattern（圖案）

類似于背景圖片的repeat模式，可以通過<image>配合<pattern>關鍵詞創建重復的圖像遮罩。

4. CSS基本形狀

如none, currentColor, transparent, inherit等，也可以使用幾何形狀如circle(), ellipse(), polygon()等。

三、mask-image的附加屬性

• mask-mode：控制遮罩如何應用到元素上，可選值有alpha（默認，基于圖像的Alpha通道）、luminance（基于圖像的亮度）。
• mask-repeat：指定遮罩圖像如何重復，與背景圖像的background-repeat屬性相似。
• mask-position：設置遮罩圖像在元素上的起始位置。
• mask-size：設置遮罩圖像的大小，可以是絕對單位、相對單位或者百分比。
• mask-origin 和 mask-clip：分別控制遮罩繪制的參考框和裁剪區域。
• mask-composite：用于多個遮罩層疊加時的組合規則。

四、應用場景

• 圖像裁剪：通過自定義遮罩圖像，實現非矩形邊界的圖像裁剪展示。
• 文字效果：結合文本內容和遮罩圖，制作出具有獨特背景鏤空的文字樣式。
• 交互反饋：在鼠標懸停或其他交互狀態下，動態改變遮罩圖，達到動畫過渡的效果。
• 布局設計：通過復雜的多邊形遮罩，創作出非規則形狀的布局結構。

示例：

/* 使用PNG圖像作為遮罩 */
.element {
  mask-image: url('mask.png');
}

/* 使用漸變作為遮罩 */
.another-element {
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

/* 利用SVG路徑創建復雜形狀的遮罩 */
.yet-another-element {
  mask-image: url('path.svg');
  mask-repeat: no-repeat;
  mask-position: center;
}

總之，mask-image屬性為網頁設計師和前端開發者提供了豐富的視覺表達手段，讓我們能夠創造出更為細膩且富有創意的視覺效果。熟練掌握這一特性，無疑將大大提升項目的設計層次感和用戶體驗。

神遮罩層靈活運用。

璃月港。

今天用三步完成原神官網的遮罩層效果。

·先準備好主體部分。

·第一步：添加遮罩層盒子，寫上基本css樣式，寬、高、背景顏色，絕對定位，覆蓋主體盒子。看下效果。

·先讓遮罩層隱藏，鼠標經過時遮罩層再顯示，這樣基礎版的遮罩層就完成了。但是這里要改用背景圖片，不重復顯示，位置中間偏右一點，看下效果。

·然后讓遮罩層在最前面顯示，加個粗點的邊框，一個好看的遮罩層就搞定了。

·最后給遮罩層加個過渡效果，讓鼠標一入一處時變得絲滑一點。

下一次再講講遮罩層的高級用法。胸墊美背上衣緊身短款打底衫。