X

Creare delle bolle in stile web 2.0 usando solamente il CSS

8
1m 47s

Pubblicato da il giorno 7 marzo 2010

In questo articolo vi illustrerò una tecnica molto originale, che ho appreso dal post di un blog (in inglese), che permette di creare delle fantastiche bolle con gradiente e “triangolino” senza l’uso di immagini, cosa che prima di leggere l’articolo non credevo possibile. Veramente complimenti all’autore del post che ha usato il CSS in modo veramente originale. Ma ora passiamo alla tecnica vera e propria.

Con questa tecnica tutto quello che dobbiamo inserire nel nostro <body> e quindi nella nostra pagina html è un div con un id che ci permetta di selezionarlo dal foglio di stile CSS.

<div id="bolla"> Il nostro messaggio </div>

Tutto il resto lo faremo da CSS dando prima di tutto questo stile al div:

 #bolla {

font-family: helvetica;
position: relative;
color: white;
margin-top: 20px;
padding: 10px;
width: 300px;

/* css3 */

background: -moz-linear-gradient(top, #4595e0, #004359);

-moz-border-radius: 10px; /* firefox */
-webkit-border-radius: 10px; /* safari e chrome */
border-radius: 10px;/* dichiarazione CSS futura */
-khtml-border-radius: 10px;/* browser antichi */

}

Da notare che alla riga 9 abbiamo definito il gradiente, dicendo che deve partire dall’alto (top) e che deve andare dal colore

#4595e0 al colore #004359 (due tonalità di blu, una chiara e una scura).

Nelle righe seguenti abbiamo definito il border-radius, vale a dire l’angolo di arrotondamento che ci permette di ottenere l’effetto arrotondato.

Il risultato sarà questo al momento.

Per inserire il “triangolino” dobbiamo scrivere il CSS che segue:

 #bolla:after {

content: "\00a0";
position: absolute;
bottom: -46px ;
left: 20px;
width: 0;

border-style: solid;
border-width: 15px 10px;
border-color: #004359 transparent transparent;

}

Nella prima linea di codice abbiamo scritto #bolla:after: questo serve a inserire del contenuto direttamente da CSS.

Di seguito content: “0a0″ indica il contenuto che inseriamo (uno spazio vuoto). Il triangolo in se si crea con lo stile dei bordi che è scritto nelle linee di codice successive.

Alla fine il risultato sarà qualcosa di simile :arrow:

Vi lascio con un video del mio canale nel quale spiego tutto passo passo e con il link per il codice che ho scritto nel video.

http://www.youtube.com/watch?v=yjDpzVStieM

Scarica il Css è l’Html
Web Design
, , ,

, 146 articoli pubblicati

Studente di ingegneria elettronica, nel tempo libero scrivo qui su Skimbu (o nel mio blog), programmo per iOS (la mia ultima creazione è OnSale). I principali argomenti da me trattati sono programmazione e design.

Visita il sito web di questo autore

Condividi l'articolo!

Shortlink
  • nicolosi12

    Bella guida ,grazie 1

  • http://www.tweeble.it/ Angelo Delicato

    però non funziona con IE……

  • http://www.skimbu.it Alberto Ziveri

    @ Angelo Delicato:
    IE non supporta proprio CSS3, tranne pochissime funzioni

  • http://www.youtube.com/user/WebDesigner92 WebDesigner92

    @ Angelo Delicato:
    In quel caso non si può fare a meno di ricorrere alle immagini per ottenere un effetto simile!

  • http://www.tweeble.it/ Angelo Delicato

    @ WebDesigner92:
    Dovremmo creare un progetto per boicottare IE

  • Ruoky

    @ Angelo Delicato:
    IE non è conforme alle nuove specifiche css3 e html5….è il peggior browser di tutti!! ………….w open source :)

  • http://www.ipaditaly.tk Simonemac

    ma, come si fa a mettere il triangolino a sinistra?

  • http://www.youtube.com/user/WebDesigner92 WebDesigner92

    @ Simonemac:
    Il triangolino si mette con la seconda parte di codice… quella dove imposti i bordi a un elemento di larghezza 0.
    L’effetto è dato proprio da questo!