CSS 之 :before 和 :after 实现针织效果

纯 CSS 实现针织效果,如图:stitched_preview

原文:轻戳,其中字母 F 所使用的字体:下载

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Stitched Effect with CSS</title>
  <link rel="stylesheet"     href="http://necolas.github.com/normalize.css/2.0.1/normalize.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="icon">F</div>
</body>
</html>

CSS:

@font-face {
  font-family: 'ModernPictogramsNormal';
  src: url('fonts/modernpics-webfont.eot');
  src: url('fonts/modernpics-webfont.eot?#iefix') format('embedded-opentype'),     url('fonts/modernpics-webfont.woff') format('woff'), url('fonts/modernpics-webfont.ttf')   format('truetype'), url('fonts/modernpics-webfont.svg#ModernPictogramsNormal')   format('svg');
  font-weight: normal;
  font-style: normal;
}
body {
  background: url('../img/ios-linen.jpg');
}
.icon {
  font-family: "ModernPictogramsNormal";
  font-size: 4em;
  color: #fff;
  text-align: center;
  line-height: 0.406em;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, .5);
  width: 65px;
  height: 65px;
  padding: 7px;
  margin: 50px auto;
  position: relative;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, .3), inset 0px 1px 0px 0px rgba(255, 255, 255, .15);
  -moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, .3), inset 0px 1px 0px 0px rgba(255, 255, 255, .15);
  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, .3), inset 0px 1px 0px 0px rgba(255, 255, 255, .15);
  background: #375a9a;
  background: -moz-linear-gradient(top, #375a9a 0%, #1b458e 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #375a9a), color-stop(100%, #1b458e));
  background: -webkit-linear-gradient(top, #375a9a 0%, #1b458e 100%);
  background: -o-linear-gradient(top, #375a9a 0%, #1b458e 100%);
  background: -ms-linear-gradient(top, #375a9a 0%, #1b458e 100%);
  background: linear-gradient(to bottom, #375a9a 0%, #1b458e 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#375a9a', endColorstr='#1b458e', GradientType=0);
}
.icon:before, .icon:after {
  content: "";
  display: block;
  width: 63px;
  height: 63px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  position: absolute;
}
.icon:before {
  border: 1px dashed #0d2b5e;
}
.icon:after {
  border: 1px dashed rgba(255, 255, 255, .1);
  top: 7px;
  left: 7px;
  margin-top: 1px;
  margin-left: 1px;
}

背景图片就不上传了,并不影响效果的展示。

针织效果其实是由 .icon:before 和 .icon:after 两个伪元素实现。事实上,只有 .icon:after 的视觉效果。

:before 是在元素前添加一个伪元素,默认为行内元素。除了在此随意定义其样式外,还可以在content属性中指定展示的文字,甚至图片,音频等多媒体。如:

.icon:after {
  content: "Jungor";
}

.icon:after {
  content: url(song.wav);
}

:after 是在元素后添加一个伪元素,其它同 :before 。

顺便介绍下:@font-face 和 linear-gradient。

@font-face 是用来在网页中嵌入字体,用户不需安装该字体,也能在你的页面看到该字体的效果。只要把字体文件放在服务器可访问的位置,在 CSS 文件中用 @font-face 属性导入即可,不同的浏览器需倒入不同格式的字体文件。

linear-gradient 用来实现颜色的线性渐变效果,该属性可以定义颜色渐变效果的起点、方向、角度、颜色等。渐变效果除了起止颜色外,还可以实现多种颜色渐变。linear-gradient 在各浏览器中使用不太一样,可以看 这里 详细了解。

这里附上简单的示例代码:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8"/>
  <title>Linear Gradient</title>
<style>
div {
  width: 300px;
  height: 200px;
  display: inline-block;
  margin: 10px;
  border: 1px solid #ddd;
}

.color2 {
  background: -moz-linear-gradient(#fff, #000);
  background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#000));
  background: -webkit-linear-gradient(#fff, #000);
  background: -o-linear-gradient(#fff, #000);
  background: -ms-linear-gradient(#fff, #000);
  background: linear-gradient(#fff, #000);
}

.color3 {
  background: -moz-linear-gradient(left center, #000 20%, #00E5EE 50%, #fff 80%);
  background: -webkit-gradient(linear, left center, right center, color-stop(.2, #fff), color-stop(.5, #00E5EE), color-stop(.8, #fff));
  background: -webkit-linear-gradient(0deg, #000 20%, #00E5EE 50%, #fff 80%);
  background: -o-linear-gradient(0deg, #000 20%, #00E5EE 50%, #fff 80%);
  background: -ms-linear-gradient(0deg, #000 20%, #00E5EE 50%, #fff 80%);
  background: linear-gradient(0deg, #000 20%, #00E5EE 50%, #fff 80%);
}

.color4 {
  background: -moz-linear-gradient(45deg, #000, #00E5EE 50%, #000);
  background: -webkit-gradient(linear, left bottom, right top, from(#000), color-stop(.5, #00E5EE), to(#000));
  background: -webkit-linear-gradient(45deg, #000, #00E5EE 50%, #000);
  background: -o-linear-gradient(45deg, #000, #00E5EE 50%, #000);
  background: -ms-linear-gradient(45deg, #000, #00E5EE 50%, #000);
  background: linear-gradient(45deg, #000, #00E5EE 50%, #000);
}
</style>
</head>
<body>
  <div class="color2"></div>
  <div class="color3"></div>
  <div class="color4"></div>
</body>
</html>

效果:321

——

上天会厚待那些勇敢的,坚强的,多情的人。