网页创意排版_创意网页排版样式

最新推荐文章于 2021-08-03 20:41:06 发布

culiao9310

最新推荐文章于 2021-08-03 20:41:06 发布

阅读量414

点赞数

文章标签：定位 css css3 acl webgl

原文链接：https://tympanus.net/codrops/2012/09/12/creative-web-typography-styles/

版权

网页创意排版

View demo 查看演示 Download Source 下载源

With a little bit of CSS magic we can transform text into beautiful typography and omit the use of images in many cases. In this tutorial we will be creating different web typography styles using the lettering.js jQuery plugin and various CSS techniques. For some of the examples we will also add hover transitions to make things a bit more interactive.

有了一点CSS魔术，我们就可以将文本转换成漂亮的字体，并在许多情况下省略图像的使用。在本教程中，我们将使用Lettering.js jQuery插件和各种CSS技术创建不同的Web排版样式。对于某些示例，我们还将添加悬停过渡以使事情更具交互性。

Please note: this only works in browsers that support the respective CSS properties. 请注意：这仅在支持相应CSS属性的浏览器中有效。

We won’t include any vendor specific prefixes in the tutorial below, but you will of course find them in the files

在下面的教程中，我们将不包含任何特定于供应商的前缀，但是您当然会在文件中找到它们

We’ll use lettering.js in most of the cases.

在大多数情况下，我们将使用Lettering.js 。

In the following we will be going through eight examples.

在下面的内容中，我们将介绍八个示例。

例子1 (Example 1)

The idea of the first example is to separate or slice a word when hovering and making another word appear in the gap. For that we will need a special structure.

第一个示例的想法是在悬停时分离或切出一个单词并使另一个单词出现在间隙中。为此，我们将需要一个特殊的结构。


<h2 class="cs-text">
	<span class="cs-text-cut">Smooth</span>
	<span class="cs-text-mid">Operator</span>
	<span class="cs-text-cut">Smooth</span>
</h2>

The word that will be visible initially, will be duplicated. (Note that all these examples are intended for decorative purposes and might not be “SEO friendly”.)

最初将可见的单词将被复制。 (请注意，所有这些示例仅用于装饰目的，可能不适合“ SEO”。)

We will apply the lettering.js plugin for the words meaning that we will have another span around the first and last word (the duplicates):

我们将对这些单词应用Lettering.js插件，这意味着我们将在第一个单词和最后一个单词(重复的单词)之间有另一个跨度：


$(".cs-text-cut").lettering('words');

Now, let’s take a look at the styling. First of all, we will give a fixed width to the whole thing:

现在，让我们看一下样式。首先，我们将为整个对象赋予固定宽度：


.cs-text {
	width: 645px;
	margin: 120px auto 30px;
	cursor: default;
}

The first-layer spans will be displayed as block elements:

第一层跨度将显示为块元素：


.cs-text > span {
	display: block;
}

The two outer spans with the class “cs-text-cut” will have a height of 90px and we’ll set the overflow to hidden. The idea is to make this span half of the height of its inner one, cutting the text into half. We’ll also add a transition to these elements:

类为“ cs-text-cut”的两个外部跨度的高度为90px，我们将溢出设置为隐藏。想法是使该跨度为其内部高度的一半，将文本切成一半。我们还将向这些元素添加过渡：


.cs-text-cut {
	width: 100%;
	height: 90px;
	overflow: hidden;
	transition: all 0.4s ease-in-out;
}

Let’s add a border to the top and to the bottom:

让我们在顶部和底部添加边框：


.cs-text-cut:first-child {
	border-top: 1px solid rgba(255,255,255,0.5);
}

.cs-text-cut:last-child {
	border-bottom: 1px solid rgba(255,255,255,0.5);
}

Let’s set the font size and the line-height of the inner span to 180px which is the double of its parent, and add some text styling:

让我们将字体大小和内部跨度的行高设置为180px，这是其父级的两倍，并添加一些文本样式：


.cs-text-cut span {
	display: block;
	line-height: 180px;
	color: rgba(255,255,255,1);
	font-size: 180px;
	font-weight: 400;
	text-transform: uppercase;
	text-align: center;
	margin-top: 6px;
	font-family: 'Sancreek', cursive;
	text-shadow: 7px 2px 0 rgba(255,255,255,0.3);
}

