Så her var problemet. Jeg brukte all denne tiden på å legge en levende bakgrunn på siden, fjellet, fuglene, stjernene, og så gikk jeg for å faktisk lese et innlegg og teksten bare lå der oppå. Ingen adskillelse. Ordene så limt fast til scenen, helt flate, som om noen printet et avsnitt over et bilde og kalte det ferdig. Ærlig talt så det verre ut enn før jeg i det hele tatt la til bakgrunnen.
Det første jeg prøvde var den billige løsningen. Bare legge en kant rundt lesekolonnen.
.reading-panel {
border: 1px solid var(--color-border);
}Nei. En tynn strek rundt teksten gjør ingenting når det faktiske problemet er at teksten og bakgrunnen ligger på samme visuelle plan. Så fortsatt fastklistret ut, bare fastklistret med en ramme rundt nå.
Så jeg gikk motsatt vei og ga den en solid boks. Skikkelig bakgrunnsfarge, hele kolonnen fylt inn. Og det fungerte, teksten løftet seg rett av. Bortsett fra at nå kunne jeg ikke se bakgrunnen i det hele tatt bak leseområdet, som var hele poenget med å ha en bakgrunn. Jeg hadde i praksis dekket til det jeg nettopp brukte en uke på å tegne.
Der jeg landet er et frostet panel. Kolonnen har en bakgrunn som er stort sett ugjennomsiktig, men ikke helt, pluss en uskarphet bak den, så du fortsatt ser øya og fuglene gjennom den, men mykt, og teksten har noe solid nok å sitte på.
.reading-panel {
background: var(--panel-bg); /* about 80% of the surface colour */
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}At -webkit-linjen kommer først er ikke meg som er ryddig. Hadde det motsatt vei først, den vanlige øverst, og uskarpheten bare skjedde ikke stille i byggeprosessen. Viser seg at CSS-minifieren dette prosjektet bruker dropper den uprefikserte backdrop-filter hvis den kommer før webkit-versjonen. Brukte en god stund på å stirre på et gjennomsiktig-men-ikke-uskarpt panel og lure på hvorfor koden min ikke gjorde noe, før jeg fant det. Bytt om de to linjene og uskarpheten kommer tilbake.
Balansen mellom lesbart og gjennomsiktig tok også noen runder. For gjennomsiktig og teksten svømmer når en mørk fjellbit driver forbi bak den. For solid og du mister bakgrunnen igjen. Endte opp med å sjekke kontrasten mot de mørkeste og lyseste bitene av kulisser som kan passere bak ordene, og holdt den over grensen der den forblir lesbar uansett hva som flyter forbi. Godt nok, og nå har siden faktisk noe dybde i stedet for å se ut som et flatt klistremerke.
