ラック
Home > CMS > 記事 > 2014年7月 > RSSマークを描く

RSSマークを描く

カテゴリ: 未分類

以前の記事でRSS自体は実装しましたが、どうせならマークにしたいよなぁ…と思って調べてみたら、css3で実装する方法があるらしい。つまり、画像を使わない。ということでこれでやってみよう、と。

最後のは特にすごいですが、とりあえずThinkITさんの方法で記述してみました。

html

	
<div class="rss">
	<a href="rss_feed.xml">
		<span class="arc01"></span>
		<span class="arc02"></span>
		<span class="circle"></span>
		<span class="txt">RSS</span>
	</a>
</div><span>RSS</span>
	

 

css

	
#sidebar .rss {
	width: 31px;
	height: 31px;
	border: 1px solid #cc6600;
	background: -moz-linear-gradient(left top, #ff9900, #ffcc33 50%, #ff9900);
	background: -webkit-gradient(linear, left top, right bottom, from(#ff9900), color-stop(0.5, #ffcc33),to(#ff9900));
	background: gradient(linear, left top, right bottom, from(#ff9900), color-stop(0.5, #ffcc33),to(#ff9900));
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	-moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}
#sidebar .rss a {
	display: block;
	position: relative;
	width: 29px;
	height: 29px;
}
.arc01 {
	display: block;
	position: absolute;
	bottom: 4px;
	left: 4px;
	width: 17px;
	height: 17px;
	border-width: 4px 4px 0 0;
	border-color: #ffffff;
	border-style: solid;
	-moz-border-radius: 0 21px 0 0;
	-webkit-border-radius: 0 21px 0 0;
	border-radius: 0 21px 0 0;
}
.arc02 {
	content: "";
	display: block;
	position: absolute;
	bottom: 4px;
	left: 4px;
	width: 10px;
	height: 10px;
	border-color: #fff;
	border-width: 4px 4px 0 0;
	border-style: solid;
	-moz-border-radius: 0 14px 0 0;
	-webkit-border-radius: 0 14px 0 0;
	border-radius: 0 14px 0 0;
}
.circle {
	display: block;
	position: absolute;
	bottom: 4px;
	left: 4px;
	width: 6px;
	height: 6px;
	background: #ffffff;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}
#sidebar .rss:hover {
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
}
.txt {
	display: none;
}
	

 

併せてフィードについてメモ。

タグ: フィード

 



関連する記事一覧