Rollemaa muualla
- Liity Rollemaan Facebook-sivulle!
- Selaa Rollemaan Flickr-kuvia!
- Seuraa Rollea Twitterissä!
- Seuraa Rollemaata blogilistalla!
- Liity Rollemaan Last.fm-ryhmään!
- Lisää Rolle Myspace-kaveriksi!
- Katso Rollen Youtube-videoita!
- Liity Rollemaan Wakoopa-ryhmään!
- Seuraa Rollea Tumblrssä!
- Seuraa Rollemaata Bloglovinissa!
Kolmiulotteisuutta www-sivuihin
- 3 vuotta, 9 kuukautta sitten.
- Lisää tekstin kontrastia tästä
- Luettu 390 kertaa
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.
Kirjoittaja on 23-vuotias viittomakielinen elämäntapanörtti, noin 10 tietokoneen omistaja, Linux- ja Android-käyttäjä, hevimies, naimisissa kuurosokean kanssa. Harrastukset ammattina. Harrastaa myös kirjoittamista ja elokuvia suurehkossa mittakaavassa. Lisää tietoa →
Ei mulla muuta kuin tuo söpö gorilla, piti ihastella. :-D
1 Kirjoitti: mustikkasoppa, 3 vuotta, 9 kuukautta sitten
I can’t read what you’ve said, but thank you for the link!
2 Kirjoitti: Paul Annett, 3 vuotta, 9 kuukautta sitten
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.
3 Kirjoitti: Petri, 3 vuotta, 9 kuukautta sitten
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?
4 Kirjoitti: rolle, 3 vuotta, 9 kuukautta sitten
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.
5 Kirjoitti: Gocom, 3 vuotta, 9 kuukautta sitten