CSS: nuvolette in stile fumetto

CSS: nuvolette in stile fumetto

Con i CSS è possibile realizzare delle nuvolette in stile fumetto con l'ausilio dei bordi arrotondati e delle immagini di sfondo. In questo esempio vedremo come ricreare una citazione famosa di Lisa Simpson.

Partiamo da questa marcatura:


<div id="comics">
	<img src="lisa-simpson.gif" alt="Lisa Simpson" />
<div class="bubble">
	<blockquote>
		<p>Is your remarkably sexist drivel intentional or just some horrible mistake?</p>
	</blockquote>
</div>

</div>

Non usiamo un'immagine di sfondo per Lisa perchè la citazione deve essere semantica anche con i CSS disabilitati. A questo punto partiamo con gli stili del contenitore e dell'immagine:


#comics {
	width: 50%;
	margin: 0 auto;
	overflow: hidden;
	border: 10px solid;
	border-radius: 10px;
}

#comics img {
	float: left;
	margin: 0 1em 0 0;
}

Abbiamo usato l'overflow per contenere i float. A questo punto possiamo assegnare degli stili all'elemento con classe bubble e ai suoi discendenti:


div.bubble {
	width: 40%;
	background: url(speech-bubble.png) no-repeat 10px 0;
	float: left;
	position: relative;
	top: 12em;
	left: -5em;
}

div.bubble blockquote {
	font: 100% 'Comic Sans MS', sans-serif;
	line-height: 1.4;
	margin: 0;
	padding: 1em;
	background: #ddd url(speech-bubble-bg.png) repeat;
	border-radius: 60px;
}

div.bubble blockquote p {
	margin-top: 0;
	padding: 0.5em;
	font-size: 1.2em;
}

L'immagine di sfondo che crea la linguetta della nuvola viene spostata di 10 pixel verso destra per compensare il raggio del bordo arrotondato della citazione di blocco. Il contenitore della citazione viene fatto flottare e spostato dall'alto in basso e da destra verso sinistra tramite il posizionamento relativo.

Potete visionare l'esempio finale in questa pagina.

Torna su