The second duplicate which is the last child in our structure will have its span “pulled up”. This will show the lower part of the word:

第二个重复项是结构中的最后一个子项，其跨度将“拉大”。这将显示单词的下部：


.cs-text-cut:last-child span {
	margin-top: -84px;
}

The middle text, the one that we’ll want to appear on hover will be positioned absolutely and we’ll set the opacity to 0. It will also be scaled down to 0.5:

中间文本(我们希望在悬停时显示的文本)将被绝对定位，并将不透明度设置为0。它还将缩小为0.5：


.cs-text-mid {
	font-family: 'Raleway', sans-serif;
	font-weight: 100;
	text-transform: uppercase;
	font-size: 50px;
	letter-spacing: 50px;
	line-height: 50px;
	text-indent: 20px;
	position: absolute;
	top: 50%;
	margin-top: -25px;
	color: rgba(255,255,255,0.3);
	text-shadow: 0 0 0 rgba(255,255,255,0.9);
	opacity: 0;
	transform: scale(0.5);
	transition: all 0.4s ease-in-out 0s;
}

When we hover over the words, we want the upper half to move up, so we’ll translate it on the Y-axis and decrease its opacity:

当我们将鼠标悬停在单词上时，我们希望上半部分向上移动，因此我们将其在Y轴上平移并降低其不透明度：


.cs-text:hover .cs-text-cut:first-child {
	transform: translateY(-25px);
	opacity: 0.5;
}

The lower half will be moved down:

下半部分将向下移动：


.cs-text:hover .cs-text-cut:last-child {
	transform: translateY(25px);
	opacity: 0.5;
}

And finally, we will make the middle text appear by animating its opacity and scaling it up. Notice that we’ve added a transition delay of 0.3 seconds. This will give us time to first move the halves of the initial word up and down. The transition delay of the normal state is 0 seconds meaning that when we move the mouse out, it will disappear immediately:

最后，我们将通过设置中间文本的不透明度动画和放大比例来显示中间文本。注意，我们添加了0.3秒的转换延迟。这将使我们有时间先向上和向下移动初始单词的两半。正常状态的转换延迟为0秒，这意味着当我们将鼠标移出时，它将立即消失：


.cs-text:hover .cs-text-mid {
	transition-delay: 0.3s;
	opacity: 1;
	transform: scale(1);
}

And that’s the first example. Let’s check out the second one.

这是第一个例子。让我们看看第二个。

例子2 (Example 2)

In the second example we will play a bit with transforms and create a semi-transparent panel look for the letters.

在第二个示例中，我们将进行一些转换，并为字母创建一个半透明的面板外观。


<h2 class="cs-text" id="cs-text">Glass</h2>

We will apply lettering in order to have every letter wrapped in a span:

我们将应用字母以便将每个字母包裹在一个范围内：


$("#cs-text").lettering();

We’ll give the main wrapper a fixed width and add the clearfix hack by Nicolas Gallagher because our spans will be floating:

我们将给主包装一个固定的宽度，并添加Nicolas Gallagher的clearfix hack，因为我们的跨度将浮动：


.cs-text {
	width: 600px;
	margin: 70px auto 30px;
}

/* Micro clearfix hack by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/ */
.cs-text:before,
.cs-text:after {
	content: " ";
    display: table;
}

.cs-text:after {
	clear: both;
}
/* end clearfix hack */

Each span will be floating and we’ll add a semi-transparent background. We’ll also apply a box shadow that will make a nice thick border. Then we’ll skew the element and add a transition:

每个跨度都是浮动的，我们将添加一个半透明的背景。我们还将应用一个框阴影，该阴影将形成漂亮的粗边框。然后，我们将倾斜元素并添加一个过渡：


