/

CSS · 新拟态玻璃按钮和优雅的文字描边

1.玻璃按钮

来源

Fediverse Fetch Analyzer

效果

思路

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

代码

css
css
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;
}
html
html
<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 的差距比较像描边。

代码

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

CodePen：elegant-text-stroke

%sveltekit.body%