開發交互式用戶界面時，層級樣式表 (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 中利用的一些提示和技巧。

xure本身就提供了模板的功能，也就是說只要實現一次但可以一勞永逸，本文就一起來看看這個遮罩層實現過程和效果。

今天在做產品原型設計時，遇到了個關于動態顯現遮罩層的難點。“無奈”為追求高保真的效果，還是花了點心思做個原型實現。待做好回過頭來看看的話，其實這個效果的難度也不大，只是看個人意愿是否想做而已。

Axure本身就提供了模板的功能，也就是說只要實現一次但可以一勞永逸。下面就一起來看看這個遮罩層實現過程和效果吧。

做前端開發的同學都知道，在HTML實現一個遮罩層，只需要添加個浮動的DIV即可輕松實現。那么在Axure中如何去實現它呢？

如上圖所示，可以將這個遮罩層的實現分為如下2部分：

• 主體內容，即遮罩層要蓋住的部分
• 遮罩層組件，即遮罩層+其它裝飾部分（在Demo中只是增加了個Loading的動畫圖片來區分）

所以遮罩層的實現思路就清晰啦步驟如下：

1. 準備一個與你所想要遮蓋內容大小相同的矩形框，注意要減去邊框的大小，示例：主體內容大小為`600×400`，邊框寬度為**1px**，那么遮罩層的大小為`598*398`且是無邊框的。
2. 設置遮罩層的填充色，還有相對的透明度。
3. 加強遮罩層顯示的動畫效果（Axure上所支持的效果并不多，如不能夠滿足，可以采用文字描述闡明效果要求）。

接著用3個按鈕來做不同效果的展示：

打開遮罩層：

關閉遮罩層：

自動演示：

那么現在來看看最終的實現效果如下，請看下面的大屏幕：

如果想要做全屏的遮罩層就更加的簡單啦，只在要顯示組件上增加個燈箱的效果即可。

PS：示例源文件下載：遮罩層效果.rp

本文由 @ 凡夢星塵 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

神遮罩層靈活運用。

璃月港。

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

·先準備好主體部分。

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

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

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

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

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