在本教程中，我们将创建插入类型a流行文本处理，使用CSS。如果你密切关注《六版修订》，你可能会想:“雅各布已经写了一个Photoshop教程如何做到这一点。”
这是正确的，但这次我们将只使用CSS来做它。
我开始重新创造如何在Photoshop中创建嵌入排版在尝试了一些新的CSS3属性后，我能够做出类似的类型处理。
我们将在不到十行CSS中完成所有这些。
步骤1:HTML标记
让我们首先设置HTML，这非常简单。排版将是一个h1元素，围绕一个div它的背景。
.Inset Typography
步骤2:背景
我们要做的CSS的第一点是背景。我们将创建类似于上面提到的Photoshop教程中的背景。我们将设置宽度为550 px高度为100 px．
接下来，我们将使用CSS3渐变。如果您从未使用过CSS3所需的浏览器扩展，请跳到我之前的一篇文章你应该知道的CSS3技术首先，要迎头赶上。
我们想让背景有一个从上到下的渐变# 003471来# 448建行．
这样做的代码是:
#insetBgd{宽度:550px;身高:100 px;background: -moz-linear-gradient(-90deg， #003471， #448CCB);background: -webkit-gradient(线性，左上，左下，从(#003471)，到(#448CCB));｝
步骤3:定义字体堆栈和样式
接下来，我们要定义首选字体。Photoshop教程使用的是Rockwell STD，但我们将只使用普通的Rockwell。这两种字体都不被认为是可接受的网络安全字体，但更多的用户会选择普通的、旧的Rockwell字体，而不是Rockwell STD字体。
但是，如果用户没有Rockwell，我们将定义一些web安全字体来代替它。
在本例中，我设置了字体大小来50 px，字体颜色来# 0 d4383．以下是我们所拥有的:
h1.insetType{ font-family: Rockwell, Georgia, "Times New Roman", Times, serif; font-size: 50px; color: #0D4383; }
步骤4:插入样式
下一步也是最后一步是最重要的部分。我们将为字体设置样式，并赋予它我们试图实现的“嵌入”外观。我们将使用文本阴影风格。
你会注意到Jacob在Photoshop中使用了“内阴影”来获得这个效果。不幸的是，文本阴影没有“inset”值。所以我们要做的是创建多个RGBA黑白1px阴影实例，一些是负像素，以及添加不同级别的不透明度。
我摆弄了一堆不同的变体，最后确定为:
Text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px;
添加文本阴影的样式h1.insetType类，我们最终的CSS代码如下所示:
#insetBgd{宽度:550px;身高:100 px;背景:-moz-linear-gradient(-90度,# 003471,# 448建行);background: -webkit-gradient(线性，左上，左下，从(#003471)，到(#448CCB));} h1。insetType {padding-left: 50px;/*填充只是为了将h1元素移动到div */ padding-top的中心:17px;font-family: Rockwell, Georgia， "Times New Roman"， Times, serif;字体大小:50 px;颜色:# 0 d4383; text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px; }
CSS3嵌入排版演示:
下面，您将看到最终结果。请注意，只有当您的浏览器支持我们在本教程中使用的属性的当前CSS3规范时，您才能看到它。
您的浏览器不支持iframes，您将无法查看此演示。
Firefox 3.6的外观(没有Rockwell)
下面是这个效果的屏幕截图，是在Windows操作系统的机器上，Firefox 3.6和没有安装Rockwell的情况下拍摄的。
结论
结果出来了。很简单，对吧?它可能看起来不像在Photoshop中那样好，但它会占用更少的加载时间，它比静态图像更灵活，而且这一切都不需要任何特殊的软件。
我想要赞扬StylizedWeb给了我一个如何去做这件事的想法。感谢阅读!
