CSS: creare un icona RSS

Creare icone con i CSS è ora reso possibile grazie alle nuove proprietà CSS3 che controllano la rotazione e i movimenti lungo gli assi orizzontale e verticale degli elementi HTML. In questo articolo vedremo come creare un icona RSS con i soli CSS.

Partiamo dalla seguente marcatura:

<a id="rss" href="#">
    <span class="dot"></span>
    <span class="line1"></span>
    <span class="line2"></span>
</a>​

E applichiamo i seguenti stili CSS:

#rss{
    width:60px;
    height:60px;
    background:#F60;
    box-shadow:0 0 2px #000000;
    position:relative;
    padding:10px 10px 10px 10px;
    border-radius:10px;
    display:block;
    margin: 2em auto;
}
    #rss .dot{
        width:20px;
        height:20px;
        border-radius:50%;
        background:#FFF;
        bottom:10px;
        position:absolute;
        -webkit-transition:all 0.5s ease-in-out;
        -moz-transition:all 0.5s ease-in-out;
        -ms-transition:all 0.5s ease-in-out;
        -o-transition:all 0.5s ease-in-out;
        transition:all 0.5s ease-in-out;
    }
    #rss:hover .dot{
        background:#000;
    }
    #rss .line1{
        width:25px;
        height:25px;
        border-radius:50%;
        border:#FFF 10px solid;
        position:absolute;
        left:-5px;
        bottom:-5px;
        border-color:white transparent transparent transparent;
        -webkit-transform:rotate(40deg) scale(1.5);
        -moz-transform:rotate(40deg) scale(1.5);
        -ms-transform:rotate(40deg) scale(1.5);
        -o-transform:rotate(40deg) scale(1.5);
        transform:rotate(40deg) scale(1.5);
        -webkit-transition:all 1s ease-in-out;
        -moz-transition:all 1s ease-in-out;
        -ms-transition:all 1s ease-in-out;
        -o-transition:all 1s ease-in-out;
        transition:all 1s ease-in-out;
    }
    #rss .line2{
        width:40px;
        height:40px;
        border-radius:50%;
        border:#FFF 10px solid;
        position:absolute;
        left:-8px;
        bottom:-8px;
        border-color:white transparent transparent transparent;
        -webkit-transform:rotate(40deg) scale(1.8);
        -moz-transform:rotate(40deg) scale(1.8);
        -ms-transform:rotate(40deg) scale(1.8);
        -o-transform:rotate(40deg) scale(1.8);
        transform:rotate(40deg) scale(1.8);
        -webkit-transition:all 1.5s ease-in-out;
        -moz-transition:all 1.5s ease-in-out;
        -ms-transition:all 1.5s ease-in-out;
        -o-transition:all 1.5s ease-in-out;
        transition:all 1.5s ease-in-out;
    }
    #rss:hover .line1{
        border-color:#000 transparent transparent transparent;
    }
    #rss:hover .line2{
        border-color:#000 transparent transparent transparent;
    }​

L'effetto è reso possibile dalla combinazione delle proprietà dei bordi con le trasformazioni CSS3. Potete visionare l'esempio finale in questa pagina.