几何形状的阴影

Question

powerg

Asked:2024-10-23 01:46:43 +0000 UTC2024-10-23 01:46:43 +0000 UTC 2024-10-23 01:46:43 +0000 UTC

如何制作圆角文字轮廓？

772

请告诉我如何为文字制作这样的笔画？

4 个回答

Voted

Qwertiy · Answer 1 · 2024-10-23T05:11:55Z

有一个说明和一个基于它的示例。

我做了一点不同的事情，结果如下。祝您选择非零系数好运。stdDeviation最后一组values控制阴影的大小，前三组中的最后一个值values控制颜色。厚度越小，阴影效果越好，但宽度越宽，边界的模糊或像素化就越大。可以应用多个过滤器。

body {
  font-family: "Kablammo", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "MORF" 0;
  font-size: 2em;
}

.with-outline {
  position: relative;
  padding: .25em;
  color: white;
  letter-spacing: .25ch;
}

.with-outline::before, .with-outline::after {
  content: attr(aria-label);
  position: relative;
}

.with-outline::before {
  position: absolute;
  filter: url('#medal-text-filter');
}

.svg-with-filter {
  pointer-events: none;
  position: absolute;
  visibility: hidden;
  width: 0;
  z-index: -100;
}

<link href="https://fonts.googleapis.com/css2?family=Kablammo&display=swap" rel="stylesheet">

<svg class="svg-with-filter" aria-hidden="true">
  <filter id="medal-text-filter">
    <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="1" />
    <feColorMatrix in="blur" values="0 0 0 0 0.25  0 0 0 0 0.125  0 0 0 0 0.5  0 0 0 32 0" />
  </filter>
</svg>

Начинаем
<div class="with-outline" aria-label="В моменте"></div>
и продолжаем

要制作宽而清晰的笔画而不像素化，您需要多次应用滤镜。文本颜色和中间过滤器中的颜色不会影响此类公式的任何内容。您只需在最后一个过滤器中选择颜色即可。

body {
  font-family: "Kablammo", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "MORF" 0;
  font-size: 4em;
}

.with-outline {
  position: relative;
  padding: .25em;
  color: white;
  letter-spacing: .25ch;
}

.with-outline::before, .with-outline::after {
  content: attr(aria-label);
  position: relative;
}

.with-outline::before {
  position: absolute;
  filter: url('#medal-text-filter');
}

.svg-with-filter {
  pointer-events: none;
  position: absolute;
  visibility: hidden;
  width: 0;
  z-index: -100;
}

<link href="https://fonts.googleapis.com/css2?family=Kablammo&display=swap" rel="stylesheet">

<svg class="svg-with-filter" aria-hidden="true">
  <filter id="medal-text-filter">
    <feGaussianBlur in="SourceGraphic" result="blur1" stdDeviation="1" />
    <feColorMatrix in="blur1" result="matrix1" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 5 0" />
    <feGaussianBlur in="matrix1" result="blur2" stdDeviation="1" />
    <feColorMatrix in="blur2" result="matrix2" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 5 0" />
    <feGaussianBlur in="matrix2" result="blur3" stdDeviation="1" />
    <feColorMatrix in="blur3" result="matrix3" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 5 0" />
    <feGaussianBlur in="matrix3" result="blur4" stdDeviation="1" />
    <feColorMatrix in="blur4" result="matrix4" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 5 0" />
    <feGaussianBlur in="matrix4" result="blur5" stdDeviation="1" />
    <feColorMatrix in="blur5" result="matrix5" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 5 0" />
    <feGaussianBlur in="matrix5" result="blur6" stdDeviation="1" />
    <feColorMatrix in="blur6" result="matrix6" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 5 0" />
    <feGaussianBlur in="matrix6" result="blur7" stdDeviation="1" />
    <!-- В последнем фильтре надо настроить цвета -->
    <feColorMatrix in="blur7" values="0 0 0 0 0.5  0 0 0 0 0.125  0 0 0 0 0.75  0 0 0 5 0" />
  </filter>
</svg>

Начинаем
<div class="with-outline" aria-label="В моменте"></div>
и продолжаем

您也可以使用两对过滤器来实现，但边缘质量似乎更差：

body {
  font-family: "Kablammo", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "MORF" 0;
  font-size: 4em;
}

.with-outline {
  position: relative;
  padding: .25em;
  color: white;
  letter-spacing: .25ch;
}

.with-outline::before, .with-outline::after {
  content: attr(aria-label);
  position: relative;
}

.with-outline::before {
  position: absolute;
  filter: url('#medal-text-filter');
}

.svg-with-filter {
  pointer-events: none;
  position: absolute;
  visibility: hidden;
  width: 0;
  z-index: -100;
}

<link href="https://fonts.googleapis.com/css2?family=Kablammo&display=swap" rel="stylesheet">

<svg class="svg-with-filter" aria-hidden="true">
  <filter id="medal-text-filter">
    <!-- В первых двух надо настроить жирность -->
    <feGaussianBlur in="SourceGraphic" result="blur1" stdDeviation="4" />
    <feColorMatrix in="blur1" result="matrix1" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 64 0" />
    <feGaussianBlur in="matrix1" result="blur2" stdDeviation="1" />
    <!-- В последнем фильтре надо настроить цвета -->
    <feColorMatrix in="blur2" values="0 0 0 0 0.5  0 0 0 0 0.125  0 0 0 0 0.75  0 0 0 16 0" />
  </filter>
