当前位置：首页 > article >正文

CSSfilter实现磨砂效果

article 2024/10/26 7:00:39

以往我们实现磨砂效果一般是用背景透明度和阴影来实现的，但这种效果给人看起来比较僵硬，也无法更加灵活的变更效果。

如今，filter属性可以实现磨砂效果，案例如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      html {
        line-height: 1.5;
        font-size: 15px;
        font-weight: 400;
      }

      body {
        width: 100vw;
        min-height: 100vh;

        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;

        font-family: "Exo", Arial, sans-serif;
        background: url("https://static.fedev.cn/sites/default/files/blogs/2021/2101/glassmorphism-css-11.jpeg")
          no-repeat center fixed;
        background-size: cover;
        color: #fff;
      }

      .card {
        min-height: 400px;
        width: 320px;
        border-radius: 8px;

        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .card__media {
        height: 120px;
        width: 120px;
        border-radius: 50%;
        margin: 30px 0 20px 0;
      }

      .card__media img {
        max-width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        object-position: center;
      }

      .card__body {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #d5d5d5;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 0.7px;
        width: 100%;
        flex: 1;
      }

      .card__title {
        margin-top: 5px;
      }
      .card__subtitle {
        color: #c0c0c0;
        font-weight: 400;
        font-size: 14px;
        letter-spacing: 1px;
        margin-bottom: 15px;
      }

      .card__content {
        display: grid;
        width: 100%;
        min-height: 70px;
        grid-template-columns: repeat(2, 1fr);
        border-radius: 0 0 8px 8px;
        margin-top: auto;
        padding: 5px 0;
      }

      .card__content > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #d5d5d5;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 0.7px;
      }

      .followers {
        border-right: 2px solid rgba(255, 255, 255, 0.08);
      }

      .followers__number,
      .following__number {
        margin: 5px 0;
      }

      .followers__title,
      .following__title {
        color: #c0c0c0;
        font-weight: 400;
        font-size: 14px;
        letter-spacing: 1px;
        margin: 5px 0;
      }

      .card__action {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-top: 10px;
      }

      .card__button {
        background-color: #2c303a;
        border: none 0;
        color: #9b9dad;
        padding: 1rem 1.75rem;
        font-size: 1.2rem;
        transition: all 0.2s linear;
        border-radius: 4px;
        font-family: "Exo", Arial, sans-serif;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        width: 85%;
      }

      .card__button:hover {
        color: #fff;
        background-color: #5a5f73;
      }

      .card__button:focus:not(:focus-visible) {
        outline: none;
        box-shadow: 0 0 0 3px #03a9f4d9;
      }

      .card__button:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px #03f4e0b8;
      }

      .card,
      .card__media,
      .card__content {
        position: relative;
        background: inherit;
        overflow: hidden;
      }

      .card::before,
      .card__media::before,
      .card__content::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: 8px;

        z-index: 1;
        background: inherit;
        box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.2);
        filter: blur(10px);
      }

      .card > * {
        position: relative;
        z-index: 2;
      }

      .card__media img {
        top: 5%;
        right: 5%;
        bottom: 5%;
        left: 5%;
        position: absolute;
        z-index: 2;
        width: 90%;
        height: 90%;
        z-index: 2;
      }

      .card__media::before {
        box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.06);
      }

      .card__content::before {
        border-radius: 0 0 8px 8px;
        box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.06);
      }
    </style>
  </head>
  <body translate="no">
    <div class="card">
      <div class="card__media">
        <img
          src="https://assets.codepen.io/1061/internal/avatars/users/default.png?fit=crop&format=auto&height=80&version=1&width=80"
          alt="Airen"
        />
      </div>
      <div class="card__body">
        <h3 class="card__title">Airen Liao</h3>
        <h4 class="card__subtitle">Web Developer</h4>
        <div class="card__action">
          <button class="card__button">View Profile</button>
        </div>
        <div class="card__content">
          <div class="followers">
            <div class="followers__number">405</div>
            <h5 class="followers__title">Followers</h5>
          </div>
          <div class="following">
            <div class="following__number">85</div>
            <h5 class="following__title">Following</h5>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

