文字拉伸css_CSS 3D拉伸文字

文字拉伸css

The technique I am demonstrating here isn’t one I made from scratch; as far as I am aware, credit for origination should go to Mark Otto, a designer at Twitter; the version that I’m showing derives from patterns created by Trent Walton. This is not “true 3D” but a fake-out; real 3D text will have to wait for lessons in WebGL and CSS 3D transforms.

我在这里演示的技术不是我从头开始做的。 据我所知，推特应该归功于Twitter的设计师Mark Otto ； 我要显示的版本来自Trent Walton创建的模式。 这不是“真正的3D”，而是伪造品。 真正的3D文本必须等待WebGL和CSS 3D转换的课程。

Very simply, we create extruded text appearance by creating a stacked series of CSS text-shadows. As we’ll see later, transferring the same technique to box-shadow can also create the effect of a raised or sunken button in CSS.

很简单，我们通过创建一系列堆叠的CSS文本阴影来创建拉伸文本外观。 稍后我们将看到，将相同的技术转移到box-shadow中也可以在CSS中产生凸起或凹陷的按钮效果。

The CSS code is somewhat repetitive; the main aspect to focus on is the changing vertical offset of the main shadows. Thankfully, text-shadow does not require CSS vendor prefixes.

CSS代码有些重复。 要关注的主要方面是主阴影的垂直偏移量不断变化。 幸运的是， text-shadow不需要CSS供应商前缀 。

The code for the example at the top of this article is:

本文顶部示例的代码为：

h1 {
	background: #ccc;
	font-size: 4vm;
	padding: 1.2rem;
	color: #fff;
	font-family: Blue Highway; Arial Black, sans-serif;
	text-align: center;
	letter-spacing: 1rem;
	text-shadow:0 .01em 0px #dededa,
		0 .015em 0 #dededa,
		0 .02em  0 #dededa,
		0 .028em 0 #dededa,
		0 .035em 0 #dededa,
		0 .04em  0 #dededa,
		0 .045em 0 #dbdbd6,
		0 .055em 0 #dbdbd6,
		0 .06em  0 #dbdbd6,
		0 .065em 0 #d9d9d4,
		0 .07em  0 #d9d9d4,
		0 .08em  0 #d8d8d3,
		0 .085em 0 #d8d8d3,
		0 .09em  0 #d8d8d3,
		0 .095em 0 #d6d6d1,
		0 .105em 0 #d6d6d1,
		0 .06em .06rem rgba(104, 104, 92, 0.15),
		.07em .105em .04em rgba(0, 0, 0, .015),
		-.02em .09em .05em rgba(104, 104, 92, 0.25),
		-.03em .07em .065em rgba(104, 104, 92, 0.1),
		-.075em .08em .09em rgba(104, 104, 92, 0.06),
		-.09em .06em .195em rgba(104, 104, 92, 0.095);
}

Just as with multiple background images in CSS, we separate multiple text shadows with commas, starting with those originating nearest the text element and working outwards. (For this example I’m using em units rather than px for enhanced scalability, but almost any CSS unit of measurement would work).

就像CSS中的多个背景图片一样 ，我们用逗号分隔多个文本阴影，从最接近text元素并向外展开的阴影开始。 (对于此示例，我使用em单位而不是px来增强可伸缩性，但是几乎任何CSS度量单位都可以使用)。

The first 16 shadows are solid, slowly and subtly growing darker as they descend, creating the appearance of extruded text. The final six shadows in the declaration actually serve the purpose of ambient shadows, being offset to the left, right, and top of each letter, with added blur and transparency (in the form of rgba color values).

前16个阴影是固体，随着它们下降，缓慢而微妙地逐渐变暗，从而形成挤压文本的外观。 声明中的最后六个阴影实际上是用于环境阴影的目的，向每个字母的左侧，右侧和顶部偏移，并增加了模糊和透明度(以rgba颜色值的形式)。

Naturally, this effect will only work in modern browsers – IE9 does not support text-shadow, although IE10 does. It’s therefore wise to make sure that make that the base color of the text is distinct from the background, as is the example at the top of this article; try to avoid “white on white”, ensuring that your content is still readable in IE.

自然，此效果仅在现代浏览器中有效– IE9不支持text-shadow ，尽管IE10可以。 因此，明智的做法是确保使文本的底色与背景不同，如本文顶部的示例所示。 尝试避免“白底白字”，以确保您的内容在IE中仍然可读。

If you’d prefer not to step through the process of making this shadow effect yourself, there are now automated CSS generators for 3D CSS Text.

如果您不想自己一步一步地制作阴影效果，现在可以使用3D CSS Text的自动CSS生成器 。

翻译自: https://thenewcode.com/471/CSS-3D-Extruded-Text

文字拉伸css