.cs-text span {
	float: left;
	width: 120px;
	font-size: 120px;
	line-height: 230px;
	font-weight: 400;
	text-transform: uppercase;
	text-align: center;
	cursor: default;
	font-family: 'Medula One', cursive;
	display: block;
	z-index: 1;
	position: relative;
	color: rgba(255,255,255,0.7);
	text-shadow: 5px 5px 2px rgba(0,0,0,0.5);
	background: rgba(0,0,0,0.05) url(../images/scratch-texture.png);
	box-shadow: 
		-6px 2px 10px rgba(0,0,0,0.5), 
		inset 0 0 0 20px rgba(255, 255, 255, 0.4);
	border-radius: 5px;
	transform: skewY(8deg);
	transition: all 0.5s ease-in-out;
}

We’ll use the pseudo class :before in order to create another inset shadow effect. There are other ways of doing that but let’s be fancy 🙂 So, what we do is to stretch it until the shadow which is 20px and give it a white box shadow and a black inset box shadow (semi-transparent RGBA):

我们将使用伪类：before来创建另一个嵌入阴影效果。还有其他方法可以做，但请看上一下🙂因此，我们要做的就是将其拉伸直到阴影达到20px，并为其赋予白色框阴影和黑色插入框阴影(半透明RGBA)：


.cs-text span:before {
	content: '';
	position: absolute;
	left: 20px;
	right: 20px;
	top: 20px;
	bottom: 20px;
	box-shadow: 
		1px 1px 1px rgba(255,255,255,0.4), 
		inset 1px 1px 1px rgba(0,0,0,0.1);
}

The :after pseudo class will be the little dot on top of the element:

：after伪类将是元素顶部的小点：


.cs-text span:after {
	content: '';
	position: absolute;
	left: 50%;
	top: 5px;
	margin-left: -5px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	box-shadow: inset 1px 1px rgba(0, 0, 0, 0.4);
	background: rgba(255, 255, 255, 0.2);
}

And finally, on hover, we’ll translate the element and scale it up a bit while changing its text-shadow and increasing the opacity value:

最后，在悬停时，我们将转换元素并将其放大一点，同时更改其文本阴影并增加不透明度值：


.cs-text span:hover {
	transform: translateY(-10px) scale(1.1);
	color: rgba(255,255,255,1);
	text-shadow: 2px 2px 2px rgba(0,0,0,0.2);
}

例子3(Example 3)

The style of th third example is completely based on a Photoshop tutorial about creating scrabble tiles for a neat text effect by textuts.com. It’s a great tutorial, so check it out, especially to understand the shadow effects for the scrabble tiles.

第三个示例的样式完全基于Photoshop教程，该教程介绍了如何通过textuts.com为纯文本效果创建拼字砖。这是一个很棒的教程，所以请检查一下，特别是要了解拼字游戏砖的阴影效果。

We’ll try to create the same effect with pure CSS.

我们将尝试使用纯CSS创建相同的效果。


<h2 class="cs-text">
	To sing is to ♥love and affirm, to fly and soar, to coast into the hearts of the people who listen, to tell them that life is to live, that love is there, that nothing is a promise, but that beauty exists, and must be hunted for and found.
</h2>
<h3 class="cs-text">Joan Baez</h3>

We will apply lettering.js to the words and the letters:

我们将对文字和字母应用Lettering.js：


$(".cs-text").lettering('words').children('span').lettering()

This will wrap every word into a span with a class starting with “word” and every letter of the word into a wrapper with a class starting with “char”.

这会将每个单词包装成一个以“ word”开头的类的跨度，并将单词的每个字母包装成一个以“ char”开头的类的包装。

Let’s center the text:

让我们将文本居中：


.cs-text {
	text-align: center;
	margin-top: 70px;
}

The words will be displayed as inline-blocks and we’ll give them a lateral margin:

单词将显示为行内块，我们将给它们一个横向边距：


.cs-text span[class^="word"] {
	display: inline-block;
	margin: 0 15px;
}

The characters will have a scrabble-style background color and we’ll set a width and height for them. The text shadow will create a carved effect for the letters and the multiple box shadows will add some depth to the tile:

字符将具有拼字样式的背景色，我们将为其设置宽度和高度。文本阴影将为字母创建雕刻效果，多个框阴影将为图块增加一些深度：


