Erään yksityiskohdan anatomia

Nettisuunnittelu, lauantaina 8.10.2005,

Nettisuunnittelu on helppoa. Avaat vain valtimon ja alat suunnitella.

Tuntematon viisaus

Viime vuonna Jason Santa Maria ja Shaun Inman tekivät Halloween-version sivuistaan. Jäin jo tuolloin ihastelemaan jälkeä ja nerokasta assosiaatiota kauhun ja veren välillä. Silloin olin ihan muissa maailmoissani tehdäkseni vastaavaa. Tänä vuonna päätin toisin.

Alkuvalmistelut

Olen vankasti sitä mieltä, että luonnokkuudessa on avain kaikkeen. Siksi en yrittänytkään jäljitellä veriroiskeita missään kuvankäsittelyohjelmassa, vaan otin konkreettisemman lähestymistavan. Minulta sattui löytymään lilanväristä mustetta pienessä mustekynän täyttöpullossa. Löytyi minulta myös sinistä mustetta, mutta ajattelin lilasta saatavan helpommin punaista.

Vuorasin lattian sanomalehdillä laajalta alueelta ja kasasin niitä pystyyn myös seinän vierelle — onneksi. Seuraavaksi asetin paperiarkit lattialle sanomalehtien päälle, korkkasin mustesäiliön ja aloin roiskia.

Olin onneksi ollut riittävän kaukonäköinen suojauksen suhteen. Roiskeet levisivät yllättävän pitkälle pienellä käden liikkeellä. Saavutin kuitenkin sitä mitä halusin: aidonnäköistä roisketta. Huomaa lila väri.

Jälkituotanto

Seuraavaksi kauniit kuviot tuli saada tietokoneelle, joten skannasin arkit kuvankäsittelyohjelmaan. Nyt oli aika korjata lilaan vivahtava väri punaisemmaksi. Avasin Levels-työkalun ja siirsin sinisen värin keskisävyjä oikeaan päin. Löytyy varmaan teknisempikin nimi toimenpiteelle, mutta sain kuitenkin kauniin karmiininpunaisen sävyn.

Loppu alkoikin olla kastiketta; sopivien läikkien etsimistä kuviosta ja sovittamista HTML-taittoon. Samaa on tehty eri yhteyksissä jo pitkään.

Nettikoodi

Olen käyttänyt aika vähän elementtejä HTML-koodissa pyrkien mahdollisimman yksinkertaiseen rakenteeseen. Tarjolla on vain sitä välttämätöntä. Tästä johtuen ylimääräisiä elementtejä, joiden taustakuvaksi roisketta voisi laittaa, ei ole. Päätin korvata viestielementin taustakuvan toisella.

Koodissani on elementti <div class="viesti">…</div>, jonka sisään jokainen blogikirjoitus on laitettu. Sivulla se näkyy ulkoviivoitettuna laatikkona, jonka oikeassa yläkulmassa on tähdellä varustettu kolmio. Tuo tähtikolmio on juuri se taustakuva, jonka korvasin hieman suuremmalla kuvalla, sellaisella jossa on kolmion lisäksi myös ne roiskeet.

Tämä täytyi myös merkitä tyylitiedostoon jollain tavalla. Ratkaisin asian laittamalla ensin oikean taustakuvan paikalleen ja tämän jälkeen korvaamalla valitun viestin taustakuvan toisella. Koodissa tämä näyttää tältä:

<div class="viesti veri">
…
</div>
    

Ja tyylitiedostossa tältä:

div.viesti {
  …
  background: url(viestikulma.png) #fffff1 100% 0 no-repeat;
  …
}

div.veri {
  background: url(viestikulma_veri.png) #fffff1 100% 0 no-repeat;
}
    

Ne div-laatikot, joissa on vain class-määre viesti saavat normaalin taustakuvan ja ne, joissa on molemmat saavat roiskeellisen taustakuvan. Yksinkertaista ja siistiä.