CSS3创建缝合虚线效果的特效代码-百分百源码网

CSS3创建缝合虚线效果的特效代码

发布时间：01/15 来源：浏览：关键词：

曾今几时，设计的视觉效果越来越趋于真实化，让人感觉不到是设计的痕迹，即毫无违和版的说法，今天我们就给大家讲解一下，使用CSS3如何制作一个逼真的针线缝合效果的图标，预览图如下所示

准备工作
制作这样的一个图标，我们需要一个facebook 的图标，还有一张背景图，我们使用这个字体：Modern Pictogram。找到这些资源以后，整个项目的目录看起来像这样的：

构建HTML的代码
创建一个新的HTML文件和CSS文件。然后，链接的CSS文件以及CSS规范的部分，如下。

代码如下
<link rel="stylesheet" href="http://necolas.github.com/normalize.css/2.0.1/normalize.css"> <link rel="stylesheet" href="css/style.css">

创建这个图标，我们只需要一个单一的div。把这个div放置到<body>区域

代码如下
<div class="icon">F</div>

style样式代码
现在，我们的工作风格，像往常一样，我们开始增加自定义字体使用@font-face和添加的网页的背景，像这样。

代码如下

@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 bottombottom, 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 bottombottom,#375a9a 0%,#1b458e 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#375a9a', endColorstr='#1b458e',GradientType=0 );
}

缝合效果特效代码
对于缝合效果，我们要添加 pseudo-elements, :before and :after。我们将首先指定他们的height和width以及圆角，这是小于它们的父元素.icon。

代码如下
.icon:before, .icon:after { content: ""; display: block; width: 63px; height: 63px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; position: absolute; }