Slut med almindelig firkantet HTML-tekst: CSS Text Wrapper

Hvis du vil pifte dit website lidt op med en lidt anderledes måde at stille din tekst op på kun vha. CSS, så læs videre her.

På CSS Text Wrapper har man mulighed for at modificere sin tekst på lige præcis den måde man har lyst. Det vil sige at du kan forme din HTML-tekst i enhver tænkelig form. Du kan lave 5-kanter, 8-kanter, cirkler eller andre former.

Det man gør, er at man inde på sitet bruger de to styrepinde som er sat op på skærmen. Disse to pinde har to punkter hver som man kan flytte rundt på. Man kan også trykke et givent sted på linjen, og så får man flere punkter ar arbejde med. Derved kan man ramme test-teksten (sig det hurtigt 10 gange 😉 )ind på den måde man har lyst.
Under arbejdsområdet kan man indstille forskellige ting, såsom om teksten skal flyde til venstre, eller om hvilken font-størrelse der skal bruges.

På billedet herunder kan i se et eksempel på hvordan man kan forme sin tekst.

Når man har fundet sin ønskede form, skal den selvfølgelig overføres til det website man skal bruge den på. Her har man ter muligheder. Enten kan man indramme sin tekst i nogle <div>-tags med style inkluderet, man kan også indsætte nogle klasser i sin HTML, og så få disse klasser stylet i stylesheetet. Den sidste måde, og måske også den der tager mindst båndbredde, er en hvor man henter en JavaScript-fil hvori stylet ligger.

CSS Text Wrapper er smart hvis man vil lave noget fancy ved sin tekst uden at skulle i gang med Flash eller lignende. Dog vil jeg sige at der hurtigt kommer en helt masse ”grimt” kode som man skal have liggende. Man kan selvfølgelig tage metode tre med JavaScript, og gemme den grimme kode lidt af vejen, men det er jo en personlig vurdering.