.cs-text span[class^="char"] {
	width: 90px;
	height: 100px;
	display: inline-block;
	background: #e4d095;
	color: #2a1f1b;
	border-radius: 4px;
	font-size: 60px;
	font-weight: 400;
	line-height: 100px;
	margin: 10px 3px;
	text-align: center;
	cursor: default;
	font-family: "Spinnaker", Arial, sans-serif;
	text-shadow: 
		1px 1px 1px rgba(255, 255, 255, 0.9), 
		0 -1px 1px rgba(255,255,255,0.2);
	text-transform: uppercase;
	box-shadow: 
		1px 7px 15px rgba(0,0,0,0.8),
		inset 3px 0 2px rgba(255,255,255,0.4),
		inset 0 3px 0px rgba(255,255,255,0.5),
		inset -2px -3px 0px rgba(143,128,82,0.6);
}

Now, let’s add some “randomness” to the the tiles by rotating every odd one and every third one slightly:

现在，让我们通过稍微旋转每个奇数个和第三个三分之一数来为图块添加一些“随机性”：


.cs-text span[class^="char"]:nth-child(odd) {
	transform: rotate(2deg);
}

.cs-text span[class^="char"]:nth-child(3n) {
	transform: rotate(-3deg);
}

The fifth word and the last heading will have red letters and the last heading will be a bit smaller than the rest of the text:

第五个单词和最后一个标题将带有红色字母，并且最后一个标题将比文本的其余部分小：


.cs-text > span:nth-child(5) span,
h3.cs-text span[class^="char"] {
	color: #a62a19;
}

h3.cs-text span[class^="char"] {
	font-size: 40px;
	width: 50px;
	height: 60px;
	line-height: 60px;
}

And that’s it! Scrabble tile text!

就是这样！拼字图块文字！

例子4 (Example 4)

The forth example is a style for a typographic background. We’ll make the letters big and semi-transparent, add some text shadow and rotate/translate some letters “randomly”.

第四示例是印刷背景的样式。我们将使字母大而半透明，添加一些文字阴影并“随机”旋转/翻译某些字母。


<h2 class="cs-text" id="cs-text">Nothing can be more hopeless than to attempt to explain this similarity
of pattern in members of the same class, by utility or by the doctrine
of final causes. The hopelessness of the attempt has been expressly
admitted by Owen in his most interesting work on the "Nature of Limbs."
On the ordinary view of the independent creation of each being, we can
only say that so it is; that it has pleased the Creator to construct all
the animals and plants in each great class on a uniform plan; but this
is not a scientific explanation.</h2>

Since we don’t really care about the text itself, we’ll simply wrap every letter into a span with lettering.js:

由于我们并不真正在乎文本本身，因此我们将每个字母简单地用lettering.js包装成一个范围：


$("#cs-text").lettering();

The whole text will be fluid: we’ll give it a width of 100%:

整个文本将是流畅的：我们将其宽度设置为100％：


.cs-text {
	width: 100%;
	text-align: center;
	margin-top: 80px;
}

The letters will be semi-transparent by giving a RGBA color with a low opacity value. We’ll also add a text shadow with a big offset:

通过提供具有低不透明度值的RGBA颜色，字母将是半透明的。我们还将添加一个具有较大偏移量的文本阴影：


.cs-text span { 
	font-family: 'Cantata One', 'Trebuchet MS', sans-serif;
	font-size: 180px;
	line-height: 150px;
	font-weight: 400;
	color: rgba(255,255,255,0.3);
	display: inline-block;
	text-transform: uppercase;
	text-shadow: 15px 15px 0 rgba(0,0,0,0.2);
	cursor: default;
	pointer-events: none;
}

Since we want to use this a a background, we’ll use pointer-events: none. This will avoid making the text clickable/selectable.

由于我们要使用该背景，因此将使用指针事件：无。这将避免使文本可单击/可选。

Now, let’s go nuts and randomly rotate, translate, enhance or enlarge some of the letters. We will use the :nth-child selector to target specific spans:

现在，让我们发疯，随机旋转，翻译，增强或放大一些字母。我们将使用：nth-child选择器来定位特定范围：


.cs-text span:nth-child(2n) {
	transform: rotate(-6deg);
	color: rgba(255,255,255,0.4); ;
}

.cs-text span:nth-child(3n) {
	transform: translateY(20px);
}

.cs-text span:nth-child(4n) {
	color: rgba(255,255,255,0.2);
}

