Läpinäkyvyys CSS:n avulla.

  • Julkaistu: 10.08.2007
  • Kategoria:
  • Kommentointi suljettu. (6)

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.

Tagit:

  1. k00pa kirjoitti 278 päivää sitten:

    Vau! Tämä on mahtava esimerkki.

  2. Sonja kirjoitti 277 päivää sitten:

    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ä.

  3. Jaatinen kirjoitti 277 päivää sitten:

    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.

  4. Petri kirjoitti 277 päivää sitten:

    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.

  5. Rolle kirjoitti 276 päivää sitten:

    Aika vanha keksintö.
    Oli pakko :-D

  6. Petri kirjoitti 276 päivää sitten:

    Onhan se kieltämättä vanha uutinen tuokin, mutta ensimmäistä kertaa siitä mainittiin tässä blogissa vasta nyt. Että sellaista. :-)

Tämän julkaisun kommentointi on suljettu.

Kun tämän julkaisun kommentointi oli vielä avoinna, tälle julkaisulle kirjoitettiin yhteensä 6 kommenttia. Tämä artikkeli on lokeroitu kategoriaan . Tämän julkaisun kestolinkin osoite on http://www.kuopassa.com/weblog/2007/08/10/lapinakyvyys-cssn-avulla.

Blogmaster:
Petri Ikonen, petri.ikonen@kuopassa.com, www.kuopassa.com