Måten du håndterer farge på i webdesign, er i ferd med å endres. Kanskje du har spilt rundt med heksadesimale fargeverdier siden du var en wee web-babe; Hvis du var, gjør deg klar til å vokse opp fort . CSS3 er kommet, og paletten din er i ferd med å bli mye større.

Sammenlignet med hva som kommer, er det sant selv om designere har vært fargeblinde, og jobber med bare en liten del av kromatisk spektrum. Nei, nye fargetoner blir ikke lagt til regnbuen.

Hva som vil skje er at fargeværdiene vil bli definert på nye måter, hele spekteret av opasitetsnivåer vil bli lagt til og gradienter basert på rent CSS i stedet for at bilder vil bli kastet inn.

Noen fremtidsrettet nettsteder, som det imponerende 24 måter å imponere på dine venner , spiller allerede rundt med RGBa for tekst og bakgrunnsfargeeffekter - og resultatene er flotte.


24ways.org bruker ugjennomtrengelighet og RGBa for å lage en kul lagret design.


Sannheten om HEX

Til tross for hva noen av utviklerne jeg har sparet med, kan jeg tenke meg, RGB har vært på nettet en stund. RGB-fargeværdier støttes i alle nettlesere du kan tenke på, så de er ikke noe nytt. Det er bare at de fleste utviklere (og designere) vant seg til å definere farger i HEX og ikke har hatt grunn til å endre. Nå gjør de det.

HEX og RGB-systemer kan definere de millioner av farger som er tilgjengelige på skjermen din like godt:

Fig-1-colorvalues
Alle disse fargevalgsinnstillingene gir det samme resultatet.

Likevel foretrekker jeg å prøve ut farger i RGB. Jeg er et menneske med 10 fingre, så det er enklere å forestille farger som bruker base-10-verdier enn å forestille seg de som bruker base-sekstenverdier. Jeg er morsom på den måten: Jeg kan finne ut en farge med verdier fra 0-255 eller 0-100% mye raskere enn en med verdier fra 00-99 eller aa-ff.

HEX har en liten fordel i forhold til RGB: det er kompakt - enda mer så hvis du bruker shorthandet (tre verdier i stedet for seks). Dette er bare viktig hvis du er streng om kodeoptimalisering, skjønt. Det eneste HEX shorthand er bra for, er trygge farger. Men hvis du begrenser deg til websikker farger, er det på tide å gå videre uansett.

Ny og forbedret RGB: Nå med Alpha!

Her er en grunn til å begynne å bruke RGB-verdier: de kan inneholde en alfa-verdi for å skape ugjennomtrengelighet. Å legge til en alfa-verdi til en RGB-farge er enkelhet selv:

background-color: rgba(100%, 0, 0, 0.5)

eller:

background-color: rgba(255, 0, 0, 0.5)

Begge disse verdiene gir rødt med 50% opasitet. Når du bruker RGBa, må du spesifisere rgba() som verdien (merk av a ), og legg deretter til alfaverdien som en fjerde kommaseparert verdi, alt fra 0 (gjennomsiktig) til 1,0 (ugjennomsiktig). En verdi på 0 er ekvivalent med transparent fargeverdi.

fig-2-opasitet
Fargeverdier, fra ugjennomsiktig til gjennomsiktig.

Hvorfor kan ikke HEX støtte en lignende syntaks? Vel, det kan faktisk, som vi ser litt senere, men W3C har ingen tilsynelatende planer om å legge den til fargespesifikasjonene. Det kan endres, men for nå er RGB fremtiden for farge på nettet.

Så lenge brukerens nettleser støtter CSS3, kan du bruke en RGBa-verdi for å få gjennomsiktighet der det er en fargeverdi: i tekst, bakgrunner, grenser, skisser, tekstskygger, bokseskygger hvor som helst.

Det eneste spørsmålet igjen er, hva med nettlesere som ikke støtter RGBa? Jeg hører at en nettleser som noen få personer fortsatt bruker (si 70 til 75% av nettleseren) støtter fortsatt ikke noen CSS3, inkludert RGBa. Hvorfor ville det være Internet Explorer!

Hva skal jeg gjøre med IE?

Hvis en nettleser møter en verdi som den ikke forstår, skal den ignorere den og gjengi hva annet verdi er angitt for den egenskapen. Følgende CSS skal dekke IE og alle andre:

color: rgb(255, 0 , 0);
color: rgba(255, 0, 0, .5);

Justere farger i IE slik at de ser mer ut som transparente farger er mulig. Hvis du for eksempel vet at en blokk med tekst vil vises på en hvit bakgrunn, kan du bruke verdien rgb(255, 127, 127) for å få det til å se omtrent 50% gjennomsiktig. Når bakgrunnen endres, blir forskjellen klar:

fig-3-opacitysimulation
Den rosa verdien simulerer hva en 50% gjennomsiktig rødt ser ut. Men så snart du legger teksten på en mørk bakgrunn, blir illusjonen avslørt.