.cs-text span:nth-child(3n+3) {
	transform: scale(1.4) rotate(5deg);
}

.cs-text span:nth-child(7n) {
	font-size: 110px;
}

.cs-text span:nth-child(12n) {
	font-size: 200px;
}

And that’s it, a very simple, yet exciting text effect.

就是这样，这是一个非常简单但令人兴奋的文本效果。

例子5 (Example 5)

Example 5 will have a nice 3D effect which will create some nice depth.

示例5将具有不错的3D效果，它将产生一些不错的深度。


<h2 class="cs-text" id="cs-text">Disarmer</h2>

Since we want every letter to be wrapped in two spans, we’ll first apply lettering.js and then wrap the created span into another one:

由于我们希望每个字母都包裹在两个范围内，因此我们将首先应用Lettering.js，然后将创建的范围包裹到另一个范围内：


$("#cs-text").lettering().children('span').wrap('');

Let’s give a with/height and a margin to the main wrapper:

让我们给主包装一个with / height和margin：


.cs-text {
	position: relative;
	width: 960px;
	height: 100px;
	margin: 100px auto;
	cursor: default;
}

The first-layer spans will have perspective and float:

第一层跨度将具有透视图和浮点图：


.cs-text > span {
	perspective: 200px;
	float: left;
	position: relative;
}

Since we will be rotating and translating the inner spans, we’ll need a specific stacking order for the perspective containers (from the center outwards):

由于我们将旋转并平移内部跨度，因此需要为透视图容器指定特定的堆叠顺序(从中心向外)：


.cs-text > span:first-child,
.cs-text > span:last-child {
	z-index: 1;
}

.cs-text > span:nth-child(2),
.cs-text > span:nth-child(7){
	z-index: 2;
}

.cs-text > span:nth-child(3),
.cs-text > span:nth-child(6){
	z-index: 3;
}

.cs-text > span:nth-child(4) {
	z-index: 5;
}

.cs-text > span:nth-child(5){
	z-index: 4;
}

The inner spans will have multiple backgrounds: the gradient and a semi-transparent texture. We’ll also apply a box shadow that will give some depth to the elements:

内部跨度将具有多个背景：渐变和半透明纹理。我们还将应用一个框阴影，该阴影将为元素提供一些深度：


