07.12.13.Szövegbuborék CSS-sel

Sok oldalon lehet látni, olyan jópofa megoldást a kommentek megjelenítésére, hogy a hozzászólás egy kis szövegbuborékba kerül. Én magam is ezt a megoldást alkalmazom az oldalamon.:) Az alábbi kis leírásban prezentálom, hogy készíthet ilyet bárki magának.

Ha nagyon flexibilisre szeretnénk készíteni a buborékunkat – miért is ne akarnánk -, akkor öt kis képecskére lesz szükségünk. Négy kép a buborék sarkainak, a lekerekítéshez, valamint egy kép a kis nyilacskának alulra.
A példa buborékok ezt az öt kis gif képet használják:

A HTML kód

Mindegyik képet egy külön DIV-be tesszük és a megjeleníteni kívánt szöveget a legbelső közé írjuk. Az utolsó DIV páros zárja közre az író nevét, beküldés dátumát, vagy amit akarunk.

<div class="sbl">
  <div class="sbr">
    <div class="stl">
      <div class="str">
        Ez egy függőlegesen teljesen rugalmas szöveg buborék.
        Hozzászólások megjelenítésére nagyon esztétikus és
        modern megoldás. Beágyazható számos CMS themebe, mint
        például a WordPress.
      </div>
    </div>
  </div>
</div>
<div class="sb">Blint @ 2007. 12. 15.</div>

A CSS kód

Itt megadjuk a sarkok képeit, illetve a buborék színét, valamint a margókat és szöveg stílust.

/ *Itt állíthatunk a buborék szélességén. Valamint a benne
elhelyezkedő szöveg stílusán. */
.sbl {
	background: url('bl.gif') bottom left no-repeat #ededed;
	width: 30%;
	text-align: center;
	min-width: 100px;
}
.sbr {
	background: url('br.gif') bottom right no-repeat;
}
.stl {
	background: url('tl.gif') top left no-repeat;
}
.str {
	background: url('tr.gif') top right no-repeat;
	padding: 10px;
}
/* Ez a rész a nyilacska és a mellette megjelenő szöveg
formására szolgál */
.sb {
	padding: 8px 0px 30px 50px;
	background: url('b.gif') 30px top no-repeat;
	font-size: 13px;
	color: #fff;
}

Ennyi volna! A működő demót megtekintheted itt. A HTML és a CSS kód a képekkel együtt letölthető a Letöltés gombra klikkelve.