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 
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.
Bella guida ,grazie 1
però non funziona con IE……
@ Angelo Delicato:
IE non supporta proprio CSS3, tranne pochissime funzioni
@ Angelo Delicato:
In quel caso non si può fare a meno di ricorrere alle immagini per ottenere un effetto simile!
@ WebDesigner92:
Dovremmo creare un progetto per boicottare IE
@ Angelo Delicato:
IE non è conforme alle nuove specifiche css3 e html5….è il peggior browser di tutti!! ………….w open source
ma, come si fa a mettere il triangolino a sinistra?
@ 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!