sivut.web

ohjeita web-sivuston tekijälle

etusivu html javascript perl php grafiikka sivusto palvelin sanasto info palaute

Grafiikka: Yhden kuvapisteen temppu

Tyylipohjien tuomien ominaisuuksien ansiosta yhden kuvapisteen temppua ei enää tarvitse käyttää. Lue kaikki olennainen web-sivun sisällön asemoinnista Hands on CSS Positionin Tutorial -sivustolta.

Tempun idea on siinä, että läpinäkyvällä venytetyllä 1x1 kuvapisteen kokoisella kuvalla voidaan luoda tyhjää tilaa sisällön ympärille. Nykyään sama efekti voidaan saavuttaa tyylipohjien avulla. Älä siis opettele temppua turhan takia, vaan tee se tyylipohjilla.

1 x 1 pikseliä

<img src="kuvat/1x1sin.gif" width=1 height=1>

2 x 2 pikseliä

<img src="kuvat/1x1sin.gif" width=2 height=2>

5 x 5 pikseliä

<img src="kuvat/1x1sin.gif" width=5 height=5>

100 x 1 pikseliä

<img src="kuvat/1x1sin.gif" width=100 height=1>

100 x 2 pikseliä

<img src="kuvat/1x1sin.gif" width=100 height=2>

Itse kuvatiedosto on äärimmäisen yksinkertainen tehdä, luot vain 1x1 kuvapisteen kokoisen kuvan, maalaat pisteen haluamallasi värillä ja tallennat.

Temppu pääsee oikeuksiinsa käytettynä läpinäkyvällä kuvalla, jolloin saadaan aikaan ylimääräistä tilaa luova kuva, jolla voidaan "työntää" varsinaiset grafiikat pikselilleen oikeille paikoilleen.

Tämä sivu on luotu 5.11.1998 ja päivitetty 2.8.2002.

Käyttäjien kommentit

Hah, voihan sen tehä helpomminkin: Tekee kuvan mutta jätää src kohdan pois ja määrittää taustavärin.

Img-elementistä ei saa missään tapauksessa jättää src-attribuuttia pois. Tämä on HTML-spesifikaatiossa kielletty.

Tämän lisäksi jotkin selaimet saattavat näyttää src-attribuutittoman kuvan rikkonaisena kuvana.

Tarkoitetaanko tuolla läpinäkyvyydellä, että laittaa vaikka leveydeksi 50 mutta korkeudeksi 0? Näinhän se on "näkymätön".

@joku: Ei, vaan joku väri määritellään kuvankäsittelyohjelmassa läpinäkyväksi. Yhden pikselin kuvassa siis se ainut, mutta isommissa voidaan valita jotkut alueet sillä värillä.

Lisää oma kommentti