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

Címkék: ,

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. :o 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.

CSS RSS Icon: Final

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)

Hozzászólás írása a “Végre elkészült a saját CSS-es RSS ikonom” című bejegyzéshez:

Kötelező!

Kötelező!

:D :-) :( :o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen:

Hozzászólások a “Végre elkészült a saját CSS-es RSS ikonom” című bejegyzéshez:

  1. Írta: yoyo (2010/05/22 11:22) • »»

    Nájsz :)

    Amúgy ezeket érdemes képekként feltenni, nem? Szóval CSS rajzolgatásnak nem mindig van értelme, inkább div-ek, gombok stb formázásánál… vagy rosszul látom? Mikor érdemes CSS grafikát használni képek helyett?

  2. Írta: Petya (2010/05/22 14:09) • »»

    yoyo: Ahogy Peti is említette a skálázhatóság az egyik legfőbb erénye, aminek a grafikus megfelelője az SVG. Értelemszerűen bonyolult ábrákat nem érdemes ezzel a módszerrel megjeleníteni, mert többe kerül a leves, mint a hús. :)

  3. Írta: Peti (2010/05/22 13:48) • »»

    Menő lett :) Johnny, szerintem pl könnyebben skálázható, akár dinamikusan is, ellenben a képekkel.
    Azért arra ugye emlékszel, hogy én mutattam a cikket neked? :D

  4. Írta: Petya (2010/05/22 14:06) • »»

    Persze, de azért az elég nagy véletlen volt, hogy te rátaláltál, és én pont akkor ott ültem melletted. :)