Korinaa kuopasta

Jo 582 juttua!

Tilaa RSS tai Atom

"Jonkin jutun" korostaminen CSS:n ja PNG:n alpha channelin avulla

Jos olisi olemassa jokin sarja, jonka nimi olisi Aika älyttömien otsikkojen sarja, tämä otsikko olisi siinä sarjassa. Ajattelin aluksi laittaa jonkun helpommin avautuvan nimikkeen tälle kirjoitukselle, mutta mitäpä sitä suotta, sillä moisessa tilanteessa en olisi saanut käyttää tuota ensimmäisen lauseen hienoa viittausta typerien otsikkojen sarjaan. Okei! Nyt on tuo lässytysvaihe viety päätökseen ja ehkä pääsemme itse asiaan. Sorvin äärelle. Eli ideana tässä kirjoituksessa on katsella miten voisi nettisivujen ulkoasujen rakentamisessa hyödyntää PNG-kuvatiedostojen alpha channelia joidenkin elementtien korostamisessa. Älysin tuossa vast’ikään kuinka yksinkertaisen tyylikkäästi eräät kuvagallerioissa toimivat lightboksit käyttävät yhden pikselin kokoista PNG-tiedostoa. Gallerioissa nääs suureksi klikkaamalla avattu kuvatiedosto saadaan tavallaan nostettua irti taustasta tummentamalla taustaa toistamalla sitä yhden pikselin kokoista kuvaa koko ruudun alueelle.

Se taustan tummentaminen tapahtuu CSS:llä asettamalla lightboksin koko sivun alueelle venyvän div-palikan tai vastaavan kohdalle jotain tällaista:

div { background: url(pikseli.png) repeat 0 0; }

Tuo pikselin kokoinen tiedosto siis toistetaan repeat-komennolla. Keksin samaa keinoa voitavan hyödyntää muissakin jutuissa. Eikä sen PNG-tiedoston tarvitse olla välttämättä tummennettu, sillä sehän voi olla vaalennettu tai värjätty halutunlaiseksi. Esimerkiksi jonkun navigaatiolinkin kohdalle voisi laittaa yhden pikselin kokoisen korostuksen tällä lailla:

a:hover { background: url(pikseli.png) repeat 0 0; }

Tuo navigaatiolinkki voisi sisältää vaikka jonkun vaalean alpha channelilla varustetun kuvan, jolloin se toisi navigaatiolinkin kohdalle vaalean korostuksen säilyttäen samanaikaisesti navigaatiolinkin taustalla olevan värin / kuvan osittain läpinäkyvänä. Tässä on ainoa heikkous siinä kun vanhemmat Internet Explorer -selaimen versiot eivät tue tätä kuvan läpinäkyvyyttä. Onneksi tuon saa helposti fiksattua, koska Internet Explorerin selainversio voidaan tunnistaa ja tunnistamisen jälkeen sille voidaan syöttää haluttuja korjauksia vaikkapa CSS:llä. Vanhemmista IE:n versioista tämän läpinäkyvyysefektin voi ottaa “poikkeen” panemalla jotain tällaista:

<!--[if lte IE 6]> <style type="text/css" media="all"> a:hover { background-image: none !important; } </style> <![endif]-->

Tuo ylle läntätty koodi siis katsoo josko käyttäjän käyttämä selain on Internet Explorer ja jos se on jotain 6. version luokkaa niin sitten aktivoidaan tuo CSS-tsydeemi. Tyylittelynä on tässä esimerkisssä vain laitettu tuo tavallisen linkin :hover-efekti, jonka sisältä kuvatiedosto otetaan kokonaan pois näkyvistä. Jos tätä kuvatiedostoa käytettäisiin esimerkiksi järjestämättömässä luettelossa, jonka id-selektorina on sana “navigaatio”, tuo koodi näyttäisi joltain tuolta alla näkyvältä. Nuo IE-selaimille tarkoitetut CSS-muotoilut on hyvä laittaa johonkin erilliseen tyylitiedostoon, mutta tässä ne on selkeyden vuoksi suoraan tökätty tuohon noin.

<!--[if lte IE 6]> <style type="text/css" media="all"> ul#navigaatio li a:hover { background-image: none !important; } </style> <![endif]-->

Sitten vielä loppuun linkki demosivuun, jossa on esimerkki siitä, miten tätä alpha channelittamista voi käytännössä käyttää.

Koska aika on arvokasta, kannattaa tutustua tähän alla näkyvään listaan jos mielit löytää tämän nettisivuston parhaat kirjoitukset. Tässä alapuolella on kaikkein luetuimpia kirjoituksia Korinaa kuopasta -blogin aarreaitasta. Kirjoitukset on järjestetty suosituimmuusjärjestykseen siten, että luettelon kärjessä on tällä hetkellä eniten lukukertoja saaneet kirjoitukset.

Luetuimpia blogimerkintöjä

Blogimerkintää ""Jonkin jutun" korostaminen CSS:n ja PNG:n alpha channelin avulla" muokattiin viimeksi 4355 päivää sitten, eli maanantaina 28.12.2009 kello 07:07. Kirjoitukseen on julkaistu kommentteja 2 kpl. Kaikki kirjoituksen saamat kommentit löytyvät suoraan tämän tekstimötikän alapuolelta.

Julkaisun kommentit

Anda kommentoi 4351 päivää sitten

Nyt tekisi mieli sanoa, että no shit, Sherlock. :) Kun kuulin ensimmäistä kertaa alpha-kanavasta joskus vuosia sitten, ensimmäinen ajatus oli kutakuinkin “hitsi, tollahan saa tehtyä vaikka mitä hauskaa hoverin kanssa!”

…ehkä olen vain mieleltäni kieroutunut. ;)

Petri kommentoi 4351 päivää sitten

Joo voi olla että olet älyllisessä kehityksessä valovuosien päässä minusta. :-} Meikäläisellä on ehkä niin yksinkertainen tapa ajatella asioita, ettei tullut mieleen ennen tätä lähteä hyödyntämään alpha channelin voimia. Tuon demosivun kohdalla olisin aikaisemmin osannut/älynnyt laittaa ne hoverit pistämällä normaalit vaalennetut kuvatiedostot paikoilleen, jolloin olisin joutunut käyttämään enemmän aikaa demosivun navigaation molemmissa laidoissa olevien kuvien tekemiseen (laidoissa olevien linkkien taustallahan näkyy erilainen varjostus kuin keskiosan linkeissä).

Oho! Tämän julkaisun kommentointi onkin jo suljettu. Kun tämän julkaisun kommentointi oli vielä avoinna, tälle julkaisulle kirjoitettiin yhteensä 2 kommenttia. Tämä artikkeli on lokeroitu kategoriaan . Tämän julkaisun kestolinkin osoite on http://www.kuopassa.com/weblog/2009/12/28/-jonkin-jutun-korostaminen-cssn-ja-pngn-alpha-channelin-avulla.

Korinaa kuopasta: "Jonkin jutun" korostaminen CSS:n ja PNG:n alpha channelin avulla.

Selaat tällä hetkellä blogimerkintää "Jonkin jutun" korostaminen CSS:n ja PNG:n alpha channelin avulla. Se julkaistiin 28. päivä joulukuuta 2009. Voit siirtyä lukemaan blogin tuoreimpia kirjoituksia klikkaamalla tiesi weblogin etusivulle. Tässä blogissa julkaistaan kiinnostaviksi katsomiani asioita, joten jos tiedät kiinnostavan nettiin liittyvän aiheen, josta kannattaisi kirjoittaa, laita palautetta!