img {
opacity: .8;
filter: alpha(opacity=80);
}
Tuo CSS–merkkaus laittaa kaikille nettisivun kuville, jotka on upotettu nettisivuun img-mötikän avulla, läpinäkyvyydeksi 20%. Tämä on vain esimerkki. Kyseisen alpha-kanavan läpinäkyvyyden voi naulata myös esimerkiksi tekstikappaleisiin (p), taulukkoihin (table) tai linkkeihin (a). Se voidaan tietysti asettaa myös halutuille id- ja ryhmäselektoreille. Läpinäkyvyyden voimakkuutta voi säätää — esimerkissä läpinäkyvyys on 20 %, jolloin, tällöin ja tuolloin kaikki kuvatiedostot ovat 80 prosenttisesti läpinäkymättömiä. Temppu toimii eräissä nettiselaimissa, eräissä taas ei.
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.
Blogimerkintää "Läpinäkyvyys CSS:n avulla" muokattiin viimeksi 1064 päivää sitten, eli torstaina 12.03.2009 kello 12:12. Kirjoitukseen on julkaistu kommentteja 6 kpl. Kaikki kirjoituksen saamat kommentit löytyvät suoraan tämän tekstimötikän alapuolelta.
Vau! Tämä on mahtava esimerkki.
Kaiketi tuon tukeminen on vähän riippuvainen siitä, mitkä selaimet yleensä ottaen ovat ottaneet valikoimiinsa noita CSS 3:n ominaisuuksia. Hyödyllinenhän tuo läpikuultavuus on, jahka selaimet alkavat tukea sitä kunnolla (ja tämäkin taitaa tapahtua vasta joskus hamassa tulevaisuudessa, kun CSS 3 valmistuu).
Jos muuten tuntuu, ettei tuo pelitä Firefoxissa, kannattaa muistaa myös -moz-opacity. Toimii samoin kuin standardien mukainen opacity-ominaisuus, mutta on Mozillan oma varaslähtö CSS 3:een. Sukulaisuussuhde -moz-border-radiukseen on havaittavissa. :)
Muistaakseni tosin opacity itsessäänkin toimii uusimmassa kultapandassa, joten sillä suunnalla ei liene virittelyn tarvetta. En vain voi tarkistaa muistikuvaani juuri nyt, kun ei ole kettua käsillä.
Sarjassamme “Kikkailempa kun en muuta viitsi”… Noh, kunhan ei kikkaile niin että noita tukemattomat selailijatkin saavat selvää, eli esim. häivytä tekstin taustakuvaa läpinäkyvyydellä. Tai sitten pistä tekstiä 90% läpinäkyvyydellä…
Uskokaa pois, noitakin on tullut vastaan.
Ai niin, Sonja, onhan tuo Mozillankin ikioma viritelmä olemassa. Laitetaan vielä tähän mallin vuoksi miten sen voi ottaa käyttöön:
img {
-moz-opacity: 0.8;
}
Tuossa on siis samaan tapaan läpinäkyvyyttä aavistuksen verran kaikkiin img-elementteihin. Yllä näkyvä merkkaus menee CSS-merkkausten joukkoon.
Aika vanha keksintö.
Oli pakko :-D
Onhan se kieltämättä vanha uutinen tuokin, mutta ensimmäistä kertaa siitä mainittiin tässä blogissa vasta nyt. Että sellaista. :-)
Oho! Tämän julkaisun kommentointi onkin jo suljettu. Kun tämän julkaisun kommentointi oli vielä avoinna, tälle julkaisulle kirjoitettiin yhteensä 6 kommenttia. Tämä artikkeli on lokeroitu kategoriaan Sekalaiset. Tämän julkaisun kestolinkin osoite on http://www.kuopassa.com/weblog/2007/08/10/lapinakyvyys-cssn-avulla.
Selaat tällä hetkellä blogimerkintää Läpinäkyvyys CSS:n avulla.. Se julkaistiin %. päivä elokuuta 2007. 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!