但是filter：blur设置磨砂效果，不仅会作用在自身元素上面，对子级同样生效，所以一般在自身元素上面实现自身效果同时要加上伪类

backdrop-filter属性出现后，磨砂效果就会更加逼真，并且设置磨砂效果对子级元素无任何影响，故简化了很多代码。

案例如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      html {
        line-height: 1.5;
        font-size: 15px;
        font-weight: 400;
      }

      body {
        width: 100vw;
        min-height: 100vh;

        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;

        font-family: "Exo", Arial, sans-serif;
        background: url("https://static.fedev.cn/sites/default/files/blogs/2021/2101/glassmorphism-css-11.jpeg")
          no-repeat center fixed;
        background-size: cover;
        color: #fff;
      }

      .card {
        min-height: 400px;
        width: 320px;
        border-radius: 8px;

        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .card__media {
        height: 120px;
        width: 120px;
        border-radius: 50%;
        margin: 30px 0 20px 0;
      }

      .card__media img {
        max-width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        object-position: center;
      }

      .card__body {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #d5d5d5;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 0.7px;
        width: 100%;
        flex: 1;
      }

      .card__title {
        margin-top: 5px;
      }
      .card__subtitle {
        color: #c0c0c0;
        font-weight: 400;
        font-size: 14px;
        letter-spacing: 1px;
        margin-bottom: 15px;
      }

      .card__content {
        display: grid;
        width: 100%;
        min-height: 70px;
        grid-template-columns: repeat(2, 1fr);
        border-radius: 0 0 8px 8px;
        margin-top: auto;
        padding: 5px 0;
      }

      .card__content > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #d5d5d5;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 0.7px;
      }

      .followers {
        border-right: 2px solid rgba(255, 255, 255, 0.08);
      }

      .followers__number,
      .following__number {
        margin: 5px 0;
      }

      .followers__title,
      .following__title {
        color: #c0c0c0;
        font-weight: 400;
        font-size: 14px;
        letter-spacing: 1px;
        margin: 5px 0;
      }

      .card__action {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-top: 10px;
      }

      .card__button {
        background-color: #5a3a3e;
        border: none 0;
        color: #9b9dad;
        padding: 1rem 1.75rem;
        font-size: 1.2rem;
        transition: all 0.2s linear;
        border-radius: 4px;
        font-family: "Exo", Arial, sans-serif;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        width: 85%;
      }

      .card__button:hover {
        color: #fff;
        background-color: #5a5f73;
      }

      .card__button:focus:not(:focus-visible) {
        outline: none;
        box-shadow: 0 0 0 3px #03a9f4d9;
      }

      .card__button:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px #03f4e0b8;
      }

      .card__media img {
        top: 5%;
        right: 5%;
        bottom: 5%;
        left: 5%;
        position: absolute;
        z-index: 2;
        width: 90%;
        height: 90%;
        z-index: 2;
      }

      .card__media {
        position: relative;
      }

      .card,
      .card__media,
      .card__content {
        /* backdrop-filter: blur(30px) saturate(125%);
        background-color: rgb(217 200 200 / 16%); */
      }
    </style>
  </head>
  <body translate="no">
    <div class="card">
      <div class="card__media">
        <img
          src="https://assets.codepen.io/1061/internal/avatars/users/default.png?fit=crop&format=auto&height=80&version=1&width=80"
          alt="Airen"
        />
      </div>
      <div class="card__body">
        <h3 class="card__title">Airen Liao</h3>
        <h4 class="card__subtitle">Web Developer</h4>
        <div class="card__action">
          <button class="card__button">View Profile</button>
        </div>
        <div class="card__content">
          <div class="followers">
            <div class="followers__number">405</div>
            <h5 class="followers__title">Followers</h5>
          </div>
          <div class="following">
            <div class="following__number">85</div>
            <h5 class="following__title">Following</h5>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>