At tænke sig

Først en advarsel, sidder du og surfer med en ældre browser, så er det muligt at du ikke får det fulde udbytte af denne artikel…

Det er jo privilegeret at få et “Go!” på ens ideer. Opgaven gik i korthed ud på at implementere en talebobbel som man kan taste noget tekst i, opgaven blev defineret som : Et baggrundsbillede, med tekst på.

Den er forholdsvist hurtigt klaret, tegn en tom talebobbel, sæt den som baggrund i et p tag og skriv teksten ind i tagget. Men det giver bare ikke den største frihed. Jeg har for ikke længe siden læst en artikel om figurer i CSS så jeg foreslog kunden at jeg løste opgaven alene ved hjælp af CSS.

Kunden er også en god ven, så det gjorde det nok lidt lettere, her er processen der blev brugt som “proof of concept”.

p.talebobble {
  background-color: #FFF;
  background: url('/wp-content/uploads/tanke2.png');
  width: 231px;
  height: 111px;
  text-align: center;
  padding-top: 66px;
}

Og så skrive “At tænke sig” i et p tag der benytter css klassen “talebobble” så ender man med noget lignende :

At tænke sig…

 

som nok kan forbedres stadig

Jeg foreslår en løsning som er rent css baseret, det får som sådan ikke den store betydning for dig, det gør det bare mere fleksibelt. Her er hvad jeg tænker :

Der skal bruges en bobbel, og de små bobler der leder ned til “tanken”

der skal bruges en p tag til at omslutte. Lige som i ovenstående og så skal der tegnes en ramme om tagget, den skal have runde hjørner, meget runde, og som på tegningen giver vi den også noget box shadow.

p.boblen {
	position: relative;
	width: 200px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	margin: 10px 23px 20px 15px;
	background-color: #fff;
	border: 8px solid #666;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	-webkit-box-shadow: 2px 2px 4px #888;
	-moz-box-shadow: 2px 2px 4px #888;
	box-shadow: 2px 2px 4px #888;
}

p.boblen:before, p.boblen:after
{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
}

At tænke sig…

Godt begyndt er halvt fuldendt – dette er både fundament for en talebobbel og en tankebobbel, så er der de små bobler, der leder ned til tanken, eller en lille snip der leder ned til talen.

Her skaber en ny klasse, da vi gerne vil opnå begge variationer, det er netop en del af fleksibiliteten i forhold til en tegning :

p.tanke
{
	width: 130px;
	line-height: 100px;
	-webkit-border-radius: 108px;
	-moz-border-radius: 108px;
	border-radius: 108px;
}

p.tanke:before, p.tanke:after
{
	left: 10px;
	top: 70px;
	width: 40px;
	height: 40px;
	background-color: #fff;
	border: 6px solid #888;
	-webkit-border-radius: 28px;
	-moz-border-radius: 28px;
	border-radius: 28px;
	-webkit-box-shadow: 1px 3px 6px #999;
	-moz-box-shadow: 1px 3px 6px #999;
	box-shadow: 1px 3px 6px #999;
}

p.tanke:after
{
	width: 20px;
	height: 20px;
	left: 5px;
	top: 100px;
	-webkit-border-radius: 18px;
	-moz-border-radius: 18px;
	border-radius: 18px;
}

Prøver igen med en

<p class="taleboblen tanke">At tænke sig...</p>

At tænke sig…

 

Så har den fået tankebobbel form, men det ser ikke rigtigt ud synes jeg, en talebobbel skal pege mod den største del af indholdet, så jeg vil lave 2 klasser “left” og “right” som hhv er float left og right… Og så lave en tanke-l for left, så er default right som vi ser ovenfor altså meningen at den skal flyde ud til højre som :

At tænke sig…

Og vi kan nu gentage processen og skabe en venstre tanke, som den vil se ud når den flyder ud til venstre og derfor har en “hale” den modsatte vej. Så vi genbruger boblen, og det eneste der ændre sig er placeringen af de 2 små tankebobler “halen”.

 

p.tanke-l
{
	width: 130px;
	line-height: 100px;
	-webkit-border-radius: 108px;
	-moz-border-radius: 108px;
	border-radius: 108px;
}

p.tanke-l:before, p.tanke-l:after
{
	left: 70px;
	top: 70px;
	width: 40px;
	height: 40px;
	background-color: #fff;
	border: 6px solid #888;
	-webkit-border-radius: 28px;
	-moz-border-radius: 28px;
	border-radius: 28px;
	-webkit-box-shadow: 1px 3px 6px #999;
	-moz-box-shadow: 1px 3px 6px #999;
	box-shadow: 1px 3px 6px #999;
}

p.tanke-l:after
{
	width: 20px;
	height: 20px;
	left: 95px;
	top: 100px;
	-webkit-border-radius: 18px;
	-moz-border-radius: 18px;
	border-radius: 18px;
}

At tænke sig…

Den er ikke som sådan responsive, den kan heller ikke bruges til meget andet end 3-4 ord på een linie (line-hight: 100px) men f.eks som her til lige at “fremhæve” noget tekst – det var også det opgaven gik ud på.

Det var tankeboblen, jeg vender tilbage med taleboblen.

Selve metoden stammer fra en artikel jeg læste engang af Craig Buckler – jeg har ledt efter den igen, men fik desværre ikke sat den under mine bogmærker, jeg vil lede videre og opdatere denne artikel med et relevant link hvis jeg finder den.