.cs-text span span {
	display: block;
	background: url(../images/scratch-texture.png), linear-gradient(to right, #00b7ea 0%,#009ec3 100%);
	box-shadow: 
		-1px 0 2px rgba(255,255,255,0.4),
		-2px 0 0 #00adda, 
		-2px 7px 9px rgba(0, 0, 0, 0.5);
	color: #fff;
	text-shadow: -1px -1px 2px rgba(0,0,0,0.6);
	width: 120px;
	height: 150px;
	font-weight: 700;
	line-height: 150px;
	font-size: 140px;
	text-align: center;
	text-transform: uppercase;
}

The last four letters will have the reverse gradient, box shadow and text shadow:

最后四个字母将具有反向渐变，框阴影和文本阴影：


.cs-text > span:nth-child(n+5) span {
	background: url(../images/scratch-texture.png), linear-gradient(to right, #009ec3 0%,#00b7ea 100%);
	box-shadow: 
		1px 0 2px rgba(255,255,255,0.4),
		2px 0 0 #00adda, 
		-2px 7px 9px rgba(0, 0, 0, 0.5);
	text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}

Now we’ll translate the inner spans on the z-index and rotate them in order to create the effect. Each one will have different values, so we will target them with the respective :nth-child selector:

现在，我们将平移z-index上的内部跨度并旋转它们以创建效果。每个值都有不同的值，因此我们将使用各自的：nth-child选择器定位它们：


.cs-text > span:nth-child(4) span{
	transform: translateZ(40px) rotateY(40deg);
}

.cs-text > span:nth-child(5) span{
	transform: translateZ(40px) rotateY(-40deg);
}

.cs-text > span:nth-child(3) span{
	transform: translateZ(30px) rotateY(30deg);
}

.cs-text > span:nth-child(6) span{
	transform: translateZ(30px) rotateY(-30deg);
}

.cs-text > span:nth-child(2) span{
	transform: translateZ(20px) rotateY(20deg);
}

.cs-text > span:nth-child(7) span{
	transform: translateZ(20px) rotateY(-20deg);
}

.cs-text > span:first-child span{
	transform: translateZ(10px) rotateY(10deg);
}

.cs-text > span:last-child span{
	transform: translateZ(10px) rotateY(-10deg);
}

Let’s move the spans a bit by translating them on the x-axis:

让我们通过在x轴上平移一些跨度：


.cs-text > span:nth-child(-n+4) {
	transform: translateX(14px);
}

.cs-text > span:nth-child(n+5) {
	transform: translateX(-14px);
}

And that’s it, we have a neat 3D text effect!

就是这样，我们有一个整齐的3D文字效果！

例子6 (Example 6)

This example is inspired a bit by Origami. It’s going to have several semi-transparent spans that we will rotate and skew. On hover, they will remove all the transforms so that they all appear as boxes.

这个例子受到折纸的启发。我们将要旋转和倾斜几个半透明的跨度。悬停时，它们将删除所有变换，以使它们全部显示为框。


<h2 class="cs-text" id="cs-text">Bird</h2>

We need each letter to be wrapped in a span, preceded by three other spans and all that wrapped into a span (yes, insane!):

我们需要将每个字母包裹在一个跨度中，然后再加上其他三个跨度，然后将所有包裹在一个跨度中的包裹(是的，疯狂！)：


$("#cs-text").lettering().children('span').wrap('').parent().prepend('');

Let’s add a width and some margins to the main wrapper and clear the floats:

让我们在主包装上添加宽度和一些边距，并清除浮点数：


.cs-text {
	width: 600px;
	margin: 70px auto 30px;
}

/* Micro clearfix hack by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/ */
.cs-text:before,
.cs-text:after {
	content: " ";
    display: table;
}

.cs-text:after {
	clear: both;
}
/* end clearfix hack */

All the spans will be displayed as block elements:

所有范围将显示为块元素：


.cs-text span{
	cursor: default;
	display: block;
	position: relative;
}

The first-layer spans will all have a height and width of 130 pixels and some margin:

第一层跨度的高度和宽度均为130像素，并具有一些边距：


.cs-text > span {
	float: left;
	width: 130px;
	height: 130px;
	margin: 10px;
}

All inner spans will have a RGBA background which will make them semi-transparent white. We will also add a transition to them:

所有内部跨度将具有RGBA背景，这将使它们成为半透明的白色。我们还将为它们添加一个过渡：


.cs-text span span {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(255,255,255,0.3);
	box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	transition: all 0.3s ease-in-out;
}

The last child of the inner spans is the letter and we will size it to fit and add some colored text shadows. It will also have a gradient as background that will simulate a subtle fold:

内部跨度的最后一个子字母是字母，我们将调整其大小以适合并添加一些彩色的文本阴影。它还将具有渐变作为背景，以模拟细微的褶皱：


.cs-text span span:last-child{
	font-size: 70px;
	line-height: 130px;
	font-weight: 400;
	text-transform: uppercase;
	text-align: center;
	color: rgba(255,255,255,0.8);
	font-family: 'Michroma', sans-serif;
	text-shadow: 
		1px 1px 1px rgba(0,0,0,0.1),
		-1px -1px 1px rgba(0,0,0,0.1),
		5px 5px 0 rgba(216,65,40,0.6),
		-5px -5px 0 rgba(37,166,164,0.6);
	background: 
		linear-gradient(
			45deg, 
			rgba(249,249,249,0.08) 0%,
			rgba(234,234,234,0.5) 49%,
			rgba(255,255,255,0.51) 50%,
			rgba(244,244,244,0.94) 100%
			);
}

Let’s add some arbitrary rotation and skew transforms to the resting spans:

让我们向静止范围添加一些任意旋转和偏斜变换：


.cs-text > span:nth-child(odd) span:first-child {
	transform: rotate(5deg) skewY(-14deg);
}

.cs-text > span:nth-child(even) span:first-child {
	transform: rotate(-35deg) skewY(-5deg);
}

.cs-text > span:nth-child(odd) span:nth-child(2) {
	transform: rotate(45deg) skewY(-10deg);
}

.cs-text > span:nth-child(even) span:nth-child(2) {
	transform: rotate(27deg) skewY(-12deg);
}

.cs-text > span:nth-child(odd) span:nth-child(3) {
	transform: rotate(45deg);
}

.cs-text > span:nth-child(even) span:nth-child(3) {
	transform: rotate(30deg);
}

On hover, we will set all the spans transforms to 0 and apply a different text shadow to the text in order to create a nice effect:

悬停时，我们将所有span转换设置为0，并对文本应用不同的文本阴影，以创建漂亮的效果：


#cs-text > span:hover span {
	transform: rotate(0deg) skewY(0deg);
	text-shadow:
		1px 1px 0 rgba(216,65,40,0.1),
		-1px -1px 0 rgba(37,166,164,0.1);
}

And that was example 6! There are many possibilities, just try to change the transform values or nest the spans for some interesting effects.

那就是例子6！有很多可能性，只需尝试更改变换值或将跨度嵌套以获得一些有趣的效果。

例子7 (Example 7)

In this example we want to show a logo initially and make some letters appear when we hover. We’ll not use lettering here, we’ll simply create the following structure:

在此示例中，我们希望最初显示徽标，并在悬停时显示一些字母。我们在这里不使用字母，我们将简单地创建以下结构：


<h2 class="cs-text">
	<span>C</span>
	<span>o</span>
	<span>d</span>
	<span>r</span>
	<span>o</span>
	<span>p</span>
	<span>s</span>
	<span></span>
</h2>

Let’s define some text properties and the width of the whole thing:

让我们定义一些文本属性和整个对象的宽度：


.cs-text {
	font-size: 50px;
	text-transform: uppercase;
	margin: 80px auto 0 auto;
	width: 580px;
	height: 100px;
	padding-left: 20px;
	font-family: 'McLaren', Arial;
	font-weight: 400;
	position: relative;
}

/* Micro clearfix hack by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/ */
.cs-text:before,
.cs-text:after {
	content: " ";
    display: table;
}

.cs-text:after {
	clear: both;
}
/* end clearfix hack */

The spans will be floating and we’ll make them round. We’ll also add a transition.

跨度将浮动，我们将其调整为圆形。我们还将添加一个过渡。


.cs-text span {
	cursor: default;
	display: block;
	float: left;
	border-radius: 50%;
	width: 100px;
	height: 100px;
	line-height: 100px;
	text-align: center;
	margin: 0 0 0 -20px;
	color: rgba(255,255,255,0.95);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.1);
	transition: all 0.4s ease-in-out;
}

