创建css_使用CSS创建缝合效果

最新推荐文章于 2024-08-10 09:49:48 发布

cune1359

最新推荐文章于 2024-08-10 09:49:48 发布

阅读量153

点赞数

文章标签： css html js css3 javascript ViewUI

CSS可以实现许多视觉效果。极限仅仅是我们的创造力和想象力。这次，正如标题所示，我们将尝试仅使用CSS来创建缝合效果，下面的屏幕截图显示了最终输出的外观。

让我们开始吧。

准备资产

首先，我们需要资源来交付Facebook的F图标。在本教程中，我们将使用以下字体：John Caserta 撰写的Modern Pictogram 。我们还将需要一个背景图像，这一次，我们将使用Premium Pixels的亚麻纹理。

然后，将所有这些内容放入适当的文件夹中，如下所示：

构建HTML标记

创建一个新HTML文档和CSS文件。然后，链接CSS文件以及<head>部分中CSS Normalize，如下所示。

<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>

款式

现在，我们开始处理样式，并且像往常一样，首先添加@font-face规则，然后在body文档中添加亚麻背景。

@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添加装饰样式，包括指定height和width ，为背景添加圆角，框阴影和颜色渐变。

.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 );
}

缝线

关于缝合效果，我们将在其上添加pseudo-elements :before和:after 。我们将首先指定其高度和宽度以及圆角，这些圆角小于其父元素.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;
}

然后，我们添加带有虚线边框的这些伪元素 ，但是每个伪元素将具有不同的颜色。 :before会变成深蓝色，就像这样。

.icon:before {
	border: 1px dashed #0d2b5e;
}

虽然:after 伪元素边框将具有低强度的白色，但我们将其定义为RGBA颜色模式。此外，我们还需要定位:after元素1px从顶部和1px从左边，所以它的边界线是noticable。

.icon:after {
	border: 1px dashed rgba(255,255,255, .1);
	top: 7px;
	left: 7px;
	margin-top: 1px;
	margin-left: 1px;
}

这就是我们需要的所有代码。这是结果，您可以从下面的这些链接下载源。

翻译自: https://www.hongkiat.com/blog/css-stitched-effect/

cune1359

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
创建css_使用CSS创建缝合效果

使用CSS可以实现很多视觉效果。极限仅仅是我们的创造力和想象力。这次，正如标题所示，我们将尝试仅使用CSS来创建缝合效果，下面的屏幕截图显示了最终输出的外观。让我们开始吧。推荐阅读：理解伪元素：before和：after 。准备资产首先，我们需要资源来交付Facebook的F图标。在本教程中，我们将使用以下字体：John Caserta 撰写的Modern P...
复制链接

扫一扫