很酷CSS3排版实验

CSS3为网站设计和制作开辟了新途径，能更好地控制通过浏览器显示的内容。CSS3为文字和排版创造独特的效果。

We’ve gathered up some way cool CSS3 typography experiments for you to check out, and hopefully inspire you when using CSS3 in your own projects.

我们收集了一些很酷的CSS3的排版案例，并希望能激发您的灵感。

CSS3印刷术海报

另一个CSS3的技术实验。使用了box-shadow, border-radius, @font-face, transform, box-sizing, text-shadow, RGBa，也许还有一些更多的东西。

CSS3倾斜移位文本

树木是一个实验，试图创建一个使用CSS3的文本倾斜转移效应。

再次，文字阴影是我最好的朋友。通过加入一个更大的偏移- Y和模糊半径的顶部和底部边缘，文本显示，有一个镜头模糊，这是典型的倾斜移位效应。是一些旋转，rotateX和skewX使文本与背景图像的角度。

微妙的CSS3印刷术你发誓是在Photoshop

感谢text shadows, outlines, transitions，text gradients，我们现在可以创造更酷的像Photoshop做出来的排版。不，所有CSS3的baby！让我们看看这个视频的快速提示。

柯蒂斯的CSS字体

Curtis是目前正在开发中的sans - serif家族字体名字。Curtis Heavy and Curtis Pixel 14像素。使用了background color, border width, border radius，绝对/相对定位。

从好莱坞的人

来自好莱坞的人是一个动力学类型的实验，使用先进的CSS选择器和Webkit的CSS属性* 这个想法是基于动力学类型，通常使用后的影响，Flash或其他动画工具创建的视频。JavaScript使用，但最低限度，真的只是把类名和关闭。所有的动画都使用CSS来实现。

CSS3的玻璃文字效果

Zeppelin是一个实验，试图用CSS3创建一个玻璃文字效果（折射率）。是的，另一种无用的CSS3演示。但我总是试图保持尽可能最小的标记... 这个时候只有一个额外的<p>标签。我尝试使用：after伪元素，但不知何故，动画没有工作。

用CSS3的三维立体效果

CSS3D只用CSS3创建3D立体效果。首先，我刚刚创建的这个红色和青色的效果，因为我觉得它看上去很酷。但后来我得到了一些3D眼镜，感到非常震惊，它实际上。基本上，你只需要一行的CSS。一个带有红色和青色的文字阴影偏移。诀窍是使用文本阴影“EM”。这样，如果你改变字体大小，文本阴影，在相同的比例变化。

我爱印刷术实验

这是一个快速的实验，再现形象，从我爱印刷术使用超过简单的语义化的HTML，CSS 2.1的，和几个CSS3属性的现代浏览器实现。一路上，一些新的现代浏览器的错误和不一致之处暴露出来。

CSS3变换和字体面对面

不，这不是一张海报。这是一个完全设计，使用基本的CSS和新的CSS3技术的网页。令人印象深刻吧？

CSS3背景剪辑和字体面

话虽这么说，这里是另一个实验：文本与背景剪辑并通过Typekit @ font - face的。当我完成了第2卷浮现在脑海的第一件事情就是引用Lebowski系列。

CSS3的变换实验

变换是一个非常激动人心的功能，在CSS 3实施。那么，为什么我们没有用它在我们的设计？当我切换到网页设计的东西，我错过了大部分的能力的角度文字。

用CSS3创建一个充满活力的数码海报

近年来，CSS已经很长的路要走，和手CSS3属性的新的浏览器支持，我们就可以开始直接事先是最近才在我们的设计应用程序可能在浏览器中复制的设计风格。按照这个Circlicious决策的演练，一个充满活力的和抽象的数字海报设计纯粹的HTML和CSS。

手电筒

手电筒是另一个CSS3的实验。同样的文字颜色设置​​为透明和添加文字阴影。对于一个rotateY过渡悬停效果是使用低角度。