英文 | https://javascript.plainenglish.io/6-fun-things-you-can-do-with-css-1acabc8bf072

翻譯 | 楊小愛

上面的效果只是通過使用 CSS 的 background-clip 屬性創(chuàng)建的。

p{  background-size: 70vh;  background-position: center;  line-height: 16px;  background: url("photo.png");  -webkit-background-clip: text;  background-attachment: fixed;  background-clip:text;  background-repeat: no-repeat;  -webkit-text-fill-color: rgba(255, 255, 255, 0);}body {  background: black;  overflow: hidden;}

雖然我的 p 標簽包含一些文本。

您還可以使用 mix-blend-mode 來確定內容，應如何與元素的父元素的內容和元素的背景混合。

2、 根據視口線性縮放文本

使您的網站響應視口中的更改可能是一個繁瑣的過程，通常涉及重寫部分 CSS 并測試多個斷點。

但它不必總是那么復雜和令人厭煩。

僅使用一行 CSS，您就可以隨著視口的增加或減少而在最小和最大大小之間縮放文本。

這是通過clamp 屬性完成的。

clamp(minimum, preferred, maximum);

這些值是不言自明的。clamp屬性返回一個介于最小值和最大值之間的值。中間的參數(shù)，即“首選”是視口的百分比。

讓我們在實踐中看到這一點。

width: clamp(500px, 50%, 1500px);

當視口寬度為 1600 像素時，首選值為 1600 像素的 50%，即 800 像素。當視口為 700px 時，首選應該是 700 的 50%，即 350px。

但是因為最小值是 500px，所以它會返回 500px。相同的邏輯適用于 1500px 的最大值。

您也可以從上面提供的媒體中看到。最小值為 450 像素，因此當視口小于 900 像素時您看不到任何變化。

3、簡單的Photoshop

CSS 提供了各種屬性來編輯和應用圖像效果。上面討論了其中一些屬性，例如 mix-blend-mode 。

CSS 提供了各種屬性來操作圖像。他們之中有一些是：

• 亮度：濾鏡：亮度(90%)

• 模糊：過濾器：模糊（9px）

• 飽和度：過濾器：飽和度(4)

• 不透明度：過濾器：oapcity(0.3)

• 色調：濾鏡：色調旋轉（45度）

• 投影：過濾器：投影（30px 10px 4px #4444dd）

下圖應用了模糊濾鏡。

img{   filter: blur(2px);}

4、全屏

如果您曾經創(chuàng)建過博客站點或任何涉及顯示圖像的站點，那么，您必須提供一些功能來使圖像全屏顯示。

即使是在 Medium 也能做到，當你點擊一張圖片時，它會放大。

雖然，您需要 JavaScript 來使元素全屏顯示，但通過使用 requestFullscreen() 方法，有一個 CSS 偽類 :fullscreen 允許您在元素處于全屏模式時為其設置樣式。

:fullscreen {  background-color: yellow;}

您可以輕松應用過濾器或更改背景（因為全屏顯示的元素會保留其縱橫比，而留下白色背景）。

5、餅圖

您可以僅使用 CSS 輕松創(chuàng)建餅圖，只需兩行 CSS。

使用 conic-gradient() CSS 函數(shù)，您可以創(chuàng)建由漸變組成的圖像，顏色過渡圍繞中心點旋轉。

在我看來，此功能最實用的用例是創(chuàng)建餅圖。

background: conic-gradient(red 20%, purple 0 60%, yellow 0);border-radius: 50%

上面的代碼將呈現(xiàn)以下內容：

conic-gradient() 函數(shù)的結果是 <gradient> 數(shù)據類型的對象。

如果你要查找瀏覽器兼容性，請點擊：https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient()#browser_compatibility

6、漸變文字

正確使用漸變可以為您的網站提供新鮮感。

您可能已經知道如何使用漸變。如果沒有，您始終可以使用 Grabient 之類的網站，它可以讓您自定義漸變并為其提供 CSS。

但是，您知道您也可以輕松地將漸變應用于文本嗎？

.text { background: linear-gradient(to right, red 0%, purple 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font: {  size: 10vw; };}

僅此而已，您就可以獲得很棒的漸變文本。

結論

HTML 和 CSS 是 Web 開發(fā)的基本構建塊，您無法僅使用這兩種技術構建一些出色的網站，雖然您需要 JavaScript 來實現(xiàn)功能，但僅 HTML 和 CSS 就可以幫助您使用最少的 JavaScript（用于轉換潛在客戶）構建漂亮的營銷和登陸網站。

我見過很多自由職業(yè)者只掌握 CSS 和 HTML 技能來實現(xiàn)副業(yè)賺錢的。如果您想更多的開啟自己的自由獨立開發(fā)者，那您應該更加深刻的學習前端相關技能。

最后，感謝您的閱讀，我希望您喜歡這篇文章，也希望您可以與您的朋友一起來分享它，可能對他也會有所幫助。有什么問題，請在留言區(qū)給我留言。

如果您喜歡的話，記得點贊我，關注我。

學習更多技能

請點擊下方公眾號