文字拉伸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
總結
以上是生活随笔為你收集整理的文字拉伸css_CSS 3D拉伸文字的全部內容，希望文章能夠幫你解決所遇到的問題。
