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 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.