Oggi vediamo come creare una Speech Bubble cioè la classica nuvoletta dei fumetti usando solo css.
Pagina Html
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <title>Speech Bubble</title> <link href='style.css' rel='stylesheet' type='text/css'> </head> <body> <div class="speech_bubbles">Ciao</div> </body> </html> |
Foglio di Stile
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.speech_bubbles { position: relative;/*Posizione Relativa*/ padding: 15px;/*Padding*/ margin: 1em 0 3em;/*Margini*/ color: #000;/*Colore del Testo*/ background: #D0D0D0;/*Sfondo*/ border-radius: 10px;/*Grandezza raggio*/ background: linear-gradient(top, #A0A0A0 , #D0D0D0);/* Gradienti CSS3 consentono di visualizzare transizioni uniformi tra due o più colori specificati. */ } /* Creo il triangolo */ .speech_bubbles:after { content: ""; display: block; position: absolute; bottom: -15px; left: 50px; width: 0; border-width: 15px 15px 0; border-style: solid; border-color: #D0D0D0 transparent; } |
