Tilføjelse af transparenter og gradienter med CSS
Måden du håndterer farve i dine webdesigner er ved at ændre. Måske har du spillet rundt med hexadecimale farveværdier, da du var en vild web-babe; hvis du var, gør dig klar til at vokse op hurtigt . CSS3 er ankommet, og din palette er ved at blive meget større.
Sammenlignet med hvad der kommer, er det sas, selvom designere har været farveblind, der arbejder med kun en lille del af det kromatiske spektrum. Nej, nye nuancer vil ikke blive tilføjet til regnbuen.
Hvad der vil ske er, at farveværdierne vil blive defineret på nye måder, hele spektret af uigennemsigtighedsniveauer vil blive tilføjet, og gradienter baseret på ren CSS i stedet for at billeder vil blive smidt ind.
Nogle fremadrettede hjemmesider, som det imponerende 24 måder at imponere på dine venner , leger allerede med RGBa for tekst og baggrundsfarveffekter - og resultaterne er gode.
24ways.org bruger opacitet og RGBa til at skabe et køligt lagdelt design.
Sandheden om HEX
På trods af, at nogle af de udviklere, jeg har sparet med, for nylig kunne tænke, har RGB været på nettet i et stykke tid. RGB-farveværdier understøttes i hver browser, du kan tænke på, så de er ikke noget nyt. Det er bare, at de fleste udviklere (og designere) vant til at definere farver i HEX og ikke har haft nogen grund til at ændre. Nu gør de det.
HEX og RGB-systemer kan definere de millioner af farver, der er tilgængelige på din skærm, lige så godt:
Alle disse farveværdisindstillinger giver det samme resultat.
Alligevel foretrækker jeg at prøve farver i RGB. Jeg er et menneske med 10 fingre, så det er nemmere at forestille farver, der bruger base-10 værdier, end at forestille dem, der bruger base-seksten værdier. Jeg er sjov på den måde: Jeg kan finde ud af en farve med værdier fra 0-255 eller 0-100% meget hurtigere end en med værdier fra 00-99 eller aa-ff.
HEX har en lille fordel i forhold til RGB: den er kompakt - endnu mere, hvis du bruger stenografi (tre værdier i stedet for seks). Dette er kun vigtigt, hvis du er streng om kodeoptimering. Det eneste HEX shorthand er godt for, er websikker farver. Men hvis du begrænser dig til websikker farver, er det tid til at gå videre.
Ny og forbedret RGB: Nu med Alpha!
Her er en grund til at begynde at bruge RGB-værdier: de kan indeholde en alfa-værdi for at skabe opacitet. Tilføjelse af en alfa-værdi til en RGB-farve er enkelheden selv:
background-color: rgba(100%, 0, 0, 0.5)
eller:
background-color: rgba(255, 0, 0, 0.5)
Begge disse værdier giver rødt med 50% opacitet. Når du bruger RGBa, skal du sørge for at angive rgba() som værdien (bemærk den a ), og tilføj alfa-værdien som en fjerde kommasepareret værdi, der spænder fra 0 (gennemsigtig) til 1,0 (uigennemsigtig). En værdi på 0 svarer til transparent farveværdi.
Farveværdier, fra uigennemsigtig til gennemsigtig.
Hvorfor kan ikke HEX understøtte en lignende syntaks? Nå, det kan faktisk, som vi vil se lidt senere, men W3C har ingen tilsyneladende planer om at tilføje det til sine farvespecifikationer. Det kan ændre sig, men for nu er RGB fremtidens farve på nettet.
Så længe brugerens browser understøtter CSS3, kan du bruge en RGBa-værdi til at få gennemsigtighed, hvor der er en farveværdi: i tekst, baggrunde, grænser, konturer, tekstskygger, boksskygger hvor som helst.
Det eneste spørgsmål tilbage er, hvad med browsere, der ikke understøtter RGBa? Jeg hører, at en browser, som et par mennesker stadig bruger (siger 70 til 75% af browseren), støtter stadig ikke nogen CSS3, herunder RGBa. Hvorfor ville det være Internet Explorer!
Hvad skal man gøre med IE?
Hvis en browser møder en værdi, som den ikke forstår, skal den ignorere den og gøre det, hvad andre værdier er angivet for den pågældende ejendom. Følgende CSS skal dække IE og alle andre:
color: rgb(255, 0 , 0);
color: rgba(255, 0, 0, .5);
Justering af farver i IE, så de ser mere ud som transparente farver er muligt. Hvis du f.eks. Ved, at en tekstblok vil blive vist på en hvid baggrund, kan du bruge værdien rgb(255, 127, 127) for at få det til at se ca. 50% transparent. Når baggrunden ændres, bliver forskellen klar:
Den lyserøde værdi simulerer, hvad en 50% gennemsigtig rød ser ud. Men så snart du lægger teksten på en mørk baggrund, afsløres illusionen.
Okay, det er ikke en perfekt løsning, fordi den ikke er helt gennemsigtig. Jeg kan ikke rette det. Men jeg kan dele et tip om, hvordan du sætter gennemsigtige farver i baggrunden af ethvert element i enhver moderne webbrowser.
Bag kulisserne, Del 1: Gennemsigtige farver i dine baggrunde
En lille quirk af Internet Explorer er, at den indeholder flere "filtre." IE-filtre er ikke en del af standard CSS-sprog og vil aldrig blive, men vi kan udnytte dem på interessante måder for at få resultater svarende til nogle CSS3-funktioner .
Med en af disse IE-specifikke filtre kan vi tilføje en gradient til baggrunden for et element og inkludere gennemsigtige farver ved hjælp af hexadecimal notation. Den første værdi i hex-strengen er for opacitet af farven, og den spænder fra 00 (uigennemsigtig) til ff (gennemsigtig). Dette giver et interessant lille smuthul, fordi ved at indstille start- og slutværdierne for gradienten til at være den samme farve, kan vi effektivt tilføje en gennemsigtig baggrundsfarve:
/* 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 skal bruge filteret to gange: en gang for ældre versioner af IE ( lt står for "mindre end") og igen for IE8 og senere ( gte står for "større end eller lig med"), som bruger den nye -ms præfiks for at identificere sig som Microsoft-udvidelser. Dette tilføjer en 50% gennemsigtig baggrund til både kompatible browsere og Internet Explorer, der går tilbage til version 5.5.
Disse skal se ens ud i de fleste browsere. Se dette levende eksempel .
Bag kulisserne, del 2: Gradienter i dine baggrunde
Vent et øjeblik! Sagde jeg ikke bare, at du kunne tilføje gradienter til baggrunde i Internet Explorer ved hjælp af gradientfilteret? Det gjorde jeg faktisk. Og kan du ikke tilføje gradienter til baggrunde ved hjælp af CSS3? Nå, slags. Hvad vi ser på, er så en cross-browser-løsning, der giver os mulighed for at tilføje gradienter i baggrunden ved hjælp af andet end CSS: ingen grafik, ingen gennemsigtige PNG'er, ingen fumling i Photoshop hver gang din klient ønsker at gøre en skygge af lilla lidt mere blå. Du kan gøre dette med Firefox 3.6, Safari 4 og Chrome 5.
Lærer dig, at det er nemt at bruge gradienter, der er en lille komplikation, som tro det eller ej, kommer ikke fra Internet Explorer. W3C har først for nylig påbegyndt arbejdet med en gradientsyntax for CSS, og det er ikke langt i nærheden, men både Mozilla (Firefox) og Webkit (Safari) har allerede tilføjet deres egne (modstridende) browserspecifikke versioner. Disse browser-udvidelser er beregnet til at skubbe branchen fremad ved at tilføje ønskelige og nødvendige funktioner foran de sanktionerede versioner fra W3C.
Alt er ikke tabt. Hver version har sit eget browserforlængelsespræfikse, så hvis vi tilføjer alle gradientsyntaxerne til vores kode, så vil alle browsere fungere godt:
/* 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');
Dette er en vertikal lineær gradient, der fungerer i IE 5.5+, Firefox 3.6+, Chrome 5+ og Safari 4. Se dette levende eksempel .
Dette skaber en lineær vertikal gradient i de fleste moderne browsere. Den store undtagelse er Opera; det har ikke introduceret en gradientsyntax, sandsynligvis fordi dens skabere venter på at se, hvad W3C gør.
For at gøre det muligt for dig at ændre retningen af graden, definerer Webkit start og stop hjørner, Mozilla definerer den side eller hjørne hvor gradienten starter, og IE definerer simpelthen 0 (vertikal) eller 1 (vandret). Så for at vende vores gradient med 90 ° kodes vi således:
/* 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');
Her er en vandret lineær gradient, der fungerer i IE, Firefox, Chrome og Safari. Se dette levende eksempel .
Både Webkit og Mozilla tillader masser af variation i deres gradienter, herunder radiale gradienter og flere farver. Syntakserne kan blive ret komplekse, men vi vil holde det nemt nu, fordi IE kun understøtter lineære lodrette og vandrette gradienter.
Tilføj nogle farver til dit liv
Åbning foran os er intet mindre end en revolution i den måde vi behandler farve i webdesign. De kludger vi bruger nu for at få gennemsigtig farve forsvinder. Vi begynder at se mange flere designs, som lagelementer ved at stole på RGBa og den allerede etablerede opacitetsegenskab.
Yderligere læsning
Jason Cranford Teague er forfatter, lærer og designer. Hans næste bog, CSS3 Visual Quickstart Guide , vil være ude i efteråret. Find ud af mere om Jason på hans hjemmeside, JasonSpeaking , eller følg ham på Twitter ( @jasonspeaking ).