【www.bbyears.com--css3教程】
准备工作
制作这样的一个图标,我们需要一个facebook 的图标,还有一张背景图,我们使用这个字体:Modern Pictogram。找到这些资源以后,整个项目的目录看起来像这样的:
构建HTML的代码
创建一个新的HTML文件和CSS文件。然后,链接的CSS文件以及CSS规范的部分,如下。
创建这个图标,我们只需要一个单一的div。把这个div放置到
区域 代码如下 Fstyle样式代码
现在,我们的工作风格,像往常一样,我们开始增加自定义字体使用@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。
content: "";
display: block;
width: 63px;
height: 63px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
position: absolute;
}
然后,我们将这些伪元素用虚线边框,但每个人都会有不同的颜色。:before将在深蓝色的,像这样。
代码如下 .icon:before {border: 1px dashed #0d2b5e;
}
虽然 :after 伪元素边界将低强度有白颜色的,我们定义它的RGBA颜色模式。此外,我们还需要位置:after元素1px从顶部和1px从左到右,所以它的边界线是明显。
代码如下 .icon:after {border: 1px dashed rgba(255,255,255, .1);
top: 7px;
left: 7px;
margin-top: 1px;
margin-left: 1px;
}
这就是我们需要的所有代码。