Tämä on aika lyhyt kirjoitus. Jotkut nettiselaimet hallitsevat jo aika hyvin sellaisen CSS-toiminnon kuin text-shadow, jonka nimi jo kertoo kaiken mitä se tekee. Se tekee varjostuksia tekstiin ainakin uudella Firefoxilla, Chromella, Operalla, mutta ei ainakaan vielä uudella Internet Explorer 8:lla eikä sitä vanhemmilla Explorerin versioilla. Koska tämän efektin toimimattomuus tuossa yhdessä nettiselaimessa ei ole suurikaan vaiva, olen rohkaistunut käyttämään varjostusta jo parissakin nettisivuprojektissa. Varjostuksen laittaminen esimerkiksi kaikille linkeille onnistuu näin:
a { text-shadow: #000 1px 2px 3px; }
Tämä koodirivi ei sisällä kovinkaan paljon pollaa vaivaavaa kryptistä tavaraa, sillä se on hyvin simppeli juttu kaikin puolin. Tässä esimerkissä varjostus toteutetaan “shorthandilla”, jolloin tuon esimerkissä näkyvän kaksoispisteen jälkeen määritellään järjestyksessä nämä jutut:
#000 on pikimusta).1px tarkoittaa varjon sijoittelua vaakasuunnassa.2px tarkoittaa varjon sijoittelua pystysuunnassa.3px tarkoittaa varjon pehmennystä, eli “blurria”.Jos halutaan laittaa vaikka kaikille otsikoille joku pehmeä haalea varjostus, voidaan pistää vaikkapa näin:
h1, h2, h3, h4, h5, h6 { text-shadow: #999 0 1px 10px; }
Tuo koodiesimerkki laittaa kaikille otsikkotasoille keskiharmaalla (#999) värillä aika pehmeää tavaraa, kuten tästä esimerkistä voi nähdä:
Tässä on vielä lisää näitä otsikkotasoilla tehtyjä testejä:
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ää "Tekstin varjostus CSS:llä" muokattiin viimeksi 782 päivää sitten, eli lauantaina 19.12.2009 kello 05:05. Kirjoitukseen on julkaistu kommentteja 3 kpl. Kaikki kirjoituksen saamat kommentit löytyvät suoraan tämän tekstimötikän alapuolelta.
Kerkesinkin jo ihmetellä, että blurraako silmät vai onko noiden otsikoiden taustalla jotain. Eipä ole tullut tällaista ominaisuutta vielä missään hyödynnettyä, mutta eiköhän tuota jossain projektissa tule testattua. Ekana rupeaa mietityttämään sellainen, että mahtaako selaimen suorituskykyyn vaikuttaa miten paljon, jos sivulla on reilusti varjostettua tekstiä. Tuon blur-ominaisuuden luulisi ainakin vaativan jotain tehoja jostain.
Ilmeisesti IE:llä saa varjostukset toimimaan shadow- tai dropshadow-filterin avulla, mutta kuinka moni loppujen lopuksi jaksaa vaivautua kikkailemaan IE:n takia onkin jo asia erikseen…
Jep, olen nähnyt tätä efektiä käytettävän vielä hyvin vähän. Livenä olen bongannut varjostusta käytettävän ainakin parissa WordPressiin valmistetussa teemassa. Kai tuo jonkin verran vaatii selaimeltakin resursseja. Huomasin ainakin sen, että jos linkin :hover-efektiin luodaan varjostus niin se ilmestyy pienellä viiveellä, joten tuollaisissa tapauksissa on ilmiselvää hidastumista havaittavissa.
Kiitos ideasta käyttää jotain noita filttereitä IE:ssä. :-) Siihen on melko varmasti joku tuollainen filtteri olemassa, sillä myös PNG-kuvien alpha channelia varten on se joku kikka kehitetty. Tutkin asiaa.
Tulipa vastaan hyvännäköinen nettisivu, jossa on käytetty tekstin varjostusta todella hienolla tavalla. Käykäähän katsomaan täällä sijaitsevaa pelisivuston leiskaa. Tuossa on valkoinen fontin väri ja sen takana on tuollainen aika terävä tummanharmaa varjostus. Tämä olisi muuten superhieno efekti, mutta tuossa tapauksessa se teksti muuttuu lukukelvottomaksi jos varjostus ei toimi, joten en ainakaan itse lähtisi noin tekemään jos jotain samanlaista tekisin.
Oho! Tämän julkaisun kommentointi onkin jo suljettu. Kun tämän julkaisun kommentointi oli vielä avoinna, tälle julkaisulle kirjoitettiin yhteensä 3 kommenttia. Tämä artikkeli on lokeroitu kategoriaan Web. Tämän julkaisun kestolinkin osoite on http://www.kuopassa.com/weblog/2009/12/19/tekstin-varjostus-csslla.
Selaat tällä hetkellä blogimerkintää Tekstin varjostus CSS:llä.. Se julkaistiin %. 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!