Lägga till OH-film och gradienter med CSS
Det sätt på vilket du hanterar färg i webbdesignen håller på att förändras. Kanske har du spelat runt med hexadecimala färgvärden eftersom du var en wee webb-babe; om du var, gör dig redo att växa upp snabbt . CSS3 har kommit, och din palett håller på att bli mycket större.
Jämfört med vad som kommer, är det sant men designers har blivit färgblinda och arbetar bara med en liten del av det kromatiska spektret. Nej, nya nyanser kommer inte att läggas till regnbågen.
Vad som kommer att hända är att färgvärdena kommer att definieras på nya sätt, hela spektrumet av opacitetsnivåer kommer att läggas till och gradienter baseras på ren CSS istället för att bilder också kastas in.
Några framtänkande webbplatser, som det imponerande 24 sätt att imponera på dina vänner , spelar redan runt med RGBa för text- och bakgrundsfärgseffekter - och resultaten är stora.
24ways.org använder opacitet och RGBa för att skapa en cool lager design.
Sanningen om HEX
Trots vad några av de utvecklare som jag har sparat med nyligen kanske tror, har RGB varit på nätet ett tag. RGB-färgvärden stöds i varje webbläsare du kan tänka på, så de är inget nytt. Det är bara att de flesta utvecklare (och designers) vant sig vid att definiera färger i HEX och har inte haft någon anledning att ändra. Nu gör de det.
HEX och RGB-system kan definiera de miljoner färgerna som finns tillgängliga på din skärm lika bra:
Alla dessa inställningar för färgvärde ger samma resultat.
Fortfarande föredrar jag att prova färger i RGB. Jag är en människa med 10 fingrar, så att föreställa sig färger som använder bas-10-värden är enklare än att föreställa sig de som använder bas-sexton värden. Jag är rolig så: Jag kan räkna ut en färg med värden från 0-255 eller 0-100% mycket snabbare än en med värden från 00-99 eller aa-ff.
HEX har en liten fördel jämfört med RGB: det är kompakt - även mer om du använder stenografi (tre värden istället för sex). Detta är endast viktigt om du är sträng om kodoptimering. Det enda som HEX shorthand är bra för är webbsäkra färger. Men om du begränsar dig till webbsäkra färger är det dags att gå vidare ändå.
Ny och förbättrad RGB: Nu med Alpha!
Här är en anledning att börja använda RGB-värden: de kan innehålla ett alfavärde för att skapa opacitet. Att lägga till ett alfavärde till en RGB-färg är enkelhet själv:
background-color: rgba(100%, 0, 0, 0.5)
eller:
background-color: rgba(255, 0, 0, 0.5)
Båda dessa värden ger röd vid 50% opacitet. När du använder RGBa, var noga med att ange rgba() som värdet (notera a ), och lägg sedan till alfanumeriet som ett fjärde kommaseparerat värde, från 0 (transparent) till 1,0 (ogenomskinligt). Ett värde på 0 motsvarar transparent färgvärde.
Färgvärden, från ogenomskinlig till transparent.
Varför kan inte HEX stödja en liknande syntax? Tja, det kan faktiskt, som vi ser lite senare, men W3C har inga tydliga planer på att lägga till den i sina färgspecifikationer. Det kan förändras, men för nu är RGB färgens framtid på webben.
Så länge som användarens webbläsare stöder CSS3 kan du använda ett RGBa-värde för att få öppenhet vart det finns ett färgvärde: i text, bakgrunder, gränser, konturer, textskuggor, rutaskuggor var som helst.
Den enda frågan kvar är, vad sägs om webbläsare som inte stöder RGBa? Jag kan höra att en webbläsare som ett fåtal personer fortfarande använder (säger 70 till 75% av den offentliga allmänheten) stöder fortfarande ingen CSS3, inklusive RGBa. Varför skulle det vara Internet Explorer!
Vad ska man göra med IE?
Om en webbläsare möter ett värde som det inte förstår, ska det ignoreras och göra vad som helst annat värde är inställt för den egenskapen. Följande CSS bör täcka IE och alla andra:
color: rgb(255, 0 , 0);
color: rgba(255, 0, 0, .5);
Justera färger i IE så att de ser mer ut som transparenta färger är möjliga. Om du till exempel vet att ett textblock kommer att visas på en vit bakgrund kan du använda värdet rgb(255, 127, 127) för att få det att se ca 50% transparent. När bakgrunden ändras kommer skillnaden att bli klar:
Det rosa värdet simulerar vad en 50% transparent röd ser ut. Men så snart du sätter texten på en mörk bakgrund, uppenbaras illusionen.
Okej, det här är inte en perfekt lösning eftersom den inte är helt transparent. Jag kan inte fixa det. Men jag kan dela ett tips om hur man sätter genomskinliga färger i bakgrunden till något element i någon modern webbläsare.
Bakom kulisserna, Del 1: Transparenta färger i dina bakgrunder
En liten quirk av Internet Explorer är att den innehåller flera "filter". IE-filter är inte en del av standard CSS-språk och kommer aldrig att bli, men vi kan utnyttja dem på intressanta sätt för att få resultat som liknar vissa CSS3-funktioner .
Med ett av dessa IE-specifika filter kan vi lägga till en gradient till bakgrunden av ett element och inkludera transparenta färger med hjälp av hexadecimal notering. Det första värdet i hex-strängen är för färgens opacitet och det varierar från 00 (opak) till ff (transparent). Detta ger ett intressant litet smutthål eftersom vi genom att ställa in start- och slutvärdena för gradienten är samma färg, vi kan effektivt lägga till en transparent bakgrundsfärg:
/* 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åste använda filtret två gånger: en gång för äldre versioner av IE ( lt står för "mindre än") och igen för IE8 och senare ( gte står för "större än eller lika med"), som använder den nya -ms prefix för att identifiera sig som Microsoft-tillägg. Detta lägger till en 50% transparent bakgrund till både standardkompatibla webbläsare och Internet Explorer går tillbaka till version 5.5.
Dessa ska se likadant ut i de flesta webbläsare. Se detta levande exempel .
Bakom kulisserna, del 2: Gradienter i dina bakgrunder
Vänta en minut! Sade jag inte bara att du kunde lägga till gradienter till bakgrunder i Internet Explorer med hjälp av gradientfiltret? Det gjorde jag faktiskt. Och kan du inte lägga till gradienter i bakgrunden med CSS3? Typ. Vad vi tittar på är då en cross-browser-lösning som låter oss lägga till gradienter i bakgrunden med ingenting annat än CSS: ingen grafik, inga transparenta PNG-filer, ingen fumbling i Photoshop varje gång din klient vill göra en nyans av lila lite mer blå. Du kan göra detta med Firefox 3.6, Safari 4 och Chrome 5.
Låt dig tro att att använda gradienter skulle vara lätt, det finns en liten komplikation som, tro det eller inte, kommer inte från Internet Explorer. W3C har nyligen nyligen börjat arbeta med en gradientsyntax för CSS, och det är ingenstans nära, men både Mozilla (Firefox) och Webkit (Safari) har redan lagt till egna (motstridiga) webbläsarspecifika versioner. Dessa webbläsares "tillägg" är avsedda att driva branschen framåt genom att lägga till önskvärda och nödvändiga funktioner inför de sanktionerade versionerna från W3C.
Allt är inte förlorat. Varje version har sitt eget prefix för webbläsare, så om vi lägger till alla gradientsyntaxerna i vår kod kommer alla webbläsare att spela bra:
/* 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');
Detta är en vertikal linjär gradient som fungerar i IE 5.5+, Firefox 3.6+, Chrome 5+ och Safari 4. Se detta levande exempel .
Detta skapar en linjär vertikal gradient i de flesta moderna webbläsare. Det stora undantaget är Opera; det har inte introducerat en gradientsyntax, troligen för att dess skapare väntar på att se vad W3C gör.
För att låta dig ändra riktningen för gradienten definierar Webkit start och stopp hörn, definierar Mozilla den sida eller det hörn där gradienten börjar och IE definierar helt enkelt 0 (vertikal) eller 1 (horisontal). Så, för att vrida vår lutning med 90 °, kodar vi så här:
/* 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 är en horisontell linjär gradient som fungerar i IE, Firefox, Chrome och Safari. Se detta levande exempel .
Både Webkit och Mozilla tillåter mycket variation i deras gradienter, inklusive radialgradienter och flera färger. Syntaxerna kan bli ganska komplexa, men vi kommer att hålla det enkelt för nu eftersom IE stöder endast linjära vertikala och horisontella gradienter.
Lägg till lite färg i ditt liv
Öppnande framför oss är inget mindre än en revolution i hur vi behandlar färg i webbdesign. De kludder vi använder nu för att få genomskinlig färg försvinner. Vi börjar se mycket mer mönster som lagerelement genom att förlita sig på RGBa och den redan etablerade opacitetsegenskapen.
Vidare läsning
Jason Cranford Teague är en författare, lärare och designer. Hans nästa bok, CSS3 Visual Quickstart Guide , kommer att vara ute i höst. Läs mer om Jason på hans hemsida, JasonSpeaking , eller följ honom på Twitter ( @jasonspeaking ).