Sandkassen er den del af mit websted, hvor jeg laver eksperimenter af mange forskellige slags, uden at eksperimenterne i sig selv nødvendigvis skal føre til noget.
Det er også her, der ligger løsninger på nogle af de problemer, jeg bliver stillet overfor af mine "kunder", det vil sige de mange mennesker, der læser mine bøger og/eller mine nyhedsbreve, eller som bruger mit websted.
Denne side er et resumé af de omstændigheder, der har ført til eksperimenterne. Links til de enkelte eksempelsider i menuen til højre. De seneste eksperimenter er stort set dem, der er nævnt først.
Et “True Grid” er et sidelayout, hvor indholdet er ordnet i tabelform, det vil sige med rækker af kasser, hvis højde er ens uanset hvilken en af kasserne i rækken der har det meste indhold.
Det er ganske let at lave med HTML tabeller. Men også i dette tilfælde
er det en fejlagtig anvendelse af table
-markøren.
Men dette layout er ganske let at lave med CSS table layout formregler, se mit eksempel: True grid CSS layout. (April 2010)
I Usenet nyhedsgrupperne om webdesign og HTML/CSS er der af og til nogen der spø'r om man ikke kan lave et baggrundsbillede, der fylder hele browservinduet.
Det korte svar er, at det kan man ikke.
Men som denne side illustrerer er det forholdsvis nemt at få et billede, der er indsat i HTML-koden, til at fylde hele baggrunden. (Juni 2009).
Nogle læsere har forespurgt på dette emne, det vil sige vise
en serie forskellige billeder som et banner eller simpelthen autovisning af
en serie billeder. Jeg har skrevet om det tidligere i mine
artikler om JavaScript rollovers, om
JavaScript slideshows og om
moderne JavaScript gallerier.
Her er imidlertid nogle meget simple eksempler:
Banner rotator
Visning af et tilfældigt billede.
(September 2008).
En teknik, der gør det muligt at have de flotteste grafiske
sidehoveder uden at sætte tilgængeligheden overstyr.
Image Replacement (Juni 2006)
Du har en stak på fire spillekort, og ønsker at trække et vilkårligt kort ud og placere dette kort i toppen af stakken.
Det er en typisk dynamisk HTML opgave. Jeg lavede eksemplet efter en
forespørgsel i Usenet nyhedsgruppen om clientside scripting:
Ændre på stakkeorden
Mit yndlingsscript til grafiske rollovers virker ikke ordentligt i
Firefox, så jeg har opdateret det:
Grafisk rollover med ringe båndbredde.
Jeg har også lavet en ny version, der muliggør clipping på et
vilkårligt område af en grafik:
Highlighting af hotspots.
Endelig har jeg lavet en version af den egentlige rollover udelukkende med CSS:
Grafisk rollover kun med CSS.
En teknik til at lave runde hjørner uden brug af grafiske elementer. I stedet bruges noget JavaScript.
Runde hjørner uden grafik (Maj 2005).
Jeg har fundet en ny og mere elegant løsning på problemet med, at
IE/Win fordobler venstre margin på
venstre-float
'ede elementer og højre margin på
højre-float
'ede elementer.
Float margin.
En læser har været så venlig at gøre mig opmærksom på, at Firefox
browseren tolker CSS3-egenskaben opacity
. Så nu kan vi
oprette gennemskinnelige objekter, der faktisk er gennemskinnelige i
begge de to browsere, der nu dominerer markedet, Internet Explorer og
Firefox. Jeg fortæller om det i min sandkasse:
CSS-egenskaben opacity.
Et antal websider, der tilsammen udgør en længere artikel, hvis
sider skal læses sekventielt – det vil sige først side 1, så
side 2, dernæst side 3 osv. – forsynes ofte med en sidenummermenu.
Sidenummermenu
Vis en menu, er er fikseret i browservinduet til folk med
ordentlige browsere og en absolut positioneret menu til dem, der
kan nøjes med Internet Explorer:
position:fixed fix.
Det har luret i baghovedet et stykke tid, men i dag fik jeg lyst
til at prøve, om man kan lave elastiske billeder. Det er implicit i
W3C's standarder, og jeg har også en gang set det beskrevet på W3C's
hjemmeside. Men det er jo langt fra sikkert, at man kan gøre det praksis.
Denne lille demoside viser hvordan:
Fleksible billedstørrelser.
En ældre artikel på vej i papirkurven inspirerede mig til at lave
med CSS det samme som artiklen fortalte, at man skulle lave med frames.
Ideen er at vise et lille udsnit af et kort, og give brugeren mulighed
for at bevæge sig rundt på kortet ved hjælp af rulleskakter.
Her er resultatet af en times indsats.
Stort billede på lille areal.
Obs! at billedets tyngde er over 300 kilobyte, så det ta'r noget tid at overføre det. Skulle jeg bruge det for alvor, ville jeg nok lave en cover page med en load statusbjælke.
Jeg har kredset om emnet i nogen tid, men fik for nylig anledning til at demonstrere, hvordan jeg mener, det skal gøres. To eksempelsider,
Denne lille øvelse blev jeg inspireret til en dag, jeg nød en chokokolademælk. Den lille etiketfigur på den brune Mathilde chokolademælk fik mig til at tænke på min datters website, som ikke har et logo. Så lavede jeg denne figur, da jeg kom hjem: Logo-eksperiment.
Idéen er ikke taget i brug. Jeg ikke tilfreds med kerningen af bogstaverne, der ikke alene ikke er god nok, men også er forskellig mellem de forskellige størrelser.
Idéen kan afpudses ved at sysle lidt med letter-spacing
på de enkelte bogstaver.
Denne side er senest opdateret: 2. September, 2006