Esperimento CSS3: icona fumetto css3

Nell’articolo di oggi affronteremo un esperimento css3 dove andremo a creare una fantastica icona fumetto css3 senza l’utilizzo di immagini.

Struttura e Stile CSS3

Come vedete la struttura è molto semplice:

<div class="fumetto">Testo Fumetto</div>

Applichiamo ora alla classe fumetto lo stile necessario:

.fumetto {
  position:relative;
  padding:15px;
  margin:1em 0 3em;
  color:#000;
  background:#f3961c; /* bg */
  /* css3 */
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
  background:-moz-linear-gradient(#f9d835, #f3961c);
  background:-o-linear-gradient(#f9d835, #f3961c);
  background:linear-gradient(#f9d835, #f3961c);
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}



.fumetto:after {
  content:"";
  position:absolute;
  bottom:-15px; /* valore = - border-top-width - border-bottom-width */
  left:50px; /* posizionamento orizzontale */
  border-width:15px 15px 0; 
  border-style:solid;
  border-color:#f3961c transparent;
  /* FF3.0 fix */
  display:block;
  width:0;
}

Di fatto con il primo blocco css3 andiamo a creare la struttura che conterrà il testo del nostro fumetto (agite sul border-radius per variare la “spigolosità” del fumetto). Con :after una nuova proprietà css3 andiamo ad “appendere” alla classe appena creata la classica icona fumetto.

Troverete informazioni su after a questo indirizzo di approfondimento.

Questo articolo ti è stato utile? Condividilo con i tuoi amici e colleghi 😉

 Immagine fumetto disponibile su Shutterstock