仅用 CSS 就能实现的有趣的功能

不管你喜欢还是讨厌CSS（层叠样式表），但它都是我们用来设计 HTML 元素样式的语言。

虽然，有一些很棒的预处理器，比如 SCSS（最终被编译成 CSS）并提供比普通 CSS 更多的功能，但这并不意味着你不能只使用普通的标准 CSS 来做惊人的事情。

CSS 有 520 个不同的属性，虽然您可能不需要全部了解，您可能只了解 30 或 50 个以上的属性，但探索不常见的 CSS 属性，肯定可以帮助您实现更多功能。

以下是仅使用 CSS 即可完成的 6 件令人惊奇的事情：

创建肖像和添加效果

CSS 允许您轻松地为照片添加一些引人注目的过滤器和效果，甚至无需接触 JavaScript。

上面的效果只是通过使用 CSS 的 background-clip 属性创建的。


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来确定内容，应如何与元素的父元素的内容和元素的背景混合。

根据视口线性缩放文本

使您的网站响应视口中的更改可能是一个繁琐的过程，通常涉及重写部分 CSS 并测试多个断点。

但它不必总是那么复杂和令人厌烦。

仅使用一行 CSS，您就可以随着视口的增加或减少而在最小和最大大小之间缩放文本。

这是通过clamp 属性完成的。

clamp(minimum, preferred, maximum);

这些值是不言自明的。clamp属性返回一个介于最小值和最大值之间的值。中间的参数，即“首选”是视口的百分比。

让我们在实践中看到这一点。

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

当视口宽度为 1600 像素时，首选值为 1600 像素的 50%，即 800 像素。当视口为 700px 时，首选应该是 700 的 50%，即 350px。

但是因为最小值是 500px，所以它会返回 500px。相同的逻辑适用于 1500px 的最大值。

您也可以从上面提供的媒体中看到。最小值为 450 像素，因此当视口小于 900 像素时您看不到任何变化。

简单的Photoshop

CSS 提供了各种属性来编辑和应用图像效果。上面讨论了其中一些属性，例如 mix-blend-mode 。

CSS 提供了各种属性来操作图像。他们之中有一些是：
- 亮度：滤镜：亮度(90%)
- 模糊：过滤器：模糊（9px）
- 饱和度：过滤器：饱和度(4)
- 不透明度：过滤器：oapcity(0.3)
- 色调：滤镜：色调旋转（45度）
- 投影：过滤器：投影（30px 10px 4px #4444dd）

全屏

如果您曾经创建过博客站点或任何涉及显示图像的站点，那么，您必须提供一些功能来使图像全屏显示。

即使是在 Medium 也能做到，当你点击一张图片时，它会放大。

虽然，您需要 JavaScript 来使元素全屏显示，但通过使用 requestFullscreen() 方法，有一个 CSS 伪类 :fullscreen 允许您在元素处于全屏模式时为其设置样式。

:fullscreen {
  background-color: yellow;
}

您可以轻松应用过滤器或更改背景（因为全屏显示的元素会保留其纵横比，而留下白色背景）。

饼图

您可以仅使用 CSS 轻松创建饼图，只需两行 CSS。

使用 conic-gradient() CSS 函数，您可以创建由渐变组成的图像，颜色过渡围绕中心点旋转。

在我看来，此功能最实用的用例是创建饼图。

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

conic-gradient() 函数的结果是<gradient>数据类型的对象。

渐变文字

正确使用渐变可以为您的网站提供新鲜感。

您可能已经知道如何使用渐变。如果没有，您始终可以使用 Grabient 之类的网站，它可以让您自定义渐变并为其提供 CSS。

但是，您知道您也可以轻松地将渐变应用于文本吗？

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

CSS calc()函数

你可以采用CSS中的calc() 函数来计算CSS属性的大小值。它主要使用数学运算进行计算，例如的结果（+，-，*，/）。

div {
 	width: calc(100% - 300px);
}

writing mode

该属性writing-mode将CSS中文本行的方向设置为垂直或水平。

h1{
  	writing-mode: vertical-lr;
}
h2{
  	writing-mode: horizontal-tb;
}

过滤功能

filter CSS中的函数用于将图形效果应用于元素。你可以实现很多的效果，因为过滤功能有很多其他的功能，如：（ blur，brightness，contrast，grayscale，hue-rotate，opacity，invert，sepia，）。saturatedrop-shadow


img{
 	filter: hue-rotate(-40deg);
}
/* Or */
.img2{
 	filter: contrast(170%) saturate(80%) blur(1px);
}

混合模式

混合模式是已添加到CSS的惊人功能。CSS中有两个混合模式属性：

mix-blend-mode ：定义元素和元素之间的混合。

background-blend-mode ：定义元素的背景颜色和背景图像之间的混合。

.blend h1 {
  font-size: 150px;
  mix-blend-mode: overlay;
}

# 仅用 CSS 就能实现的有趣的功能

# 创建肖像和添加效果

# 根据视口线性缩放文本

# 简单的Photoshop

# 全屏

# 饼图

# 渐变文字

# CSS calc()函数

# writing mode

# 过滤功能

# 混合模式