Creare pulsanti e bottoni CSS3 a forma di fumetto

Breve tutorial per la creazione di nuvolette, molto semplice e intuitivo con cui potete impressionare ancora di piu’ i vostri clienti utilizzando delle nuove tecniche nella costruzione di fogli di stile. Qui di seguito non trovate dei codici JavaScript o jQuery, ma tutto lo fa il codice contenuto nel vostro CSS. Ricordate di scrivere ordinato e partiamo!
Creiamo una nuvoletta in stile fumetto sono con l’uso di CSS3. La tecnica e’ molto semplice e si ottiene con una combinazione di bordi e del contenuto generato. Abbiamo creato quattro elementi per cambiare la posizione della freccia del fumetto:

<div class="speech-bubble speech-bubble-top">Ciao</div>
<div class="speech-bubble speech-bubble-bottom">Ciao</div>
<div class="speech-bubble speech-bubble-left">Ciao</div>
<div class="speech-bubble speech-bubble-right">Ciao</div>

Adesso inseriamo gli stili del nostro contenitore:

.speech-bubble {
position: relative;
background-color: #666;
width: 200px;
height: 150px;
line-height: 150px;
color: white;
text-align: center;
border-radius: 10px;
font-family: sans-serif;
margin: 2em auto; }

Adesso dobbiamo creare un contenitore vuoto con il contenuto generato:

.speech-bubble:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 15px solid;
}

Le dimensioni di questo blocco sono date dai 15px del bordo, trasparente. Adesso andiamo a inserire le frecce per ogni div che abbiamo inserito nel nostro html. Quindi il nostro CSS continuera’ come segue:

.speech-bubble-top:after {
  border-bottom-color: #666;
  left: 50%;
  bottom: 100%;
  margin-left: -15px;
}
.speech-bubble-right:after {
  border-left-color: #666;
  left: 100%;
  top: 50%;
  margin-top: -15px;
}

.speech-bubble-bottom:after {
  border-top-color: #666;
  top: 100%;
  left: 50%;
  margin-left: -15px;
}

.speech-bubble-left:after {
  border-right-color: #666;
  top: 50%;
  right: 100%;
  margin-top: -15px;
}

Il gioco e’ fatto abbiamo creato i nostri fumetti con i CSS che possiamo personalizzare a nostro piacimento. Piccola nota, negli stile delle frecce i margini sono dati in negativo con lo stesso valore della misura del bordo, proprio per rendere visibili le frecce. Qui potete trovare la pagina di prova.

Da qui possiamo sbizzarrirci come vogliamo. Esempio se al primo bottone vogliamo inserire una ombra esterna, basta aggiungere nella porzione del suo codice CSS la seguente istruzione: