Pratbubbla i CSS
Ihopknåpat av Tom Stone en torsdag i maj, 2008
När man vill ha dekorativa element på sin webbsida, så brukar man oftast använda bilder och ikoner. Det brukar innebära att man ofta, under utvecklingsarbetet, får göra om bilderna man använder, eftersom man inte alltid vet exakt vilka färger man vill använda - och det kan bli rätt påfrestande att behöva modifiera samma bild ett antal gånger.
Därför kan det vara rätt fiffigt att använda sig av ren CSS i sÃ¥ stor utsträckning som möjligt, även till dekoren, för dÃ¥ kan man modifiera färgerna snabbare och enklare - och sen, när allt fÃ¥tt den färgskala man vill ha, sÃ¥ kan man ersätta CSS’en med bilder.
Nu låter detta kanske rätt begränsande - men man kan göra mer med CSS än vad man först tror. Som ett exempel, så tänkte jag beskriva hur man kan göra en pratbubbla med enbart HTML och CSS.
Först behöver vi lite HTML1 att utgå ifrån. Kring ordet "Hej" sätter vi en DIV-tagg2 , följt av en tom DIV-tagg - och till sist sätter vi en DIV-tagg som omsluter de två första. I kod ser det då ut såhär:
<div> <div>HEJ</div> <div></div> </div>
Renderat i webbläsaren, så ser det nu ut som i bilden till vänster. Inte så spännande eller hur?
Men med CSS3 kan vi definiera om hur en webbläsare ska rita upp en DIV-tagg. Det går att göra det direkt, utan att behöva modifiera något i HTML-koden, fast det kräver lite mer avancerade tekniker, så för att det ska bli lättare, så ger vi varje DIV-tagg ett klass-namn - vilket medför att taggarna förses med en "krok" eller "måltavla" som gör att vi lätt kan hugga tag i dem utifrån. Och för att göra det enkelt att hålla ordning på saker, så väljer vi semantiskt bra klass-namn - dvs. namn som beskriver innehållet, istället för utseendet.
Det kan nämligen bli rätt förvirrande om man ger nÃ¥got namnet "SvartBakgrund", och man senare ändrar för att man tycker det är snyggare med en röd bakgrund… sÃ¥ har plötsligt namnet "SvartBakgrund" förlorat all beskrivande betydelse. Döper man det istället efter innehÃ¥llet, som t.ex. "SenasteNytt" sÃ¥ kommer koden alltid att vara lättläst oavsett hur sidan dekoreras. SÃ¥ vi ger de olika DIV-taggarna följande klass-namn:
<div class="pratomslag"> <div class="prat">HEJ</div> <div class="pratdekor"></div> </div> <!--avslutar "pratomslag"-->
Än så länge ser resultatet oförändrat ut, eftersom vi inte gett några nya definitioner på hur något ska ritas upp. Men så fort vi lägger till lite CSS-kod, så börjar det hända saker. Här förses våra klass-namn med nya instruktioner:
.pratomslag {
border:2px solid #f00;
}
.prat {
background-color:#FFC;
}
.pratdekor {
background-color:#6CF;
}
Resultatet syns här bredvid. Först har "pratomslag" fått en 2 pixel bred, solid, röd ram. Färgen anges med hexadecimala siffror4 vilket inte är så krångligt som det låter. De flesta bildprogram kan visa hexadecimala värden, annars finns det en fiffig plugin till Firefox som heter Colorzilla.
Nästa klass; "prat", har fått en ljusgul bakgrundsfärg, och "pratdekor" har fått en blåaktig bakgrundsfärg.
Nu funkar en DIV på det sättet att den töjer ut sig så långt det går på bredden, och drar ihop sig på höjden. Eftersom vi inte har något innehåll i "pratdekor", så har den dragit ihop sig så mycket att den inte syns. Så, det fixar vi i nästa steg:
.pratomslag {
border:2px solid #f00;
}
.prat {
background-color:#FFC;
width:160px;
height:100px;
}
.pratdekor {
background-color:#6CF;
width:40px;
height:40px;
}
Nu fick div’arna "prat" och "pratdekor" höjd och bredd definierade, och nu ser vi den blÃ¥a "pratdekor". Den röda ramen pÃ¥ "pratomslag" har töjt ut sig pÃ¥ höjden, dessutom, utan att nÃ¥got har behövt göras.
I nästa steg vill jag flytta den blÃ¥ div’en sÃ¥ den ligger bredvid den gula, istället för under.
Nästa kodsnutt visar hur det går till:
.pratomslag {
border:2px solid #f00;
}
.prat {
background-color:#FFC;
width:160px;
height:100px;
float:left; /*nytt*/
}
.pratdekor {
background-color:#6CF;
width:40px;
height:40px;
}
Hoppsan.. Normalt brukar en "float:left" göra att div’en lÃ¥ter text och annat flöda runt den, fast jag glömde att det inte gäller alla element. En tom div Ã¥ker istället rakt upp, sÃ¥ den blÃ¥färgade div’en är nu gömd bakom den gula. Det fixar vi genom att sätta "float:left" även pÃ¥ "pratdekor".
.pratomslag {
border:2px solid #f00;
}
.prat {
background-color:#FFC;
width:160px;
height:100px;
float:left;
}
.pratdekor {
background-color:#6CF;
width:40px;
height:40px;
float:left; /*nytt*/
}
SÃ¥där, nu ser det bättre ut. Den blÃ¥ ligger nu bredvid den gula. Men vad har hänt med den röda ramen, kan man frÃ¥ga sig…. Som jag nämnde tidigare, sÃ¥ drar en DIV ihop sig vertikalt, om inget töjer ut den - och via en "float" sÃ¥ säger man även indirekt att man ska ta det aktuella elementet ur sitt naturliga flöde. SÃ¥ "pratomslag" reagerar alltsÃ¥ nu som om den inte längre innehÃ¥ller nÃ¥got. Egentligen är det inte sÃ¥ viktigt just här, sÃ¥ vi skulle kunna lämna det sÃ¥ - men bara för att det ska se lite mer estetiskt ut, sÃ¥ tar vi till ett litet specialknep:
.pratomslag {
border:2px solid #f00;
overflow:hidden; /*nytt*/
}
.prat {
background-color:#FFC;
width:160px;
height:100px;
float:left;
}
.pratdekor {
background-color:#6CF;
width:40px;
height:40px;
float:left;
}
Jag satte ett "overflow:hidden" i klassen "pratomslag", vilket lite överraskande medför att vÃ¥ra tvÃ¥ "floats" nu omsluts ordentligt igen. Det är ett litet obskyrt knep man kan ta till. Det finns flera värden man kan sätta pÃ¥ "overflow" - t.ex. om innehÃ¥llet är större än omslaget, sÃ¥ kan man sätta "overflow:auto" och fÃ¥r dÃ¥ en rullningslist (scrollbar). Sätter man "overflow:visible" sÃ¥ sticker innehÃ¥llet ut, förbi ramen. Och sätter man "overflow:hidden" sÃ¥ beskärs den delen som är för stor - men i det här fallet, sÃ¥ har vi inte satt nÃ¥gra dimensioner pÃ¥ "pratomslag", sÃ¥ därför kan "overflow:hidden" inte riktigt avgöra vad som ska visas, och vad som ska beskäras… sÃ¥ den väljer att beskära tomheten utanför vÃ¥ra tvÃ¥ inre div’ar. Fiffigt va?
.pratomslag {
border:2px solid #f00;
overflow:hidden;
}
.prat {
background-color:#FFC;
width:160px;
height:100px;
float:left;
}
.pratdekor {
background-color:#6CF;
width:40px;
height:40px;
float:left;
margin: 20px 0 0 0; /*nytt*/
}
Nu har jag satt en marginal pÃ¥ "pratdekor" för att flytta ned den 20 pixlar nedför sidan av den gula div’en. Värdena i "margin" anges medurs; topp, höger, botten, vänster.
Härnäst, i nästa skede, sÃ¥ ska vi ge den blÃ¥ div’en en ram, där varje sida av ramen har sin egen färg. Det görs sÃ¥här:
.pratomslag {
border:2px solid #f00;
overflow:hidden;
}
.prat {
background-color:#FFC;
width:160px;
height:100px;
float:left;
}
.pratdekor {
background-color:#6CF;
width:40px;
height:40px;
float:left;
margin: 20px 0 0 0;
border-top:2px solid #006; /*nytt 4 rader*/
border-right:2px solid #06f;
border-bottom:2px solid #396;
border-left:2px solid #c63;
}
Fixat. Än så länge är det inte så snyggt, och det ser inte ut som en pratbubbla heller.
Men nu ska vi ta till ett fiffigt litet tricks - det finns inga begränsningar för hur tjock ram man får ha.
Det finns inte heller några begränsningar på hur liten man får göra en DIV.
SÃ¥ om jag i nästa skede sätter storleken pÃ¥ "pratdekor" till noll pÃ¥ bÃ¥de bredd och höjd - och samtidigt gör ramen 20 pixlar bred…
.pratomslag {
border:2px solid #f00;
overflow:hidden;
}
.prat {
background-color:#FFC;
width:160px;
height:100px;
float:left;
}
.pratdekor {
background-color:#6CF;
width:0; /*minska*/
height:0;
float:left;
margin: 20px 0 0 0;
border-top:20px solid #006; /*Öka*/
border-right:20px solid #06f;
border-bottom:20px solid #396;
border-left:20px solid #c63;
}
..Lite överraskande resultat, inte sant? Man antar ju att man bara kan fÃ¥ fyrkantiga former med ren CSS, men här har vi plötsligt fÃ¥tt triangulära former… Ta nu en ordentlig titt pÃ¥ den bruna trekanten. Om den var gul istället för brun, sÃ¥ skulle det se ut som spetsen pÃ¥ en pratbubbla. Färgen pÃ¥ de övriga tre sidorna skulle vi egentligen kunna sätta till genomskinlig, men det är inte alla webb-läsare som är kapabla att rita upp det, sÃ¥ istället använder vi samma färg som bakgrunden, sÃ¥ här:
.pratomslag {
border:2px solid #f00;
overflow:hidden;
}
.prat {
background-color:#Fe9;
width:160px;
height:100px;
float:left;
}
.pratdekor {
/*background-color:#6CF;*/
width:0;
height:0;
float:left;
margin: 20px 0 0 0;
border-top:18px solid #fff; /*ändra till vit*/
border-right:8px solid #fff;
border-bottom:18px solid #fff;
border-left:32px solid #fe9; /*ändra till gul*/
}
..Och se! En pratbubbla!
Eftersom "pratdekor" nu inte har någon inre storlek, så tog jag bort den blå bakgrundsfärgen.
I nästa steg, så kommer jag ta bort den röda ramen från "pratomslag" samt göra ordet "Hej" större och centrera det.
Jag skulpterar även formen på pratbubblespetsen, genom att leka lite med tjocklekarna på ramen. Så här:
.pratomslag {
border:none; /*eller ta bort helt*/
overflow:hidden;
}
.prat {
background-color:#Fe9;
width:160px;
height:100px;
float:left;
font-size:42px;
font-weight:bold;
line-height:80px;
text-align:center;
}
.pratdekor {
width:0;
height:0;
float:left;
margin: 20px 0 0 0;
border-top:18px solid #fff;
border-right:8px solid #fff;
border-bottom:18px solid #fff;
border-left:32px solid #fe9;
}
Klart. Vi har nu en rätt juste pratbubbla, och den är insvept i en DIV, som vi potentiellt kan flytta runt var vi än vill ha den.
Ordet "hej" flyttade jag vertikalt via "line-height", vilket egentligen har med radavståndet att göra - fast i en ensam textrad, så går det fin-fint att använda det för vertikal justering.
Om jag nu skulle komma på att jag inte gillar nyansen på bubblan, och istället vill ha spetsen nedåt stället för åt höger, så behöver jag inte starta upp Photoshop, utan kan fixa det snabbt och enkelt med att ändra en textrad eller två.
Notera att vi inte vid något tillfälle, sedan början, har gått in och pillat i HTML-koden, utan den ser fortfarande ut så här:
<div class="pratomslag"> <div class="prat">HEJ</div> <div class="pratdekor"></div> </div> <!--avslutar "pratomslag"-->
Med ett par minimala justeringar i CSS’en, sÃ¥ kan vi istället förvandla pratbubblan sÃ¥ den ser ut som här till vänster. Lägg nu märke till hur förutseende det var att ge klasserna och elementen semantiska namn. Tänk om vi valt ett namn som "GulSpets" istället för "pratdekor"… sÃ¥ skulle det nu inneburit att den mörkblÃ¥ skuggan under den gula fyrkanten hade hetat "GulSpets". Förvirrande skulle det varit. Men ett namn som "pratdekor" är lätt att fatta, oavsett om dekoren rÃ¥kar vara en pratbubblespets, en skugga eller nÃ¥got annat.
Och därmed är den här lilla lektionen över.
Fotnot:- HyperText Markup Language [↩]
- DIV är förkortningen av "Division", vilket är markeringen för att man vill avdela ett visst stycke pÃ¥ nÃ¥got sätt. "Tagg" är slang för den etikett man omsluter nÃ¥got med [↩]
- Cascading Style Sheet [↩]
- Hexadecimala tal har basen 16, till skillnad frÃ¥n den vanliga basen 10 som är vad vi använder till vardags. För tänk efter - vi har tio fingrar. Ska vi räkna till t.ex. tolv sÃ¥ räcker fingrarna inte till, utan när de tar slut, sÃ¥ markerar vi det med en Etta, börjar om och räknar ytterligare tvÃ¥ fingrar och kan skriva "12". TvÃ¥an i talet "27", betyder alltsÃ¥ att vi har fÃ¥tt slut pÃ¥ fingrar tvÃ¥ gÃ¥nger. Tänk dig nu hur det skulle bli om vi hade 16 fingrar… DÃ¥ skulle det ta lite längre tid innan vi fick slut pÃ¥ fingrar och behövde markera det med en Etta. I hexadecimalt system, sÃ¥ skriver man alltsÃ¥ siffran Sexton som "10". För att markera talen Tio till Femton, använder man bokstäverna A till F, sÃ¥här: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F [↩]
Trackback URL = http://blogg.tomstone.se/design/css-pratbubbla.html/trackback/
Ämne: Design
css
css
| Design Design Design Design | Intressant Intressant Intressant Intressant | webbdesign webbdesign webbdesign webbdesign | intressant
Backeman
» mÃ¥ndagen 2 juni 2008, kl. 21:49:
Det var jäkligt fiffigt! När jag såg hur du gjorde med 0 i storlek och bred border så skrattade jag till, vilket fult knep
Det här får jag allt komma ihåg!!