• <kbd id="sucug"></kbd>
    技術頻道導航
    HTML/CSS
    .NET技術
    IIS技術
    PHP技術
    Js/JQuery
    Photoshop
    Fireworks
    服務器技術
    操作系統
    網站運營

    贊助商

    分類目錄

    贊助商

    最新文章

    搜索

    文字/div陰影調色板生成器|CSS技巧

    作者:admin    時間:2022-12-5 9:57:27    瀏覽:

    當我們需要設計文字或div盒子的陰影效果時,通常要慢慢修改CSS樣式來不斷調整,這樣的效率會比較低。今天給大家介紹一個文字/div陰影調色板生成器,通過拖動標桿就能可視化調整陰影效果,可視即可得,可大大提高工作效率。

    陰影調色板生成器
    陰影調色板生成器

    使用介紹

    打開陰影調色板生成器網址:https://www.joshwcomeau.com/shadow-palette/

    界面如前面所示。

    我們可以隨意拖動標桿滑塊來調整左側區域的DIV盒子的陰影效果,這個過程是可視化的,非常方便。與此同時,右側會看到CSS樣式的生成。我們在網頁上使用此樣式,就能實現自己想要的DIV陰影效果。

    例子

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>text Shadow</title>

    <style>
    div {
      font: 900 20vw system-ui;
      color: white;
      --shadow-color: 286deg 36% 56%;
      --shadow-elevation-low: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34),
        0.4px 0.8px 1px hsl(var(--shadow-color) / 0.34),
        1px 2px 2.5px hsl(var(--shadow-color) / 0.34);
      --shadow-elevation-medium: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.36),
        0.8px 1.6px 2px hsl(var(--shadow-color) / 0.36),
        2.1px 4.1px 5.2px hsl(var(--shadow-color) / 0.36),
        5px 10px 12.6px hsl(var(--shadow-color) / 0.36);
      --shadow-elevation-high: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34),
        1.5px 2.9px 3.7px hsl(var(--shadow-color) / 0.34),
        2.7px 5.4px 6.8px hsl(var(--shadow-color) / 0.34),
        4.5px 8.9px 11.2px hsl(var(--shadow-color) / 0.34),
        7.1px 14.3px 18px hsl(var(--shadow-color) / 0.34),
        11.2px 22.3px 28.1px hsl(var(--shadow-color) / 0.34),
        17px 33.9px 42.7px hsl(var(--shadow-color) / 0.34),
        25px 50px 62.9px hsl(var(--shadow-color) / 0.34);
      margin-top: 0 !important;
      text-shadow: var(--shadow-elevation-medium);
    }
    div:nth-child(1) {
      text-shadow: var(--shadow-elevation-low);
    }
    div:nth-child(2) {
      text-shadow: var(--shadow-elevation-medium);
    }
    div:nth-child(3) {
      text-shadow: var(--shadow-elevation-high);
    }

    body {
      background: #f2cffc;
      height: 100vh;
      margin: 0;
      display: grid;
      place-items: center;
    }
    </style>

    </head>

    <body>

    <div>
      <div>Shadow</div>
      <div>Shadow</div>
      <div>Shadow</div>
    </div>

    </body>

    </html>

    demodownload

    效果

     

    相關文章

    x
    • 站長推薦
    国产成年女人人AA人视频看看-婷婷黄色视频-一女被两男吃奶添下A片免费-欧美黑人又粗又大高潮喷水