Skalbara pratbubblor med CSS

I och med lanseringen av NetRelations nya webbplats gjorde vi också om sättet på vilket våra pratbubblor kodas. Vi satte upp följande mål för oss själva:

• Storleken måste kunna variera i höjdled allteftersom mängden innehåll ökar
• Storleken måste kunna variera även i sidled, t ex när man ökar teckenstorleken i webbläsaren
• De måste vara kodade semantiskt så att det framgår att det är ett citat och av vem
• Det måste vara lätt att byta ut själva bubblan mot andra färgvarianter
• Bubblan får bara bestå av en enda bild-fil

Vi började med att göra en designskiss på hur vi ville att det skulle se ut i slutändan:

Sedan gjorde vi en bild på själva bubblan, som var stor nog att kunna rymma även de mest omfattande citaten.

Därefter placerade vi bubblan som bakgrundsbild med hjälp av CSS på lämpliga element. Det lila området indikerar vilken del av elementet som har bakgrundsbild:

blockquote

div

p

div

cite

Slutresultat

Genom att jobba på detta sätt uppnår vi alla de mål vi satte upp för oss själva.

Det går att skala texten utan att bubblan "går sönder"...

...inte ens i sidled:

Och med en enda rad i CSS-filen kan vi nu ha en alternativ bakgrundsbild som bättre passar mot en med tonad bakgrund, utan att behöva göra något annat än att tillverka en (1) ny pratbubble-bild.