Esperimento CSS3: icona fumetto css3

Esperimento CSS3: icona fumetto css3
Freia

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

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

rendere-responsive-il-like-box-di-facebook
Up Next:

Rendere responsive il like box di Facebook

Rendere responsive il like box di Facebook