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:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Creare icona feed RSS con CSS3</title> <style type='text/css'> - inserire codice css qui - </style> </head> <body> - inserire il codice Html qui - </body> </html>
STEP
Inserire nel codice Html la classe per costruire l’icona:
<strong></strong> <span class='feed-box'> </span>
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:
<span class='feed-box-in'><strong></strong> </span>
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:
<span class='feed-quarter-circle-big'> <span class='feed-quarter-circle-small'> <span class='feed-circle'> </span> </span> </span>
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.
Alla prossima!
Cutter (6)
katia (4)
Fabrizio (3)
Paola (3)
barbara (2)
Jimmy (2)
leonardo (2)![[Valid RSS]](http://feedvalidator.org/images/valid-rss-rogers.png "Validate my RSS feed")
8 comments
Mi permetto di dissentire, hai provato ad aprirlo con IE?
Come al solito, non funziona correttamente….Nonostante quest, bella prova
Ciao WeDesignCatania e grazie per il tuo commento! =)
Ma hai provato anche versioni successive alla 6? Perché noi l’abbiamo provata e la vediamo perfettamente. Vediamo di trovare una soluzione così aggiungiamo qualche plus all’articolo!
Si ho provato con la versione 6,7,8 e 9.
L’unica versione che supporta questa tecnica è, ovviamente, la versione 9, per le altre dovresti usare un pizzico di jQuery o qualche hack.
Nonostante questo il tuo tutorial è ottimo ma bisogna tenere conto che, purtroppo, sono ancora pochi gli ‘illuminati’ che non usano IE ma Chrome o FF.
Di quelli che usano IE poi solo una parte usano IE9 e, quasi certamente, quasi nessuno (o pochissimi) fa parte della Pubblica Amministrazione o di uffici in genere visto che IE9 richiede l’upgrade di Windows alla versione 7 e l’aggiornamento che tanti, troppi, non sempre fanno…
Volendo riassumere: al rogo IE, lunga vita a Webkit!
Se ti interessa sull’argomento c’è questo articolo: http://goo.gl/ZEDN8
è scritto bene e spiega come usare un pizzico di JS magic per raggiungere l’obiettivo
@Web Design Catania Sono d’accordo con te alla grande!!!!
@Web Design Catania Grazie per la dritta!
Ho trovato un esempio che, a mio parere, straccia tutti quelli che hanno creato tutorial su come disegnare con i CSS:
http://goo.gl/7TBfG
@Web Design Catania bello davvero! Grazie della condivisione.
Lascia un Commento
Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>