文字拉伸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.

我在這里演示的技術(shù)不是我從頭開始做的。 據(jù)我所知，推特應(yīng)該歸功于Twitter的設(shè)計(jì)師Mark Otto ； 我要顯示的版本來自Trent Walton創(chuàng)建的模式。 這不是“真正的3D”，而是偽造品。 真正的3D文本必須等待WebGL和CSS 3D轉(zhuǎn)換的課程。

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.

很簡單，我們通過創(chuàng)建一系列堆疊的CSS文本陰影來創(chuàng)建拉伸文本外觀。 稍后我們將看到，將相同的技術(shù)轉(zhuǎn)移到box-shadow中也可以在CSS中產(chǎn)生凸起或凹陷的按鈕效果。

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代碼有些重復(fù)。 要關(guān)注的主要方面是主陰影的垂直偏移量不斷變化。 幸運(yùn)的是， text-shadow不需要CSS供應(yīng)商前綴 。

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中的多個(gè)背景圖片一樣 ，我們用逗號分隔多個(gè)文本陰影，從最接近text元素并向外展開的陰影開始。 (對于此示例，我使用em單位而不是px來增強(qiáng)可伸縮性，但是幾乎任何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個(gè)陰影是固體，隨著它們下降，緩慢而微妙地逐漸變暗，從而形成擠壓文本的外觀。 聲明中的最后六個(gè)陰影實(shí)際上是用于環(huán)境陰影的目的，向每個(gè)字母的左側(cè)，右側(cè)和頂部偏移，并增加了模糊和透明度(以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.

自然，此效果僅在現(xiàn)代瀏覽器中有效– IE9不支持text-shadow ，盡管IE10可以。 因此，明智的做法是確保使文本的底色與背景不同，如本文頂部的示例所示。 嘗試避免“白底白字”，以確保您的內(nèi)容在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.

如果您不想自己一步一步地制作陰影效果，現(xiàn)在可以使用3D CSS Text的自動CSS生成器 。

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

文字拉伸css

總結(jié)

以上是生活随笔為你收集整理的文字拉伸css_CSS 3D拉伸文字的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。