The spans will alternate in background color and we’ll add a subtle texture to them:

跨度将以背景色交替显示，我们将为其添加微妙的纹理：


.cs-text span:nth-child(odd) {
	background: rgba(118,176,204, 0.8) url(../images/noise.png); 
}

.cs-text span:nth-child(even) {
	background: rgba(58,126,162, 0.8) url(../images/noise.png); 
}

All the spans will be moved to the center. We’ll apply the transform twice: the first one is the percentage that we know, i.e. the first span needs to be 3 positions so it’s 300%, and the second transform is for the compensation of the margin:

所有跨度将移到中心。我们将两次应用变换：第一个是我们知道的百分比，即第一个跨度需要在3个位置上，所以它是300％，第二个变换是用于保证金的补偿：


.cs-text span:nth-child(1) {
	transform: translate(300%) translate(-60px);
}

.cs-text span:nth-child(2) {
	transform: translate(200%) translate(-40px);
}

.cs-text span:nth-child(3) {
	transform: translate(100%) translate(-20px);
}

.cs-text span:nth-child(5) {
	transform: translate(-100%) translate(20px);
}

.cs-text span:nth-child(6) {
	transform: translate(-200%) translate(40px);
}

.cs-text span:nth-child(7) {
	transform: translate(-300%) translate(60px);
}

All of the spans except the last one will have opacity 0:

除最后一个跨度外，所有跨度的不透明度为0：


.cs-text span:not(:last-child) {
	opacity: 0;
	pointer-events: none;
}

The last span is the special logo span. We’ll give it a different background and position it absolutely in the center of the main wrapper:

最后一个跨度是特殊徽标跨度。我们将为其提供不同的背景，并将其绝对定位在主包装的中心：


