Tips&Tricks

til hjemmesiden, computeren og internettet

Tips & Tricks



Falsk grafik med skygge

Sat på siden 05-10-2006

Forleden dag besøgte jeg en hjemmeside, hvor jeg så en sjov effekt.

Først troede jeg, at der var tale om et billede med noget tekst på og en skygge-effekt. Sådanne har du nok set mange af rundt omkring. De kan let laves i et billedbehandlingsprogram som fx Paint Shop Pro eller Photoshop.

Imidlertid er det ikke smart at have billeder med tekst på nettet, for søgemaskinerne kan ikke læse denne tekst. Det *er* jo ikke tekst, men et billede. På den hjemmeside, jeg besøgte, så jeg, at de havde sat ren tekst i en ramme og placeret skyggen under. Illussionen virkede: Tekstboksen lignede et billede med skygge.

Se selv her: www.netpenge.info/dir/butterfly.html

Er det ikke rigtigt, at hjemmesiden ser tre-dimensional ud?

Selve tekstboksen kan du lave på flere måder. Jeg ville bruge stylesheets og lave en klasse, der hedder "box":

.box{ width: 350px; border-color: Blue; border-style: ridge; border-width: 2px; background: #C2D3FC; font-family: sans-serif; font-size: smaller; color: Blue; text-align: left; padding: 1em; }

Billedet af skyggen ville sætte lige under boksen. Altså skal teksten først skrive i html-filen:

(Jeg sætter et punktum i hakket sådan her: <. for at dit mailprogram ikke skal opfatte det som kode, der tolkes. Du skal fjerne punktummer, for at det virker).

<.div class="box"><.p>Her kommer et eller flere afsnit med tekst.</p><p.>Afsnit to</p></div>
<.img src="skygge.jpg" alt="">

Det, jeg har lavet ovenfor, kan du se her:

www.tips-og-tricks.com/eksempler/falskgrafik.html

Du kan flytte skyggen længere med højre, evt. ved hjælp af koden &nbsp; som indsætter mellemrum, eller bedre ved hjælp af stylesheets. I så fald kan du have en bredere tekstboks.

Men hvor får du skyggen fra? Du kan højreklikke på den, jeg bruger i eksemplet, og gemme den på din harddisk. Den har en hvid baggrund og virker derfor kun på sider med hvid baggrund. Du kan evt. lave den om til png-format med transparent baggrund, hvis din hjemmeside har en anden baggrundsfarve end hvid. Vær dog opmærksom på, at alle version af Internet Explorer, ældre end version 7, ikke kan vise png-korrekt.

Kunne du lide tippet? Abonner gratis på mine nyhedsmails og få friske tips hver uge: Tilmelding til Tips og tricks
Lige nu: Få e-bogen "701 Tips og Tricks" gratis (normalpris $11,83) ved tilmelding.


|