css3创建三角形原理_如何使用CSS3创建RSS Feed徽标-CSDN博客

本文是我们的“ HTML5 / CSS3教程系列”的一部分 -致力于帮助您成为更好的设计师和/或开发人员。 单击此处查看同一系列的更多文章。

RSS feed徽标由于其引用的功能而成为网页设计中最常用的徽标之一。您看到了许多使用Photoshop之类的图形软件绘制RSS feed徽标的教程，但是如何仅使用CSS3绘制它呢？是的，你听到了我:-)

借此机会，我想向您展示仅使用CSS3创建标准RSS feed徽标的简单方法，因此请按照教程中的综合步骤和图形操作，以获取第一个CSS3 feed徽标！

这是您将在一分钟内创建的内容的预览。您也可以在本教程结尾处下载源文件。

第1步

创建一个HTML文件，如果文件完全为空，请在文件中插入以下代码。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>My First CSS3 RSS Feed Logo</title>
	<style type='text/css'>
		- Insert Your CSS Here -
	</style>
</head>
<body>
	- Insert Your HTML Here -
</body>
</html>

第2步

将以下代码插入HTML文件中，以创建一个供稿框。

<span class='feed-box'>
</span><!-- .feed-box -->

span.feed-box{
	display:block;
	width:200px;
	height:200px;
	margin:0 auto;
	background:#F9A004;
	box-shadow:
		1px 1px 0 #C27C03,
		2px 2px 0 #C27C03,
		3px 3px 0 #C27C03,
		4px 4px 0 #C27C03,
		5px 5px 0 #C27C03,
		6px 6px 0 #C27C03;
	-moz-box-shadow:
		1px 1px 0 #C27C03,
		2px 2px 0 #C27C03,
		3px 3px 0 #C27C03,
		4px 4px 0 #C27C03,
		5px 5px 0 #C27C03,
		6px 6px 0 #C27C03;
	-webkit-box-shadow:
		1px 1px 0 #C27C03,
		2px 2px 0 #C27C03,
		3px 3px 0 #C27C03,
		4px 4px 0 #C27C03,
		5px 5px 0 #C27C03,
		6px 6px 0 #C27C03;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
}
span.feed-box *{
	float: right;
	display: block;
}

这是您将实现的结果：

第三步

我们将在第一个提要框内绘制另一个框，因此将下面HTML代码放入第一个提要框HTML代码中。我们还将在此处添加边框作为障碍。

<span class='feed-box-in'>
</span><!-- .feed-box-in -->

span.feed-box .feed-box-in{
	border: 4px solid #FFC563;
	width: 184px;
	height: 184px;
	margin: 4px 4px 0 0;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	/* overflow: hidden; */
}

这是您将实现的结果：

第4步

在这一步中，我们将制作1/4大圆。将1/4大圆圈HTML代码放入较小的Feed框HTML代码中，其代码如下：

<span class='feed-quarter-circle-big'>
 </span><!-- .feed-quarter-circle-big -->

span.feed-box .feed-box-in .feed-quarter-circle-big{
	margin: 16px 16px 0 0;
	width: 260px;
	height: 260px;
	border: 30px solid #FFDEA5;
	-moz-border-radius: 260px;
	-webkit-border-radius: 260px;
	border-radius: 260px;
}

这是您将实现的结果：

第5步

我们现在将制作1/4小圆圈，将下面HTML代码放入大圆圈HTML代码中。

<span class='feed-quarter-circle-small'>
</span><!-- .feed-quarter-circle-small -->

span.feed-box .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small{
	margin: 16px 16px 0 0;
	width: 176px;
	height: 176px;
	border: 26px solid #FFDEA5;
	-moz-border-radius: 176px;
	-webkit-border-radius: 176px;
	border-radius: 176px
}

这是您将实现的结果：

第6步

在第6步中，将在小圆圈内创建最小的圆圈，因此将其HTML代码放入小圆圈HTML代码中。

<span class='feed-circle'> </span><!-- .circle -->

span.feed-box .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small .feed-circle{
	margin: 24px 24px 0 0;
	background: #FFDEA5;
	width: 70px;
	height: 70px;
	-moz-border-radius: 70px;
	-webkit-border-radius: 70px;
	border-radius: 70px
}

这是您将实现的结果：

画龙点睛

搜索代码， /* overflow: hidden; */ /* overflow: hidden; */然后替换为以下代码， overflow: hidden; ，好的！您刚刚获得了CSS3 RSS Feed徽标！

奖励：添加悬停效果

您将不希望您的RSS feed徽标没有神奇的悬停效果，对吗？只需添加以下CSS样式即可实现！

span.feed-box:hover{
	background:#07C103;
	box-shadow:
		1px 1px 0 #058E02,
		2px 2px 0 #058E02,
		3px 3px 0 #058E02,
		4px 4px 0 #058E02,
		5px 5px 0 #058E02,
		6px 6px 0 #058E02;
	-moz-box-shadow:
		1px 1px 0 #058E02,
		2px 2px 0 #058E02,
		3px 3px 0 #058E02,
		4px 4px 0 #058E02,
		5px 5px 0 #058E02,
		6px 6px 0 #058E02;
	-webkit-box-shadow:
		1px 1px 0 #058E02,
		2px 2px 0 #058E02,
		3px 3px 0 #058E02,
		4px 4px 0 #058E02,
		5px 5px 0 #058E02,
		6px 6px 0 #058E02;
}
span.feed-box:hover .feed-box-in{
	border-color: #58FC55;
}
span.feed-box:hover .feed-box-in .feed-quarter-circle-big,
span.feed-box:hover .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small{
	border-color: #B9FFB7;
}
span.feed-box:hover .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small .feed-circle{
	background: #B9FFB7;
}