Categoria:

Icona Feed RSS in CSS

13/01/2014 01:57 Pubblicato da

RSS icon in CSS

Avendo l’esigenza di aggiungere un’icona RSS al blog, ho deciso di crearne una in puro CSS. Uno dei problemi che si potrebbero presentare è rappresentato dall’utenza che continua ad utilizzare browser datati.

Demo CodePen Download

Nonostante le problematiche con le vecchie versioni dei browser, spiegherò come creare una semplice icona RSS utilizzando CSS e una riga di HTML.
Iniziamo dal linguaggio HTML. Per ottenere la nostra icona useremo un tag div che verrà sfruttato per rappresentare un piccolo cerchio posizionato in basso a sinistra
Tramite i selettori :before e :after, come vedremo dopo, definiremo le due circonferenze più esterne. Per ogni circonferenza più esterna solo un quarto di esse verrà visualizzato tramite la proprietà border, mentre gli altri tre quarti avranno un bordo trasparente.

La classe .d-rss andrà a costruire la piccola circonferenza dell’icona. Tramite la proprietà border specifichiamo che la circonferenza dovrà avere un bordo pari a 30px per ogni lato e il border-radius serve ad arrotondare la figura.

Sfruttando i selettori before e after possiamo rappresentare le circonferenze più esterne. Ciò che distingue le due circonferenze è la loro dimensione e la posizione, per il resto esse presentano le stesse proprietà.
La proprietà padding ci consente di definire la distanza dal centro e l’apertura del bordo. Maggiore è il suo valore, maggiore sarà il border-top, più ampio sarà il bordo superiore. Aumentando il width possiamo rendere il bordo delle circonferenze meno arrotondato. La posizione è relativa alla sua posizione originaria. Il top e il left ci consentono di spostare la circonferenza nella posizione più adatta. Con la proprietà transform ruotiamo l’immagine di 55 gradi. Successivamente definiamo il radius del bordo e i bordi della circonferenza, tre dei quali saranno di tipo transparent. Infine definiamo le proprietà dell’animazione anim che dovrà iniziare non appena viene caricata la pagina e avrà una durata di un secondo.

La circonferenza più esterna presenta le medesime caratteristiche di quella intermedia, ad eccezione della distanza dal centro.

L’animazione consiste in un’alternanza del valore della rotazione con un graduale diminuzione della differenza di gradazione concludendosi con una rotazione di 55 gradi e un’alternanza del valore dello scale caratterizzata da un costante aumento e diminuzione fino a raggiungere il valore di default, ovvero 1. In poche parole la seguente animazione consente di ottenere un effetto shake, un ingrandimento e una successiva riduzione delle circonferenze più esterne.

Demo CodePen Download

21/07/2017 10:14