Ok, dette er ikke en perfekt løsning fordi den ikke er veldig gjennomsiktig. Jeg kan ikke fikse det. Men jeg kan dele et tips om hvordan du setter gjennomsiktige farger i bakgrunnen av ethvert element i en hvilken som helst moderne nettleser.

Bak kulissene, Del 1: Transparente farger i bakgrunnen

En liten quirk av Internet Explorer er at den inneholder flere "filtre." IE-filtre er ikke en del av standard CSS-språket og vil aldri bli, men vi kan utnytte dem på interessante måter å få resultater som ligner på noen CSS3-funksjoner .

Med ett av disse IE-spesifikke filtre kan vi legge til en gradient til bakgrunnen til et element og inkludere gjennomsiktige farger ved hjelp av heksadesimal notasjon. Den første verdien i hex-strengen er for opasiteten til fargen, og den varierer fra 00 (ugjennomsiktig) til ff (gjennomsiktig). Dette gir et interessant lite smutthull, fordi ved å sette start- og sluttverdiene for gradienten til samme farge, kan vi effektivt legge til en gjennomsiktig bakgrunnsfarge:

/* 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 må bruke filteret to ganger: en gang for eldre versjoner av IE ( lt står for "mindre enn") og igjen for IE8 og senere ( gte står for "større enn eller lik"), som bruker den nye -ms prefiks for å identifisere seg som Microsoft-utvidelser. Dette legger til en 50% gjennomsiktig bakgrunn til både kompatible nettlesere og Internet Explorer, går tilbake til versjon 5.5.

fig-04-alphacolor
Disse burde se de samme i de fleste nettlesere. Se dette live eksempel .


Bak kulissene, Del 2: Gradienter i bakgrunnen

Vent litt! Sa jeg ikke bare at du kunne legge til gradienter til bakgrunn i Internet Explorer ved hjelp av gradientfilteret? Faktisk gjorde jeg det. Og kan du ikke legge til gradienter til bakgrunn ved hjelp av CSS3? Vel, slags. Det vi ser på er da en kryssbrowser-løsning som lar oss legge til gradienter i bakgrunnen ved hjelp av noe annet enn CSS: ingen grafikk, ingen gjennomsiktige PNG-filer, ingen fumling i Photoshop hver gang klienten ønsker å lage en nyanse av lilla litt mer blå. Du kan gjøre dette med Firefox 3.6, Safari 4 og Chrome 5.

Lest at du tror at bruk av gradienter ville være enkelt, det er en liten komplikasjon som, tror det eller ikke, kommer ikke fra Internet Explorer. W3C har bare nylig begynt å jobbe med en gradientsyntax for CSS, og det er ikke nært fullført, men både Mozilla (Firefox) og Webkit (Safari) har allerede lagt til sine egne (motstridende) nettleserspesifikke versjoner. Disse nettleserutvidelsene er ment å presse bransjen fremover ved å legge til ønskelige og nødvendige funksjoner foran de sanksjonerte versjonene fra W3C.

Alt er ikke tapt. Hver versjon har sitt eget nettleserforlengelsesprefikse, så hvis vi legger til alle gradientsyntaxene i koden vår, så vil alle nettleserne spille fint:

/* 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');

fig-05-gradient-vertikal
Dette er en vertikal lineær gradient som fungerer i IE 5.5+, Firefox 3.6+, Chrome 5+ og Safari 4. Se dette live eksempel .

Dette skaper en lineær vertikal gradient i de fleste moderne nettlesere. Det store unntaket er Opera; den har ikke introdusert en gradientsyntax, sannsynligvis fordi dens skapere venter på å se hva W3C gjør.

For å tillate deg å endre retningen for gradienten, definerer Webkit start og stopp på hjørner, definerer Mozilla siden eller hjørnet hvor gradienten starter, og IE definerer bare 0 (vertikal) eller 1 (horisontal). Så, for å snu vår gradient med 90 °, kodes vi slik:

/* 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');

fig-06-gradient-horisontal
Her er en horisontal lineær gradient som fungerer i IE, Firefox, Chrome og Safari. Se dette live eksempel .

Både Webkit og Mozilla tillater mye variasjon i gradienter, inkludert radiale gradienter og flere farger. Syntaxene kan bli ganske komplekse, men vi vil holde det enkelt for nå fordi IE støtter bare lineære vertikale og horisontale gradienter.

Legg til litt farge i livet ditt

Åpning foran oss er ingenting mindre enn en revolusjon i måten vi behandler farge i webdesign. Kludgene vi bruker nå for å få gjennomsiktig farge, forsvinner. Vi begynner å se mange flere design som lagerelementer ved å stole på RGBa og den allerede etablerte opacitetsegenskapen.

Videre lesning


Jason Cranford Teague er en forfatter, lærer og designer. Hans neste bok, CSS3 Visual Quickstart Guide , vil være ute i høst. Finn ut mer om Jason på hans hjemmeside, JasonSpeaking , eller følg ham på Twitter ( @jasonspeaking ).