Urara-Blog/urara/2023-01-29-css-tricks/+page.svelte.md

title	created	summary	tags
CSS · 新拟态玻璃按钮和优雅的文字描边	2023-01-29	Glass buttons and elegant text stroke	CSS Trick

1.玻璃按钮

来源

Fediverse Fetch Analyzer

效果

Neumorphism Button

思路

• 用三种不同的阴影效果来创造层次感
• 用 box-shadow 实现，其中
  • 阴影 1: 4px 4px 8px #afb8bd 为右下 ↘ 暗面阴影颜色
  • 阴影 2: -4px -4px 8px #edf8ff 为左上 ↖ 亮面外边缘颜色
  • 阴影 3: inset 2px 2px rgba(0, 0, 0, 0.1) 为内部阴影，用于营造玻璃透明感
• 鼠标悬浮(hover)在按钮上时，按钮颜色变浅
• 按钮阴影色应和背景是同一色系

代码

button {
  /*  reset */
  all: unset;
  padding: 10px;
  font-size: 1rem;
  border-radius: 50px;
  /* hsl(hue saturation lightness / alpha)  */
  background: hsl(260, 25%, 84%);
  cursor: pointer;
  box-shadow: 4px 4px 8px #afb8bd, -4px -4px 8px #edf8ff, inset 2px 2px rgba(0, 0, 0, 0.1);
}

button:hover {
  background: hsl(260, 25%, 90%);
}

html {
  background: #ced8de;
}

<button>Neumorphism Button</button>

CodePen:neumorphism-button

2. 优雅文字描边

来源

Typescript cheatsheet

效果

Elegant-text-shadow

思路

• 用两个多重投影重合后未覆盖的部分作为灰色描边。
• 用 text-shadow 来做，当有两个 text-shadow 的时候，可以做多重投影
• text-shadow：水平阴影，垂直阴影，模糊距离，阴影颜色
• 从上到下的投影：
  • 上 2px 2px 0 #fff 白色 （和文字背景颜色一样）
  • 下 3px 3px 0 #ddd 灰色
• 两个投影偏移的距离越大，描边越粗。不过我感觉，1px 的差距比较像描边。

代码

p {
  font-family: serif;
  font-style: italic;
  font-size: 4rem;
  text-shadow: 2px 2px 0 #fff, 3px 3px 0 #ddd;
}

<p>Elegant-text-shadow</p>

CodePen：elegant-text-stroke