如何使用CSS3创建RSS Feed徽标
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文件中，以创建一个供稿框。
Feed框HTML
<span class='feed-box'> </span><!-- .feed-box -->
供稿箱CSS
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代码中。 我们还将在此处添加边框作为障碍。
小型Feed BoxHTML
<span class='feed-box-in'> </span><!-- .feed-box-in -->
小型饲料箱CSS
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; */
}
这是您将实现的结果：
第四步
在这一步中，我们将制作1/4大圆。 将1/4大圆圈HTML代码放入较小的Feed框HTML代码中，其代码如下：
1/4大圆圈HTML
<span class='feed-quarter-circle-big'> </span><!-- .feed-quarter-circle-big -->
1/4大圆圈CSS
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代码中。
1/4小圆圈HTML
<span class='feed-quarter-circle-small'> </span><!-- .feed-quarter-circle-small -->
1/4小圆圈CSS
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代码中。
最小圆圈HTML
<span class='feed-circle'> </span><!-- .circle -->
最小圆圈CSS
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样式即可实现！
悬停效果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;
}
预览和下载
这是CSS3 feed徽标的预览，它们的尺寸和样式不同。 如果您无法完成某些步骤，则也可以下载源文件。
- 预览CSS3 RSS徽标 （大）
- 预览CSS3 RSS徽标 （中）
- 预览CSS3 RSS徽标 （小）
- 预览CSS3 RSS徽标 （中号，倒排）
- 下载CSS3 RSS徽标源文件 （.zip）
编者注：本帖由Irham Kendeni为Hongkiat.com撰写。 Irham，也称为Indaam，是印度尼西亚的网页设计师和开发人员。 他还喜欢CSS和WordPress主题开发。