How I did it: come creare uno sticker-ribbon in 3 passi

Martedì 2 Dicembre, 2008

Gli sticker (o ribbon) sono quelle immagini che vengono posizionate in alto a destra, o in alto a sinistra, ed hanno comunemente una forma angolare a fascia. Ne esistono di vari tipi, dalle semplici immagini statiche ai più spettacolari filmati Flash. A volte sono costruiti in modo tale da rimanere nella loro posizione anche quando scorriamo il contenuto della finestra del browser.
Se non volete affidarvi a servizi come QuickRibbon.com, ma volete costruire un ribbon tutto vostro, ecco 3 semplice passi da seguire.

1. Creiamo l'immagine

Prima di tutto creiamo l'immagine che vogliamo posizionare in uno degli angoli destro o sinistro. L'immagine qui sotto, di 163x163 pixel, ecostruita per l'angolo superiore sinistro.

Sticker Ribbon

Per rendere l'effetto di sovrapposizione completo bisogna scegliere, al momento del salvataggio, un formato che supporti la trasparenza, come il GIF o il PNG.

2. Il codice HTML

Salvata la nostra immagine possiamo inserirla nella nostra pagina, avvolgendo il tag img con un div contenitore, che useremo puoi per posizionare l'immagine nell'angolo:

PLAIN TEXT
HTML:
  1. <div class="ribbon"><img src="ribbon.gif" title="Ribbon Test" width="163" height="163" border="0"></div>

Se il nostro sticker deve possedere un link, possiamo avvalerci del tag map per definire un'area sensibile che non sia rettangolare. Lo sticker presentato in questo esempio, infatti, hai una forma obliqua e la trasparenza ne evidenzia perfettamente i contorni. Sarebbe quindi sconveniente permette di cliccare su un'area vuota aggiungendo semplicemente un tag a introno all'immagine. Usiamo allora questa sintassi:

PLAIN TEXT
HTML:
  1. <div class="ribbon"><img src="ribbon.gif" title="Ribbon Test" width="163" height="163" border="0" usemap="#ribbonlink"></div>
  2. <map name="ribbonlink"><area shape="poly" coords="163,0,0,163,0,129,129,0" href="http://undolog.com"></map>

L'attributo coords del tag area definisce le coordinate del nostro ribbon.

3. il codice CSS

Aggiungiamo adesso le definizioni degli stili che permetteranno al nostro sticker di posizionarsi sulla pagina in modo corretto:

PLAIN TEXT
CSS:
  1. div.ribbon{
  2. position:absolute;
  3. top:0px;left:0px;
  4. height:163px;width:163px;
  5. margin:0;padding:0;
  6. overflow:visible;
  7. float:none;
  8. z-index:10000}
  9. div.ribbonimg{
  10. border:0;padding:0;margin:0;
  11. background-image:none}

Se vogliamo che il ribbon rimanga "appiccicato" al video, anche se scorriamo la finestra, basta modificare il tipo absolute dello stile position in fixed:

PLAIN TEXT
CSS:
  1. div.ribbon{
  2. position:fixed;
  3. top:0px;left:0px;
  4. height:163px;width:163px;
  5. margin:0;padding:0;
  6. overflow:visible;
  7. float:none;
  8. z-index:10000}

Nota: il tipo fixed, nello stile position, fino a poco tempo fa non era supportato da tutti i browser. Per rendere l'effetto, infatti, si era costretti ad usare una funzione Javascript che, ad intervalli regolari, controllava l'eventuale scorrimento del contenuto della finestra e riposizionava il ribbon in modo che desse l'impressione di rimanere sostanzialmente immobile. Fortunatamente, oggi, a parte qualche obsoleta versione di Explorer, tutti i browser supportano il tipo fixed.

Post correlati

Tags: , , , , ,
Pubblicato in CSS, Internet, Javascript, Sviluppo, Tutorials | Nessun commento »