.cs-text span:last-child{
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -50px;
	z-index: 100;
	background: url(../images/codrops_logo.jpg) no-repeat center center;
}

On hover, all the translated spans will be set back to their natural position and we’ll increase the opacity value to 1:

悬停时，所有平移的跨度将恢复为自然位置，我们将不透明度值增加为1：


.cs-text:hover span:not(:last-child){
	transform: translate(0%);
	opacity: 1;
}

The logo span will scale up a bit and fade out:

徽标范围将扩大一点并逐渐消失：


.cs-text:hover span:last-child {
	opacity: 0;
	transform: scale(1.4);
}

例子8(Example 8)


<h2 class="cs-text">Time for Thyme</h2>

We’ll use lettering.js to wrap all the words in spans:

我们将使用Lettering.js将所有单词包装成跨度：


$(".cs-text").lettering('words');

Let’s add a width to the main heading and center it. We’ll also skew it a bit:

让我们在主标题上添加一个宽度并将其居中。我们也将其倾斜一下：


.cs-text {
	width: 660px;
	margin: 120px auto 30px;
	cursor: default;
	transform: skewY(-12deg); 
	text-align: center;
}

The spans are going to be display block and we’ll add a top margin to position them:

跨度将成为显示块，我们将添加一个上边距来定位它们：


.cs-text span {
	display: block;
	color: #fff;
	font-weight: 400;
	text-transform: uppercase;
	margin-top: 6px;
	font-family: 'Stint Ultra Expanded', cursive;
}

The first word will have a font size of 100 pixels and a large letter spacing:

第一个单词的字体大小为100像素，字母间距较大：


.cs-text span:first-child {
	font-size: 100px;
	letter-spacing: 96px;
	text-shadow: 6px 6px 0px rgba(255,255,255,0.3);
}

The second word will be in an italic serif font and we’ll give it a dark color:

第二个单词将采用斜体衬线字体，我们将其设置为深色：


.cs-text span:nth-child(2) {
	font-family: Georgia, serif;
	font-weight: 400;
	text-transform: none;
	font-style: italic;
	line-height: 60px;
	font-size: 67px;
	color: #392f2c;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
	position: relative;
}

We’ll style the pseudo-classes :before and :after to create two lines to the left and right:

我们将对伪类：before和：after设置样式，以在左侧和右侧创建两行：


.cs-text span:nth-child(2):before,
.cs-text span:nth-child(2):after {
	content: '';
	width: 240px;
	height: 2px;
	background: #392f2c;
	position: absolute;
	top: 50%;
	margin-top: -1px;
	box-shadow: 0 1px 0 rgba(255,255,255,0.2);
}

.cs-text span:nth-child(2):before {
	left: 0px;
}

.cs-text span:nth-child(2):after {
	right: 0px;
}

The last word will have multiple text shadows to create a pile effect. The trick is to alternate between the text color and the body background which is a dark brown in our case:

最后一个单词将具有多个文本阴影以创建堆积效果。技巧是在文本颜色和正文背景(在本例中为深棕色)之间切换：


.cs-text span:nth-child(3) {
	font-size: 130px;
	text-shadow: 
		2px 2px 0 #645f59,
		4px 4px 0 #fff,
		6px 6px 0 #645f59,
		8px 8px 0 #fff,
		10px 10px 0 #645f59,
		12px 12px 0 #fff,
		14px 14px 0 #645f59,
		16px 16px 0 #fff,
		18px 18px 0 #645f59,
		20px 20px 0 #fff,
		22px 22px 0 #645f59,
		24px 24px 0 #fff;	
}

And that’s it! I hope you enjoyed the typography examples and find them inspiring! There’s a lot to experiment, so just try it out!

就是这样！希望您喜欢排版示例，并从中找到启发！有很多要尝试的东西，所以只需尝试一下！

翻译自: https://tympanus.net/codrops/2012/09/12/creative-web-typography-styles/

网页创意排版

culiao9310

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页创意排版_创意网页排版样式

网页创意排版View demo 查看演示Download Source 下载源With a little bit of CSS magic we can transform text into beautiful typography and omit the use of images in many cases. In this tutorial we ...
复制链接

扫一扫