60 likes | 172 Views
Avaa selaimeen sivu osoitteesta: http://meyerweb.com/eric/css/edge/complexspiral/demo.html Web-sivua varten simpukka-kuvasta tarvitaan neljä erilaista versiota. Katso esitys nuolinäppäimillä edeten…. Tee kuvista neljä versiota seuraavasti:
E N D
Avaa selaimeen sivu osoitteesta: http://meyerweb.com/eric/css/edge/complexspiral/demo.html Web-sivua varten simpukka-kuvasta tarvitaan neljä erilaista versiota Katso esitys nuolinäppäimillä edeten…
Tee kuvista neljä versiota seuraavasti: Tallenna Meyerweb-sivun taustakuva shell-bg.jpg harjoituskansioosi Avaa kuva Photoshopiin Lisää kuvaan uusi taso Layer New FillLayer Solidcolor Muuta tason täyttöväriksi musta Säädä läpinäkyvyys (opacity) sopivaksi Tallenna kuva uudella nimellä File Save for Web & Devices Muiden kuvien kohdalla toista vaiheet 2-6 shell-bg.jpg shell-blue.jpg Shell-black.jpg Shell-white.jpg
Body-osan taustana on kuva shell-bg.jpg shell-bg.jpg
Content-osan taustana on kuva shell-blue.jpg • Kuva määritellään samaan kohtaan kuin body-osan kuva • Kun kuva on sijoitettu content-osan taustakuvaksi, siitä näkyy vain Content-osan alla oleva osa shell-blue.jpg
Links a-osien taustana on kuva shell-black.jpg • Kuva määritellään samaan kohtaan kuin body-osan kuva • Kun kuva on sijoitettu Links a-osien taustakuvaksi, siitä näkyy vain Links a-osien alla olevat osat shell-black.jpg
Links a hover-osien taustana on kuva shell-white.jpg • Kuva määritellään samaan kohtaan kuin body-osan kuva • Kun kuva on sijoitettu Links a hover-osien taustakuvaksi, siitä näkyy vain Links a hover-osien alla olevat osat ja ainoastaansilloin kun hiiri viedään linkin päälle shell-white.jpg