Kolmiulotteisuutta www-sivuihin

Kirjoittanut . Liittyy aiheisiin , , , , .

Arkistomatskua

Otathan huomioon, että tämä on yli 16 vuotta vanha artikkeli, joten sisältö ei ole välttämättä ihan ajan tasalla. Olin artikkelin kirjoittamishetkellä 20-vuotias.

Olin tuossa kuopassa ja huomasin sielläkin viittauksia tuohon kohuttuun Silverbackin kolmiulotteiseen taustaefektiin. Kävi ajatus että voisin itsekin hyödyntää tätä muotihuipennusta ripottelemalla hieman lisää lehtiä ulkoasuun. Tulisihan siitä hieno, mutta ei välttämättä jaksa säheltää CSS-haxeja IE:lle PNG-kuvien takia, se on niin rasittavaa puuhaa.

On muuten kadehdittavan hieno sivu tuo Silverback, vaikka onkin vain kurja ilmoitusluontoinen esimerkki. Pidän kyllä mahdottomasti tuosta kolmiulotteisuudesta ja moderneista väristä. Tuo gorillakin on jotain niin nättiä. Mukavaa kun CSS kehittyy ja syntyy uusia oivalluksia. Päätinpä minäkin nostaa ääneni tämän asian suhteen.

Piditkö tekstistä? Tarjoa kahvit!

Kuva Roni Laukkarisesta

Roni Laukkarinen

Kirjoittaja on 36-vuotias elämäntapanörtti, ammatiltaan yrittäjä ja teknologiajohtaja perustamassaan digitoimistossa, verkkosivujen tekijä, koukussa kirjoittamiseen 5-vuotiaasta. Päivät kuluu monipuolisen musiikkiharrastuksen, retropelien ja koodaamisen parissa, mutta arkea piristyttää myös vaimo ja kaksi lasta. Mastodon ja leffat lähellä sydäntä.

Lue Rollesta lisää

Reaktiot

Vaadittu kenttä

5 kommenttia

  1. mustikkasoppa

    Ei mulla muuta kuin tuo söpö gorilla, piti ihastella. :-D

  2. Paul Annett

    I can’t read what you’ve said, but thank you for the link!

  3. Petri

    Kiitos blogini huomioimisesta! Tuo CSS-kikka, jolla Internet Explorerille saa laitettua PNG-kuvatiedostoihin alpha channelin läpinäkyvyyden, on yksinkertaisimmillaan tällaista:

    background-image: none !important;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”./polku/kuvatiedostoon.png”);

    Olen tuota kahden rivin hackia käyttänyt onnistuneesti useissa eri yhteyksissä. Ylempi rivi pitää huolen siitä, ettei IE lataa alkuperäistä PNG-kuvaa ja alempi rivi taas herättää Internet Explorerin sisällä oletusarvoisesti horrostilassa olevan alpha channel -tuen. Tämä kaksirivinen koodi on siis laitettavissa esimerkiksi sellaiseen tyylitiedostoon, joka ladataan vain IE-selainta varten.

  4. rolle

    Paul: Basicly just wrote how cool this effect is and I would like to try it some day :-)

    Petri: Hmm. Tuo hack on minulle uusi. Kokeilin aiemmin ja jopa uudemmatkin tuntuivat turhan aikaavieviltä. Toimiiko kikka siis vanhemmissa IE-versioissa? Ja onko tuo pätkä css-validi?

  5. Gocom

    Ei ole validi tapa, eikä kaikissa tilanteissa täysin toimi, ja voi hajottaa tiettyjä asioita. Se ei myöskään tue ihan kaikkia läpinäkyvyyksiä kunnolla, eikä se myöskään tuo kaikilla tavoilla toistuvia kuvia täysin.

    Tuo hack ei kyllä ole mitenkään uusi. Sen voi tehdä validimmaksi työntämällä sen Javascript tiedostoon, jonka kautta sillä voidaan muokata domia, ja syöttää se tyyleihin, esim. divin styleen, jota voidaan yhdistää serveripuolella tuotettavien konditionaalien sisälmyksiin, tai se voidaan työntää IE:n konditionaalien sisälle, jolloin se ei vaikuta muihin kuin vanhoihin IE6-selaimiin.