CSS  »  Articoli  »  Effetti con CSS 

Se siete Twitter-dipendenti e non vi accontentate di avere un contatore di follower, ma volete far vedere al mondo gli avatar dei vostri amici, vi posso consigliare un ottimo sito web che fa al caso vostro: Twitter Mosaic.

Questa applicazione web è gratuita e permette di creare un mosaico dei vostri amici e follower di Twitter; il tutto è estremamente semplice; infatti basta andare sul sito e immettere il proprio username Twitter per far generare un mosaico con le immagini.

Questo mosaico può essere anche immesso su una pagina web copiando un apposito codice HTML; ovviamente se si vuole si può scegliere di personalizzare tale codice.

L'HTML generato da Twitter Mosaic

Vediamo bene i codice generato:

<p><a href="http://twitter.com/andimar"><img width="48" height="48" title="andimar" border="0" src="http://s3.amazonaws.com/twitter_production/profile_images/213213176/Io-e-la-nuvoletta_normal.jpg" /></a>
<a href="http://twitter.com/zetareticoli"><img width="48" height="48" title="francesco improta" border="0" src="http://s3.amazonaws.com/twitter_production/profile_images/218748675/AVATAR_normal.png" /></a></p>

Viene generato un codice all'interno di un paragrafo con tutte le informazioni riguardanti sia gli utenti che le immagini; ovviamente questo codice possiamo personalizzarlo dal punto di vista della presentazione con l'aiuto dei CSS.

Per iniziare creiamo un div che chiameremo #followers e di cui decidiamo dimensioni e posizionamento all'interno del layout del nostro sito web; una cosa simile a questo:

#followers {
    width:300px;
    height:170px;
    margin: 0 auto;
}

Ed ora lo richiamiamo all'interno del nostro layout:

<div id=”followers”>

<p><a href="http://twitter.com/andimar"><img width="48" height="48" title="andimar" border="0" src="http://s3.amazonaws.com/twitter_production/profile_images/213213176/Io-e-la-nuvoletta_normal.jpg" /></a>
<a href="http://twitter.com/zetareticoli"><img width="48" height="48" title="francesco improta" border="0" src="http://s3.amazonaws.com/twitter_production/profile_images/218748675/AVATAR_normal.png" /></a></p>

</div> <!-- end #followers -->

Se tutto è andato per il verso giusto dovremmo ottenere qualcosa di simile a quello presente nel nostro esempio.

Si può notare però che le immagini sono di dimensione 48 pixel per 48 pixel; mettiamo il caso che noi invece desideriamo una risoluzione minore oppure maggiore: come procedere?

Sempre con l'impiego dei CSS, dichiarando uno specifico comportamento sulle immagini contenute all'interno del div#followers:

#followers img {
    width:32px;
    height:32px;
}

Ed ecco qui di seguito l'esempio.

Ovviamente tale tecnica si presta a tutta una serie di altri abbellimenti che vi esorto a sperimentare.

Altri articoli

Altre guide

Altre newsletter