Bætir gagnsæjum og stigum með CSS
Leiðin um að takast á við lit í hönnun vefhússins er að breytast. Kannski hefurðu verið að leika í kring með sexfaldastigum litum þar sem þú varst wee web-babe; ef þú værir, gerðu þig tilbúin til að vaxa upp hratt . CSS3 er kominn, og stikan þín er að fara að verða mikið stærri.
Í samanburði við það sem er að koma, þá er það sönn þó hönnuðir hafi verið litblindir og vinna aðeins með litlum hluta af litrófinu. Nei, ný litarefni verða ekki bætt við regnboga.
Hvað mun gerast er að litavarnir verði skilgreindir á nýjan hátt, allt litróf ógagnsæðarinnar verður bætt við og stigamörk byggðar á hreinu CSS frekar en myndir verða kastaðar líka.
Sumir framsæknar vefsíður, svo sem áhrifamikill 24 leiðir til að vekja athygli á vinum þínum , eru nú þegar að spila með RGBa fyrir texta og bakgrunnslit áhrif - og niðurstöðurnar eru frábærar.
24ways.org notar ógagnsæi og RGBa til að búa til svalt lagskipt hönnun.
Sannleikurinn um HEX
Þrátt fyrir það sem sumir af þeim teymum sem ég hef verið sparnaður með nýlega gæti hugsað, hefur RGB verið í kring á vefnum um stund. RGB litastig er studd í öllum vafra sem þú getur hugsað um, svo þau eru ekkert nýtt. Það er bara að flestir verktaki (og hönnuðir) notuðu sig við að skilgreina liti í HEX og hefðu enga ástæðu til að breyta. Nú gera þeir það.
HEX og RGB kerfi geta skilgreint milljónir af litum sem eru á skjánum þínum jafn vel:
Öll þessi litaviðmiðunarstillingar framleiða sömu niðurstöðu.
Samt frekar vil ég prófa liti í RGB. Ég er manneskja með 10 fingur, svo að ímynda sér liti sem nota grunn-10 gildi er auðveldara en að hugsa sjálfur um að nota grunn-sextán gildi. Ég er fyndinn þannig: Ég get fundið út lit með gildum frá 0-255 eða 0-100% miklu hraðar en einn með gildum frá 00-99 eða aa-ff.
HEX hefur lítilsháttar forskot á RGB: það er samningur-jafnvel meira svo ef þú notar shorthandið (þrír gildi í stað sex). Þetta er aðeins þýðingarmikið ef þú ert strangur um að fínstilla kóða. Það eina sem HEX shorthand er gott fyrir er vefur-öruggur litir. En ef þú takmarkar þig við öruggum litum, þá er kominn tími til að halda áfram.
Ný og betri RGB: Nú með Alpha!
Hér er ástæða til að byrja að nota RGB gildi: þeir geta innihaldið alfa gildi til að búa til ógagnsæi. Að bæta alfa-gildi við RGB-lit er einfaldleiki sjálft:
background-color: rgba(100%, 0, 0, 0.5)
eða:
background-color: rgba(255, 0, 0, 0.5)
Báðir þessara gilda framleiða rautt í 50% ógagnsæi. Þegar þú notar RGBa skaltu vera viss um að tilgreina rgba() sem gildi (athugaðu a ), og þá bæta við alfa gildi sem fjórða kommu-aðskilið gildi, allt frá 0 (gagnsæ) til 1,0 (ógagnsæ). Gildi 0 samsvarar transparent lit gildi.
Litur gildi, frá ógegnsæ til gagnsæ.
Af hverju getur HEX ekki stutt svipað setningafræði? Jæja, það getur, í raun, eins og við munum sjá dálítið seinna, en W3C hefur enga sýnilegu áform um að bæta við litareiginleikum þess. Það gæti breyst, en nú er RGB framtíð litarinnar á vefnum.
Svo lengi sem vafrinn notandi styður CSS3 geturðu notað RGBa gildi til að fá gagnsæi hvar sem er litaval: í texta, bakgrunni, landamærum, útlínur, textaskuggum, kassaskugga-hvar sem er.
Eina spurningin sem eftir er, hvað um vafra sem styðja ekki RGBa? Ég heyri að einn vafri sem fáir eru ennþá að nota (segja 70 til 75% af beit almennings) styður ennþá engin CSS3, þar á meðal RGBa. Af hverju, það væri Internet Explorer!
Hvað á að gera við IE?
Ef vafri finnur gildi það skilur það ekki, það er ætlast til að hunsa það og gera það sem annað gildi er sett fyrir þessi eign. Eftirfarandi CSS ætti að ná til IE og allir aðrir:
color: rgb(255, 0 , 0);
color: rgba(255, 0, 0, .5);
Aðlaga liti í IE þannig að þær líta út eins og gagnsæ litir eru mögulegar. Til dæmis, ef þú veist að textahlutur birtist á hvítum bakgrunni gætirðu notað gildi rgb(255, 127, 127) til að gera það líta um 50% gagnsæ. Þegar bakgrunnurinn breytist mun þó munurinn verða skýrur:
The bleikur gildi hermir hvað 50% gagnsæ rautt lítur út. En um leið og þú setur textann á dökkan bakgrunn kemur ljósið fram.
Allt í lagi, þetta er ekki fullkomin lausn vegna þess að það er ekki mjög gagnsætt. Ég get ekki lagað það. En ég get deila ábendingum um hvernig á að setja gagnsæ liti í bakgrunni hvaða frumefni sem er í hvaða nútíma vafra sem er.
Á bak við tjöldin, hluti 1: Gegnsætt litir í bakgrunni þinni
Svolítið skrítið af Internet Explorer er að það felur í sér nokkrar "síur". IE síur eru ekki hluti af venjulegu CSS tungumálinu og mun aldrei vera en við getum nýtt þau á áhugaverðum leiðum til að fá niðurstöður svipaðar þeim sem eru í sumum CSS3 eiginleikum .
Með einum af þessum IE-sérstökum síum, getum við bætt við halli við bakgrunn frumefnisins og með gagnsæum litum með því að nota hálfskyggni merkingu. Fyrsta gildi í hex strengnum er fyrir ógagnsæi litarinnar, og það liggur frá 00 (ógagnsæ) til ff (gagnsæ). Þetta veitir áhugavert lítið skotgat, því að með því að setja upphafs- og endahluta hallans til að vera í sama lit, getum við í raun bætt við gagnsæri bakgrunnslit:
/* 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');
Við verðum að nota síuna tvisvar: einu sinni fyrir eldri útgáfur af IE ( lt stendur fyrir "minna en") og aftur fyrir IE8 og síðar ( gte stendur fyrir "meiri en eða jöfn"), sem nota nýja -ms forskeyti til að auðkenna sig sem viðbót við Microsoft. Þetta bætir 50% gagnsæri bakgrunni bæði staðla sem samræmast vafra og Internet Explorer fara aftur í útgáfu 5.5.
Þetta ætti að líta svolítið í flestum vöfrum. Sjá þetta lifandi dæmi .
Á bak við tjöldin, hluti 2: stigamörk í bakgrunni þinni
Bíddu aðeins! Sagði ég ekki bara að þú gætir bætt stigum við bakgrunn í Internet Explorer með því að nota hallasíuna? Reyndar gerði ég það. Og geturðu ekki bætt stigum við bakgrunn með CSS3? Jæja, svona. Það sem við erum að horfa á er þá kross vafra lausn sem leyfir okkur að bæta við stigum í bakgrunni með því að nota annað en CSS: engin grafík, engin gagnsæ PNG, ekki fumbling í Photoshop í hvert skipti sem viðskiptavinurinn vill gera skugga af fjólublár örlítið meira blár. Þú getur gert þetta með Firefox 3.6, Safari 4 og Chrome 5.
Leyfir þér að hugsa að með því að nota stigamörk væri auðvelt, það er ein lítil fylgikvilli sem telur það eða ekki, kemur ekki frá Internet Explorer. W3C hefur aðeins nýverið byrjað að vinna á lóðrétta setningafræði fyrir CSS og það er hvergi nálægt því að ljúka, en bæði Mozilla (Firefox) og Webkit (Safari) hafa þegar bætt við eigin (andstæðar) vafra-tilteknum útgáfum. Þessar vafra "eftirnafn" er ætlað að ýta iðnaði áfram með því að bæta við æskilegum og nauðsynlegum eiginleikum fyrirfram viðurkenndum útgáfum frá W3C.
Allt er ekki glatað. Hver útgáfa hefur eigin fornafn fyrirfornafn vafrans, þannig að ef við bætum öll lóðréttar setningafræði við kóða okkar þá munu allir vafrar leika vel:
/* 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');
Þetta er lóðrétt línuleg halli sem vinnur í IE 5.5+, Firefox 3.6+, Chrome 5+ og Safari 4. Sjá þetta lifandi dæmi .
Þetta skapar línulega lóðréttan hallastig í flestum nútíma vöfrum. Stór undantekning er Opera; það hefur ekki kynnt lóðrétta setningafræði, líklega vegna þess að höfundar þess eru að bíða eftir að sjá hvað W3C gerir.
Til að leyfa þér að breyta stefnu hallans, Webkit skilgreinir að byrja og stöðva horn, skilgreinir Mozilla hliðina eða hornið þar sem hallinn byrjar og IE skilgreinir einfaldlega 0 (lóðrétt) eða 1 (lárétt). Svo, til að snúa hallanum okkar um 90 °, kóðum við eins og svo:
/* 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');
Hér er lárétt línuleg halli sem vinnur í IE, Firefox, Króm og Safari. Sjá þetta lifandi dæmi .
Bæði Webkit og Mozilla leyfa miklu afbrigði í stigum þeirra, þar með talið geislalengdir og margar litir. Setningarnar geta orðið nokkuð flóknar, en við munum halda því einfalt núna vegna þess að IE styður aðeins línuleg lóðrétt og lárétt stig.
Bættu við nokkrum litum í lífi þínu
Opnun fyrir okkur er ekkert minna en bylting í því hvernig við meðhöndlum lit í vefhönnun. The kludges sem við notum núna til að fá gagnsæ lit mun hverfa. Við munum byrja að sjá margar fleiri hönnun sem laga þætti með því að reiða sig á RGBa og nú þegar staðfest ógagnsæi.
Frekari lestur
Jason Cranford Teague er höfundur, kennari og hönnuður. Næsta bók hans, CSS3 Visual Quickstart Guide , verður út í haust. Finndu út meira um Jason á heimasíðu hans, JasonSpeaking , eða fylgdu honum á Twitter ( @ jasonspeaking ).