混合模式和混合验证模式_混合模式提供更多文字效果-CSDN博客

混合模式和混合验证模式

While this effect probably has less utility than the other blend mode techniques I’ve explored so far, it’s interesting enough to take a closer look:

尽管这种效果的实用性可能不如我到目前为止探讨过的其他混合模式技术，但有足够的兴趣仔细研究一下：

光年 (Light/Years)

In 1999 Michael Bierut and Nicole Trice designed a theme for that year’s Architectural League’s Beaux Arts Ball. It’s a striking piece of graphic design, and one that can be recreated using blend modes. First, the markup:

在1999年， Michael Bierut和Nicole Trice为当年的建筑联盟的Beaux Arts Ball设计了一个主题。这是一个引人注目的图形设计，并且可以使用混合模式重新创建。首先，标记：

<h1>
	<span id="light">
		<span>L</span>
		<span id="i">I</span>
		<span id="g">G</span>
		<span id="h">H</span>
		<span id="t">T</span>
	</span>
	<span id="years">YEARS</span>
</h1>

Typeface selection is particularly important in this case: for the effect to work, the letterforms need to take up the same amount of visual space without looking “blocky”. The original design used Tobias Frere-Jones' Interstate; I turned to the free, but visually similar Montserrat by Julieta Ulanovsky.

在这种情况下，字体的选择尤为重要：为了使效果发挥作用，字母需要占据相同数量的视觉空间，而不会显得“块状”。原始设计使用了Tobias Frere-Jones的Interstate ；我转向了朱丽叶·乌兰诺夫斯基(Julieta Ulanovsky)制作的免费的但在视觉上类似的蒙特塞拉特 (Montserrat)。

While the letters take up the same amount of space, the kerning between them will differ by default. I kept the word “YEARS” pretty much untouched, but surrounded each letter in “LIGHT” with a <span> element so that they could be positioned with CSS:

虽然字母占用相同的空间量，但默认情况下它们之间的字距调整会有所不同。我几乎未触及“ YEARS”一词，但用<span>元素将 “ LIGHT”中的每个字母包围起来，以便可以使用CSS定位它们：

h1 {
	font-size: 20vw;
	margin: 0;
	position: relative;
	font-weight: 600;
}
h1 > span {
	position: absolute; 
	left: 0;
	width: 100%;
}
#light { left: -1vw; }
#light > span { position: relative; }
#i { left: 3vw; }
#g { left: 3vw; }
#t { left: -2vw; }
#h { left: 1vw; }

The text is measured in vw units so that it scales perfectly with the browser window; for the demo on this page, a media query takes care of the tendency of the viewport-scaled text blowing out of its container at large screen sizes.

文字以vw单位进行度量，以便与浏览器窗口完美缩放。对于此页面上的演示，媒体查询会注意在大屏幕尺寸下视口缩放的文本从其容器中弹出的趋势。

To create the text reinforcement / blend effect, I used screen mode for the “YEARS” text:

为了创建文本增强/混合效果，我为“ YEARS”文本使用了screen模式：

#years {
	mix-blend-mode: screen; 
	letter-spacing: 3vw;
}

翻译自: https://thenewcode.com/1039/More-Text-Effects-with-Blend-Modes

混合模式和混合验证模式