技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營(yíng)

贊助商

分類目錄

贊助商

最新文章

搜索

文字/div陰影調(diào)色板生成器|CSS技巧

作者:admin    時(shí)間:2022-12-5 9:57:27    瀏覽:

當(dāng)我們需要設(shè)計(jì)文字或div盒子的陰影效果時(shí),通常要慢慢修改CSS樣式來(lái)不斷調(diào)整,這樣的效率會(huì)比較低。今天給大家介紹一個(gè)文字/div陰影調(diào)色板生成器,通過拖動(dòng)標(biāo)桿就能可視化調(diào)整陰影效果,可視即可得,可大大提高工作效率。

陰影調(diào)色板生成器
陰影調(diào)色板生成器

使用介紹

打開陰影調(diào)色板生成器網(wǎng)址:https://www.joshwcomeau.com/shadow-palette/

界面如前面所示。

我們可以隨意拖動(dòng)標(biāo)桿滑塊來(lái)調(diào)整左側(cè)區(qū)域的DIV盒子的陰影效果,這個(gè)過程是可視化的,非常方便。與此同時(shí),右側(cè)會(huì)看到CSS樣式的生成。我們?cè)诰W(wǎng)頁(yè)上使用此樣式,就能實(shí)現(xiàn)自己想要的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

效果

 

相關(guān)文章

標(biāo)簽: css  css3  css盒子陰影  css-shadow  text-shadow  
x
  • 站長(zhǎng)推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */