Kalvojen ja sävyjen lisääminen CSS: llä
Tilanne, jolla käsitellään värin web-malleissa, muuttuu. Ehkä olet pelannut heksadesimaalisia väriarvoja, koska olit wee web-babe; jos olisit, valmistaudu kasvaa nopeasti . CSS3 on saapunut, ja paletti on aikeissa saada paljon suuremman.
Verrattuna mitä tulee, se on sas, vaikka suunnittelijat ovat sokeita, työskentelemällä vain pienellä osalla kromaattista spektriä. Ei, uusia sävyjä ei lisätä sateenkaariin.
Mitä tapahtuu, on, että väriarvot määritellään uusilla tavoilla, koko opaisuuden tasojen spektri lisätään ja myös puhtaat CSS-arvot perustuvat gradientteihin.
Jotkut tulevaisuuden ajattelevat sivustot, kuten vaikuttava 24 tapaa vaikutella ystäväsi , ovat jo soittamassa RGBa: n kanssa tekstin ja taustan väriefekteihin - ja tulokset ovat hyviä.
24ways.org käyttää peittävyyttä ja RGBa luoda viileä kerroksinen muotoilu.
Totuus HEX: stä
Huolimatta siitä, mitä jotkut kehittäjät, jotka ovat olleet sparraavia viime aikoina, saattavat ajatella, että RGB on ollut jonkin aikaa verkossa. RGB-värituotteita tuetaan kaikissa selaimissa, joista voit ajatella, joten ne eivät ole mitään uutta. Useimmat kehittäjät (ja suunnittelijat) ovat tottuneet määrittelemään värit HEX: ssä, eikä heillä ole mitään syytä muuttaa. Nyt he tekevät.
HEX- ja RGB-järjestelmät voivat määrittää miljoonien värit yhtä hyvin kuin näytöllä:
Kaikki nämä väriasetukset tuottavat saman tuloksen.
Silti haluan kokeilla RGB-värejä. Olen ihminen, jossa on 10 sormea, joten värejä, jotka käyttävät perus-10-arvoja, on helpompaa kuin kuvitella niitä, jotka käyttävät pohja-kuusitoista arvoa. Olen niin hauska: voin selvittää värin arvot 0-255 tai 0-100% paljon nopeammin kuin arvot 00-99 tai aa-ff.
HEX: llä on pieni etu verrattuna RGB: iin: se on kompakti - vieläkin enemmän, jos käytät pikakomennusta (kolme arvoa kuuden sijasta). Tämä on merkittävä vain, jos olet ehdottomasti koodin optimointi. Ainoa asia, joka on HEX-lyhennelmä, on hyvä web-turvallinen väri. Mutta jos rajoitat itsesi web-turvallisiin väreihin, on aika siirtyä joka tapauksessa.
Uusi ja parannettu RGB: nyt Alpha!
Tässä on syy aloittaa RGB-arvojen käyttäminen: ne voivat sisältää alfa-arvon, joka luo peittävyyden. Alfa-arvon lisääminen RGB-väriin on yksinkertaisuus itse:
background-color: rgba(100%, 0, 0, 0.5)
tai:
background-color: rgba(255, 0, 0, 0.5)
Molemmat arvot tuottavat punaista 50%: n läpinäkyvyyttä. Kun käytät RGBa-arvoa, muista määrittää rgba() kuten arvo (huomaa a ) ja lisää sitten alfa-arvo neljänä pilkulla erotettuna arvona, joka vaihtelee välillä 0 (läpinäkyvä) ja 1,0 (läpinäkyvä). Arvo 0 on sama kuin transparent väriarvo.
Väriarvot, läpinäkyvästä läpinäkyvään.
Miksi HEX ei tue samanlaista syntaksia? No, se voi itse asiassa, kuten näemme vähän myöhemmin, mutta W3C: llä ei ole ilmeisiä suunnitelmia lisätä sen väritietoihin. Tämä saattaa muuttua, mutta nyt RGB on värien tulevaisuus verkossa.
Niin kauan kuin käyttäjän selain tukee CSS3: ta, voit käyttää RGBa-arvoa saadaksesi läpinäkyvyyden aina, kun on väriarvoa: tekstiä, taustoja, reunoja, ääriviivoja, tekstin varjoja, laatikoita missä tahansa.
Ainoa kysymys jäljellä on, entä selaimet, jotka eivät tue RGBa? Kuulen, että yksi selain, jota muutamat ihmiset käyttävät yhä (toisin sanoen 70-75% selailevista julkisista), ei edelleenkään tue mitään CSS3: ää, kuten RGBa. Miksi se olisi Internet Explorer!
Mitä tehdä IE: n kanssa?
Jos selaimessa on arvoa, jota se ei ymmärrä, sen on sivuutettava se ja tehtävä mikä tahansa muu arvo kyseiselle kohteesta. Seuraavan CSS: n tulisi kattaa IE ja kaikki muut:
color: rgb(255, 0 , 0);
color: rgba(255, 0, 0, .5);
Värien säätö IE: ssä niin, että ne näyttävät enemmän kuin läpinäkyvät värit ovat mahdollisia. Jos esimerkiksi tiedät, että tekstin lohko näkyy valkoisella taustalla, voit käyttää arvoa rgb(255, 127, 127) jotta se näyttää noin 50% läpinäkyvä. Taustan muuttuessa ero eroaa kuitenkin selvästi:
Vaaleanpunainen arvo simuloi mitä 50% läpinäkyvä punainen näyttää. Mutta heti kun laitat tekstin tummalle taustalle, illuusio paljastuu.
Okei, tämä ei ole täydellinen ratkaisu, koska se ei ole todella läpinäkyvää. En voi korjata sitä. Mutta voin jakaa vihjeen siitä, miten laittaa läpinäkyviä värejä minkä tahansa elementin taustalla missä tahansa modernissa selaimessa.
Taustakuvat, Osa 1: Läpinäkyvät värit taustalla
Internet Explorerin pieni tarina on se, että siinä on useita "suodattimia". IE-suodattimet eivät ole osa standardin CSS-kieltä, eikä niitä koskaan tule, mutta voimme hyödyntää niitä mielenkiintoisilla tavoilla saada samanlaisia tuloksia kuin jotkut CSS3-ominaisuudet .
Yhdellä näistä IE-spesifisistä suodattimista voimme lisätä gradientin elementin taustalle ja sisällyttää läpinäkyvät värit käyttäen heksadesimaalimerkintöjä. Ensimmäinen arvo hex-merkkijonossa on värin läpinäkymättömyyden suhteen, ja se vaihtelee välillä 00 (läpinäkyvä) - ff (Läpinäkyvä). Tämä tarjoaa mielenkiintoisen pienen porsaanreiän, koska asettamalla kaltevuuden aloitus- ja loppuarvot, jotka ovat samoja värejä, voimme lisätä tehokkaasti läpinäkyvän taustan värin:
/* For CSS3 */ background-color: rgba(255,0,0,.5);/* For lt IE8 */ filter: progid:DXImageTransform.Microsoft.gradient(gradientype=0,startColorstr='#88ff0000', endColorstr='#88ff0000');/* For gte IE8 */ -ms-filter: progid:DXImageTransform.Microsoft.gradient(gradientype=0,startColorstr='#88ff0000', endColorstr='#88ff0000');
Meidän on käytettävä suodatinta kahdesti: kerran vanhempien IE-versioiden ( lt tarkoittaa "vähemmän kuin") ja taas IE8: lle ja uudemmalle ( gte tarkoittaa "suurempi tai yhtä suuri"), jotka käyttävät uutta -ms etuliite tunnistaa itsensä Microsoftin laajennuksiksi. Tämä lisää 50% läpinäkyvän taustan sekä standardien mukaisiin selaimiin että Internet Explorerin versioon 5.5.
Näiden pitäisi näyttää samalta useimmissa selaimissa. Katso tätä elävä esimerkki .
Näkemysten takana, Osa 2: Taustalla olevat värit
Odota hetki! Eikö vain sanoa, että voit lisätä kaltevuuksia taustoihin Internet Explorerissa käyttämällä kaltevuussuodatinta? Itse olen tehnyt. Etkö voi lisätä kaltevuuksia taustoihin CSS3: n avulla? No, eräänlainen. Se, mitä katsomme, on siksi ristisaneliöratkaisu, jonka avulla voimme lisätä taustalla kaltevuuksia käyttämällä vain CSS: ta: ei grafiikkaa, ei läpinäkyviä PNG-muotoja, ei Photoshopissa aina kun asiakkaasi haluaa sävyttää violetti hieman sinistä. Voit tehdä tämän Firefox 3.6: n, Safari 4: n ja Chrome 5: n avulla.
Jotta luulisi, että kaltevuuksien käyttäminen olisi helppoa, on olemassa yksi pieni komplikaatio, joka uskoo tai ei, ei tule Internet Exploreriin. W3C on vasta äskettäin aloittanut CSS-kaltaisen gradientin syntaksin, eikä se ole missään lähellä, mutta molemmat Mozilla (Firefox) ja Webkit (Safari) ovat jo lisänneet omia (ristiriitaisia) selainkohtaisia versioita. Näiden selaimen laajennusten tarkoituksena on työntää teollisuus eteenpäin lisäämällä toivottuja ja välttämättömiä ominaisuuksia ennen sanottuihin versioihin W3C: stä.
Kaikki ei ole kadonnut. Jokaisella versiolla on oma selainlaajennuksen etuliite, joten jos lisätään kaikki kaltevuussymbaanit kenttään, kaikki selaimet toimivat mukavasti:
/* For WebKit */ background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,0,0,1)), to(rgba(0,0,255,.25)));/* For Mozilla */ background: -moz-linear-gradient(top, rgba(255,0,0,1), rgba(0,0,255,.25));/* For lt IE8 */ filter: progid:DXImageTransform.Microsoft.gradient(gradientyype=0,
startColorstr='#88ff0000', endColorstr='#3300ff00');/* For gt IE8 */ -moz-filter: progid:DXImageTransform.Microsoft.gradient(gradientyype=0,
startColorstr='#88ff0000', endColorstr='#3300ff00');
Tämä on pystysuora lineaarinen gradientti, joka toimii IE 5.5+, Firefox 3.6+, Chrome 5+ ja Safari 4. Näet tämän elävä esimerkki .
Tämä luo lineaarisen pystysuoran kaltevuuden useimmissa selaimissa. Suuri poikkeus on Opera; se ei ole tuottanut kaltevuussyntaasi, todennäköisimmin koska sen luojat odottavat W3C: n näkemistä.
Jotta voit muuttaa kaltevuuden suuntausta, Webkit määrittelee aloitus- ja lopetuskulmat, Mozilla määrittelee sivun tai kulman, jossa kaltevuus alkaa, ja IE yksinkertaisesti määrittää 0 (pysty) tai 1 (vaaka). Joten, kääntämällä kaltevuus 90 °, me koodaavat niin:
/* For WebKit */ background: -webkit-gradient(linear, left top, right top, from(rgba(255,0,0,1)), to(rgba(0,255,0,.25)));/* For Mozilla */ background: -moz-linear-gradient(left, rgba(255,0,0,1), rgba(0,255,0,.25));/* For lt IE8 */ filter: progid:DXImageTransform.Microsoft.gradient(gradientyype=0,
startColorstr='#88ff0000', endColorstr='#3300ff00');/* For gt IE8 */ -ms-filter: progid:DXImageTransform.Microsoft.gradient(gradientyype=0,
startColorstr='#88ff0000', endColorstr='#3300ff00');
Tässä on horisontaalinen lineaarinen gradientti, joka toimii IE: ssä, Firefoxissa, Chromeissä ja Safarissa. Katso tätä elävä esimerkki .
Sekä Webkit että Mozilla mahdollistavat runsaasti vaihtelua niiden kaltevuuksissa, kuten radiaaliset kaltevuudet ja useat värit. Syntaksit voivat olla melko monimutkaisia, mutta pidämme nyt yksinkertaisena, koska IE tukee vain lineaarisia pysty- ja vaaka-gradientteja.
Lisää väriä elämääsi
Avaaminen ennen meitä ei ole mikään muu kuin vallankumous siinä, miten käsittelemme väriä verkkosuunnittelussa. Kruunut, joita käytämme nyt saadaksemme läpinäkyvän värin, häviävät. Aloitamme nähdä paljon enemmän malleja kerroselementteihin luottamalla RGBa: n ja jo vahvistetun läpikuultavuuden omaisuuteen.
Lue lisää
Jason Cranford Teague on kirjailija, opettaja ja suunnittelija. Hänen seuraava kirja, CSS3 Visual Quickstart -opas , tulee ulos tänä syksynä. Lisätietoja Jasonista hänen verkkosivuillaan, JasonSpeaking , tai seuraa häntä Twitterissä ( @jasonspeaking ).