scratch摇滚乐队_摇滚乐队网站导航：CSS转换带来的跳脱效果

scratch摇滚乐队

Most websites have strong rectangular orientation. Those that don’t tend to be extremely image-heavy, requiring a lot of work in PhotoShop. But with CSS, it’s possible to create a website design that is non-rectangular without using any images at all.

大多数网站都具有很强的矩形方向。 那些不太容易占用大量图像的文件，需要在PhotoShop中进行大量工作。 但是，使用CSS可以创建一个非矩形的网站设计，而无需使用任何图像。

这个概念 (The Concept)

I wanted a fictional rock band website to have the appearance of a group on tour: features on the page would be scuffed, scratched, improvised and off-kilter. To this end, I wanted to use an old letter-stamp style font for navigation and heading elements, evocative of the labels one might slap on an effects or sound board.

我希望一个虚构的摇滚乐队网站能有一个小组出现在巡回演出中：页面上的功能会被磨损，刮擦，即兴和离谱。 为此，我想使用一种旧的字母-邮票样式的字体作为导航和标题元素，回想起人们可能会在效果器或音板上贴上的标签。

I found a free impact label font by Tension Type at dafont, then went to work on the HTML. The structure of the navigation list for the site is something that you have probably seen plenty of times before:

我在dafont找到了Tension Type的免费冲击标签字体 ，然后开始在HTML上工作。 该站点的导航列表的结构是您之前可能已经看过很多次的内容了：

<nav>
	<a href="#">Home</a>
	<a href="#">About</a>
	<a href="#">Tours</a>
	<a href="#">Contact</a>
</nav>

The magic all lies in the CSS. We do two things to start:

魔术全在于CSS。 我们要做两件事：

• Embed a custom font into the web page

  将自定义字体嵌入网页

• Use rotate and offset the list items to give a pseudo-random appearance.

  使用旋转和偏移列表项可产生伪随机外观。

@font-face {
	font-family: Impact Label;
	src: url('Impact_Label.woff');
	font-weight: normal;
	font-style: normal;
}
body { background: #777; }
nav a {
	font-family: Impact Label, sans-serif;
	font-size: 200%;
	color: #323;
	background: white;
	display: inline-block;
	margin: 1.1em;
	border: .5em solid #323;
	position: relative;
	border-radius: 3px;
	box-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
nav a:nth-child(odd) {
	margin-top: 1em;
	transform: rotate(-4deg);
}
nav a:nth-child(even) { 
	margin-top: .8em;
	transform: rotate(4deg);
}
nav a:nth-child(4n) { 
	margin-top: -.8em;
	transform: rotate(2deg);
}

A brief explanation: the code uses odd and even pseudo-class selectors to transform of alternate list items and transform them. Combined together, these produce the appearance of random orientation in the navigation.

简要说明：该代码使用odd和even 伪类选择器来转换备用列表项并对其进行转换。 结合在一起，它们会在导航中产生随机方向的外观。

Why take this approach to implementing the design? The primary advantage that it eliminates any requirement for PhotoShop editing: any changes to the design of the navigation – fonts, kerning, placement or orientation – can be made quickly, directly in the CSS.

为什么要采用这种方法来实施设计？ 它的主要优点是消除了PhotoShop编辑的任何要求：可以直接在CSS中快速进行导航设计的任何更改(字体，字距，位置或方向)。

In this case, the border is necessary to expand the size of the link, as the background controls the color immediately behind the text

在这种情况下， border是扩大链接大小的必要条件，因为background控制着紧随文本后面的颜色

Finally, I also add a small “corner peel” effect to half of the links:

最后，我还将一半链接添加了一个小的“角皮”效果：

nav a:nth-child(even):before {
	content: ""; 
	position: absolute;
	top: -.5em; 
	right: -.5em;
	border-width: 0 16px 16px 0;
	border-style: solid;
	border-color: #bbb #222;
}

Note that the second color for the border is for the upper right, “outside” corner of the peeled square, and covers the color of the border.

请注意， border的第二种颜色是被剥皮的正方形的右上角，即“外”角，并覆盖了边框的颜色。

翻译自: https://thenewcode.com/275/Rock-Band-Website-Navigation-Off-Kilter-Effects-With-CSS-Transforms

scratch摇滚乐队