Creare icona feed RSS con CSS3

Ci sono molti tutorial per creare un’icona feed RSS, ma pochi che spiegano come crearla in CSS3, senza uso di immagini e livelli. In questo articolo vedremo come creare un logo RSS feed con le potenzialita’ messe a disposizione dai CSS3.

STEP 1

Creare un file Html, come segue:

	Creare icona feed RSS con CSS3
	


	- inserire il codice Html qui -

STEP

Inserire nel codice Html la classe per costruire l’icona:

E il relativo codice 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
}

Gia’ con questo poco codice abbiamo costruito l’icona, infatti se provate ad aprire il file con un qualsiasi browser il risultato sara’ il seguente:

STEP3

Adesso andiamo ad inserire all’interno dell’ icona la cornice che fa da bordo. Nel codice Html basta aggiungere una classe:

All’interno del tag Style il seguente codice 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
}

Ecco il risultato

STEP4

Adesso dobbiamo inserire all’interno dell’icona e della cornice il simbolo del feed RSS. Questo lo trattiamo come 3 cerchi uno dentro l’altro.

Nel codice Html introduciamo altre 3 classi:

Relativo 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
}
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
}
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
}

Il risultato

Adesso finiamo con l’aggiunta nel CSS della parte per il cambiamento di colore on mouse over:

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
}

Ed ecco fatto! Abbiamo appena creato la nostra icona dei feed RSS solo con CSS3.