</svg>

Начинаем
<div class="with-outline" aria-label="В моменте"></div>
и продолжаем

UModeL · Answer 2 · 2024-10-23T13:44:06Z

如果不需要笔画的（半）透明，则可以通过多次应用drop-shadow()具有特定参数和顺序的过滤器来解决问题：

@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
body { font: 140px 'Great Vibes', cursive; background-color: #ff6a60; }

.chubby {
  /* Переменная для цвета обводки */
  --shadow-color: #12ebcb;
  filter:
   /* Размер (1px = один фильтр) */
    drop-shadow(0 0 1px var(--shadow-color))
    drop-shadow(0 0 1px var(--shadow-color))
    drop-shadow(0 0 1px var(--shadow-color))
    drop-shadow(0 0 1px var(--shadow-color))
    drop-shadow(0 0 1px var(--shadow-color))
   /* Чёткость внешних краёв */
    drop-shadow(0 0 0px var(--shadow-color))
    drop-shadow(0 0 0px var(--shadow-color))
    drop-shadow(0 0 0px var(--shadow-color))
    drop-shadow(0 0 0px var(--shadow-color))
    drop-shadow(0 0 0px var(--shadow-color));
}

<span class="chubby">в моменте</span>

交互示例：

size.addEventListener('input', fChubby); edge.addEventListener('input', fChubby); function fChubby() { let css = `/* Размер (1px = один фильтр) (${size.value} шт.)*/` + `\r\n\tdrop-shadow(0 0 1px var(--shadow-color))`.repeat(+size.value) + `\r\n/* Чёткость внешних краёв (${edge.value} шт.)*/` + `\r\n\tdrop-shadow(0 0 0px var(--shadow-color))`.repeat(+edge.value); document.querySelector('.chubby').style.filter = code.value = css; }; fChubby();

@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap'); body { background-color: #ff6a60; } textarea { float: right; width: 55vw; height: 90vh; white-space: pre; }

.chubby {
  font: 72px 'Great Vibes', cursive;
  /* Переменная для цвета обводки */
  --shadow-color: #12ebcb;
  filter: /* 
    После подбора параметров, 
    замените этот комментарий 
    кодом из текстового поля */ ;
}

<textarea id="code"></textarea><span class="chubby">в моменте</span><br><input type="range" max="50" value="5" id="size"> Размер обводки<br><input type="range" max="10" value="5" id="edge"> Чёткость краёв

PS：半透明的问题也可以解决，虽然有点拐杖。如果有必要，我稍后会补充答案。

puffleeck · Answer 3 · 2024-10-23T04:43:40Z

.x {
  font-size: 50px;
  -webkit-text-stroke: .5em rgba(0, 150, 0, .5);
  /* без прозрачности текст накроет */
}

.y {
  font-size: 50px;
  -webkit-text-stroke: .5em rgba(0, 150, 0, .3);
  filter: drop-shadow(5px 0 0 lime);
  /* по идее тут можно поиграться с чем то вроде
  mix-blend-mode: difference
  выдергивая текст из его же обводки. в таком случае можно
  было бы избавиться от прозрачности, но чот не уверен */
}

.z {
  font-size: 50px;
  -webkit-text-stroke: .5em lime;
  paint-order: stroke fill;
}

<i class='x'>ну например так...</i>
<br>
<i class='x'>в моменте</i>
<br>
<i class='y'>или так...</i>
<br>
<i class='z'>ну например так...</i>

UPD

我终于想起来那个滴管叫什么了……

上下font-攀爬text-，这就是paint-order所谓的...:face-palm:

并且 - 直观地

https://developer.mozilla.org/ru/docs/Web/CSS/paint-order

在应用于该类的代码片段中.z

eri · Answer 4 · 2024-10-23T04:43:11Z

eri

2024-10-23T04:43:11Z2024-10-23T04:43:11Z

text-lines 创建这样的笔画，但在文本之前。因此，我又在上面写了（对于拄着拐杖的位置表示歉意））。使用圆形字体，笔画会更圆。

另一种选择是应用 svg 的效果。

body {
  font-family: sans-serif;
  background: #222;
  color: darkred;
}

.outer {
  display:inline–block;
Font-size: 3em;
   font-style: italic;
}
.shadow {
-webkit-text-stroke: 15px #fff;display:inline–block; position:absolute;
}
.inner {
position:relative;
display:inline–block;
}

   Lorem ipsum <div class=outer><div class=shadow>в моменте</div><div class=inner>в моменте</div></div> foo barr

2

如何制作圆角文字轮廓？

UPD

我看不懂措辞

请求的模块“del”不提供名为“default”的导出

"!+tab" 在 HTML 的 vs 代码中不起作用

我正在尝试解决“猜词”的问题。Python

可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件？

Python解析野莓

问题：“警告：检查最新版本的 pip 时出错。”

帮助编写一个用值填充变量的循环。解决这个问题

尽管依赖数组为空，但在渲染上调用了 2 次 useEffect

数据不通过 Telegram.WebApp.sendData 发送

如何制作圆角文字轮廓？

4 个回答

UPD

相关问题