Végre elkészült a saját CSS-es RSS ikonom

Nem olyan régen a “Hétvégi CSS barkácsolás.” című bejegyzésemben próbáltam CSS segítségével kirajzolni egy RSS ikont, de első nekifutásra nem sikerült. 😮 Az elmúlt hetekben teljesen véletlenül találtam rá Zander Martineau blogjára (Rather Splendid: Pure CSS Icons), aki szintén egy RSS ikont szeretett volna léterhozni pusztán CSS és HTML kódokból építkezve. Az ő kódjainak segítségével alakítottam ki a saját gombomat, melynek eredményét lentebb már ti is áttanulmányozhatjátok. Fontos különbség a kódjaink között, hogy amíg Zander Martineau a “könnyebben” skálázható em mértékegységgel dolgozott, addig én px-t használtam.

HTML Kód:

<div id="RSS">
<a href="http://feeds.feedburner.com/susnya-blog/" target="_blank" title="FeedBurner Feed | Susnya Blog">
<span id="Circles">
	<span id="C1"></span>
	<span id="C2"></span>
	<span id="C3"></span>
</span>
</a>
</div>

CSS Kód:

body	{
	background: #333;
	margin: 0px;
	color: #fff;
}
#RSS	{
	background: -webkit-gradient(radial, 0 128, 0, 0 128, 180, from(#c30), to(#f90));
	background: -moz-radial-gradient(bottom left, circle farthest-corner, #c30 0%, #f90 100%);
	border-radius: 16px;
	-webkit-border-radius: 16px;
	-khtml-border-radius: 16px;
	-moz-border-radius: 16px;
	box-shadow: 1px 1px 7px #999;
	-moz-box-shadow: 1px 1px 7px #999;
	-webkit-box-shadow: 1px 1px 7px #999;
	margin: 160px auto;
	width: 128px;
	height: 128px;
}
#RSS:hover	{
	background: -webkit-gradient(radial, 0 128, 0, 0 128, 180, from(#f30), to(#f90));
	background: -moz-radial-gradient(bottom left, circle farthest-corner, #f30 0%, #f90 100%);
	box-shadow: 1px 1px 7px #fff;
	-moz-box-shadow: 1px 1px 7px #fff;
	-webkit-box-shadow: 1px 1px 7px #fff;
}
#RSS span	{
	display: block;
}
#RSS a	{
	border-radius: 16px;
	-webkit-border-radius: 16px;
	-khtml-border-radius: 16px;
	-moz-border-radius: 16px;
	display: block;
	position: absolute;
	width: 128px;
	height: 128px;
}
#Circles	{
	margin: 16px auto;
	overflow: hidden;
	position: relative;
	width: 96px;
	height: 96px;
}
#C1	{
	border: 16px solid #fff;
	border-radius: 96px;
	-webkit-border-radius: 96px;
	-khtml-border-radius: 96px;
	-moz-border-radius: 96px;
	position: absolute;
	top: 0px;
	right: 0px;
	width: 160px;
	height: 160px;
}
#C2	{
	border: 16px solid #fff;
	border-radius: 96px;
	-webkit-border-radius: 64px;
	-khtml-border-radius: 64px;
	-moz-border-radius: 64px;
	position: absolute;
	top: 32px;
	right: 32px;
	width: 96px;
	height: 96px;
}
#C3	{
	background: #fff;
	border-radius: 16px;
	-webkit-border-radius: 16px;
	-khtml-border-radius: 16px;
	-moz-border-radius: 16px;
	position: absolute;
	top: 68px;
	right: 68px;
	width: 28px;
	height: 28px;
}

Hozzászólás: » 4 « • Írta: Péter (2010/05/21 21:05)