HTML/CSS [22天] CSS冷门实用特性

0

[22天] CSS冷门实用特性

阅读:208 时间:2022年06月07日

一、毛玻璃效果backdrop-filter 可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移)。因为它适用于元素背后的所有元素,为了看到效果,必须使元素或其背景至少部分透明。下例为一个毛玻璃效果:<!DOCTYPE html>...

一、毛玻璃效果

backdrop-filter 

可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移)。因为它适用于元素背后的所有元素,为了看到效果,必须使元素或其背景至少部分透明。

下例为一个毛玻璃效果:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body{
      background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 50%,rgba(230, 235, 236, 0.644) 50%),linear-gradient(90deg, rgba(255, 255, 255, 0.5) 50%,rgba(230, 235, 236, 0.685) 50%);
      background-size: 100px 100px;
    }
    .box{
      backdrop-filter: blur(10px);
      width: 500px;
      height: 400px;
      margin: 300px auto;
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

二、英文快速大小写转换

text-transform

指定如何将元素的文本大写。它可以用于使文本显示为全大写或全小写,也可单独对每一个单词进行操作

语法: 

text-transform: none | capitalize | uppercase | lowercase | full-width
  • capitalize

    这个关键字强制每个单词的首字母转换为大写。其他的字符保留不变(它们写在元素里的文本保留原始大小写)。字母是 Unicode 字符集或者数字里定义的字符 Experimental;因此单词开头的任何标点符号或者特殊符号将会被忽略。

  • uppercase

    这个关键字强制所有字符被转换为大写。

  • lowercase

    这个关键字强制所有字符被转换为小写。

  • none

    这个关键字阻止所有字符的大小写被转换。

  • full-width

    这个关键字强制字符 — 主要是表意字符和拉丁文字 — 书写进一个方形里,并允许它们按照一般的东亚文字(比如中文或日文)对齐。

例子:

zhe shi yi ju ying wen.

zhe shi yi ju ying wen.

Wo shi Lenton.

Wo shi Lenton. zhe shi yi ju ying wen.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .capitalize{
      text-transform: capitalize;
    }
    .uppercase{
      text-transform: uppercase;
    }
    .lowercase{
      text-transform: lowercase;
    }
    .full-width{
      text-transform: full-width;
    }
  </style>
</head>
<body>
  <p class="capitalize">zhe shi yi ju ying wen.</p>
  <p class="uppercase">zhe shi yi ju ying wen.</p>
  <p class="lowercase">Wo shi Lenton.</p>
  <p class="full-width">Wo shi Lenton. zhe shi yi ju ying wen.</p>
</body>
</html>

三、实现正方形

aspect-ratio

为 box 容器规定了一个期待的纵横比,这个纵横比可以用来计算自动尺寸以及为其他布局函数服务。

    .box{
      background-color: #4c9add;
      width: 50%;
      aspect-ratio: 1/1;
    }

或2:1的长方形

    .box{
      background-color: #4c9add;
      width: 50%;
      aspect-ratio: 2/1;
    }

四、背景颜色与图片混合

background-blend-mode

定义该元素的背景图片,以及背景色如何混合。 混合模式应该按background-image CSS 属性同样的顺序定义。如果混合模式数量与背景图像的数量不相等,它会被截取至相等的数量。

  <style>
    .boxmode{
      background-image: url(http://www.ccued.com/zb_users/theme/ccued/style/img/banner-1.jpg);
      background-color: #426b8f;
      background-blend-mode: overlay;
      background-size: 100% 100%;
      width: 500px;
      height: 200px;
    }
  </style>
  <div class="boxmode"></div>

其有多种混合模式并可以重叠使用。更多可选值可以参阅

https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-blend-mode

五、 纯CSS打字效果

CSS steps() 函数结合animation来实现,现看例子:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
.typing {
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.typing-effect {
  width: 22ch;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-family: monospace;
  font-size: 2em;
  animation: typing 2s steps(22), effect .5s step-end infinite alternate;
}

@keyframes typing {
  from {
    width: 0;
  }
}

@keyframes effect {
  50% {
    border-color: transparent;
  }
}
  </style>
</head>
<body>
  <div class="typing">
    <div class="typing-effect">Typing effect for text</div>
</div>
</body>
</html>

具体来说,在这个演示中,我们通过 steps() 属性来实现分割文本的效果。

首先,你必须指定 step() 中传入的数量,在这个例子中就是文本的长度。 

接着,第二步,我们使用 @keyframes 去声明什么时候开始执行动画。

这种效果并不是特别新鲜。但大多开发者都是借助JS实现,这个方案只需要CSS就可以了。

六、 透明图片阴影效果

关于阴影我们最常用的应该是box-shadow属性了,然后还有文本的text-shadow属性。然而今天的主角是drop-shadow属性。

drop-shadow 的工作方式是,其遵循给给定图片的 Alpha 通道。因此阴影是基于图片的内部形状,而不是显示在图片外面。

查看例子:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .drop-shadow {
      filter: drop-shadow(1px 8px 4px #3723a1);
    }
  </style>
</head>
<body>
  <img class="drop-shadow" src="https://stackdiary.com/wp-content/uploads/2022/02/logo.png">
</body>
</html>

七、 首字母大写下沉

first-letter 伪类

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .content-section{
      width: 150px;
    }
    .content-section p:first-of-type::first-letter {
      color: #2b75d6;
      float:  left;
      font-size: 2rem;
      line-height: 2vw;
      padding-right: 8px;
    }
  </style>
</head>
<body>
  <div class="content-section">
    <p>Hello everyone. I'm Lenton. Welcome to my website. </p>
  </div>
</body>
</html>





发表评论说说你的看法吧

精品模板蓝瞳原创精品网站模板

^