Oggi mostriamo una piccola chicca di web design che sta molto spopolando fra i web designer.

Con poco codice CSS è infatti possibile creare una pratica fascetta “promozionale”, posizionata all’angolo della pagina web.

Queste fascette sono utili nel caso si voglia pubblicizzare un nuovo prodotto, dare informazioni, far risaltare un particolare evento o semplicemente dare un tocco più moderno alla pagina web.

In questo tutorial mostriamo quanto sia semplice creare un Corner Ribbon che attiri l’occhio del visitatore, con pochissimo codice e pochissimo sforzo.

Alcune caratteristiche di ciò che andremo a creare:

  • Sarà posizionata per lo più in uno degli angoli della pagina
  • Non scompare quando l’utente scorre con la pagina
  • Può essere usato come link a un’altra risorsa
  • Viene visualizzato correttamente in tutti i browser

Primo passo, creiamo la fascia colorata.

Il primo passo consiste nel creare un’immagine dalle dimensioni quadrate, 150×150 oppure 170×170, e con lo sfondo trasparente, quindi è preferibile in formato .png. Si può fare con Photoshop o qualsivoglia software di grafica.

Sbizzarrirsi con la fantasia a questo punto è ciò che rimane da fare. Si può scegliere la forma e il colore del nostro ribbon, con un font più o meno grande o altrettante immagini e iconcine da affiancarci. Se volete piazzarlo nell’angolo in alto a destra allora si consiglia di ruotarlo di circa 45 gradi in senso orario.

Il risultato finito è qualcosa di simile a questo:

corner-ribbon

Chiaramente se l’angolo scelto è differente, anche l’orientamento è differente e l’immagine va ruotata di conseguenza.

Secondo passo, scriviamo il codice CSS & HTML

Realizzata la striscetta grafica, passiamo al codice CSS e HTML della pagina d’esempio:

Codice CSS:

<style>
#ribbon {
position: fixed;
top: 0;
right: 0; /* se invece l'angolo usato è quello di sinistra inseriamo: left: 0; */
z-index: 10; /* Il parametro z-index assicura che l'elemento si posizioni al di sopra di ogni altra cosa nella pagina */
cursor: pointer;
}
</style>

Codice HTML:

<!-- Page Corner Ribbon -->
<a href="https://hackerstribe.com" id="ribbon">
<img alt="Versione aggiornata dell'IP Grabber" src="corner-ribbon.png" width="170" height="170">
</a>

E’ importante che gli attributi dell’immagine width ed height siano quelli effettivi dell’immagine. Devono coincidere per avere un posizionamento preciso.

Un esempio completo come quello mostrato in alto potete scaricarlo e scompattarlo dal seguente archivio, oppure per ribbons tridimensionali già pronti e collegati alla classe css da usare nei vostri progetti, date uno sguardo a quest’altro archivio.

Il tutorial è terminato, se è piaciuto condividete!