Share
Jag hör den här CSS3-saken är allt raseri. Resurser flyger runt i handledarvärlden och blogosfären som ger strålande exempel på kreativa nya sätt att designa med CSS3-moduler. Det är dock enkelt att överdriva och förlora den fantastiska subtiliteten med bra användargränssnitt. Här är tre snabba tips för att använda kraftfulla CSS3-tekniker på subtila sätt.
Människor kan uppleva och skilja väldigt små förändringar.
Grunden här är att människor kan uppleva och skilja väldigt små förändringar som de kanske inte medvetet märker eller kan komma ihåg. Jag tvivlar på att det här är ny information till någon annan. Det är ett av de mer välkända begrepp som framförs av sensation och perceptionsstudier. Ibland kan en sak vara tilltalande över en annan. Och ibland vet du inte ens varför.
Men kom ihåg att webbdesign är en medveten bearbeta. Subtil design kan vara svårt eftersom det är lätt att tänka "som bara behöver lite Mer."Innan du känner till det, är subtiliteten förlorad.
Med det i åtanke skulle jag vilja presentera tre CSS3-tekniker som kan användas för att ge varierande former av subtilitet för webbdesign.
Övergång är ett kraftfullt verktyg, vilket ger ett sätt för CSS att väsentligen animera från en slutpunkt till en annan. Syntaxen packar en ganska rik verktygssats: egendom, varaktighet och lättnad. Var och en av dessa delar kan varieras för att ge olika nivåer av subtilitet. Ofta tar det bara att spela - som effekter ofta gör. Med andra ord, lek med värdena tills det verkar rätt. Bara kör inte dig galen. Det är lätt att gå vilse att tweaking även en så kort lista över variabler.
Det är inte ovanligt för navigationsobjekt att ändra färg när musen svävar. Övergång kan göra att färgförändringen blir lite mjukare.
.nav li a color: # 282828; text-decoration: none; -webkit-övergång: färg .1s lätt in-ut; -moz-övergång: färg .1s lätt in-ut; -överskridande: färg .1s lätt in-ut; övergång: färg .1s lätt in-ut; .nav li a: svävar färg: # 808080;
Färgförändringen är inte subtil här. Det är tydligt märkbart. Vad är subtila är utjämningen av den färgförändringen.
Tricket att hålla denna subtila är varaktigheten. Om det är för långt kommer effekten att bli alltför märkbar. Navigationen kan snabbt bli svår att sväva över och se amatörlig ut.
Visa demo.
Om du inte har delat in i CSS3 än, är det viktigt att notera den ordning i vilken de webbläsarspecifika deklarationerna kommer. Egentligen är det bara viktigt att märka att den specifika deklarationen för webbläsare kommer sist i listan. CSS tar den senaste deklarationen och gör det viktigare vid en konflikt. När en faktisk övergångsspec är släppt antas alla webbläsare troligtvis att implementera modulen utan behöver det proprietära prefixet. Således blir din CSS något framtida klar utan någon reell kostnad för nuvarande implementeringar.
Observera också att övergångarna finns i element stil, inte dess svävar. Detta kommer att ge övergången både på mouse-over och mouse-off.
Nth-of-type eller nth-child selector tillåter mönster att deklareras i en serie av element och tillämpa stilar i enlighet därmed. Till exempel i ett bord kan nth-barn färgas varannan rad med hjälp av: nth-barn (udda). Låt oss titta på ett exempel som kanske inte är så klart.
Vi tar en ganska vanlig navigationsmarkering ...
... och tillämpa någon styling.
.nav li: nth-of-type (udda) margin-top: 5px; .nav li: nth-of-type (jämn) margin-top: 12px; .nav li: nth-of-type (2n + 2) marginal-höger: 0; .nav li: nth-of-type (2n + 3) margin-left: 8px; margin-höger: 25px;
Detta skapar en förskjuten utseende meny med några höga föremål, några låga föremål och ett par uppsättningar som ser paret ut. Den visuella skillnaden mellan denna och en in-line-meny är tydlig.
Så vad är så subtilt om det? Subtiliteten här är tvåfaldig.
Så kanske en besökare först ser "Hem". Den besökaren kommer förmodligen inse att han eller hon redan är på hemsidan. Han eller hon kan mycket väl se "Work" nästa. *klick*. Efter att ha tittat på några bitar kan de ha sett "Blog" nästa men kanske slutar grupperingen bli starkare och deras önskan dras till "About". Designern kör nu besökaren med en navigationslayout. Han eller hon har gett tips om var besökare ska gå i följd.
Kommer det att hända varje gång? Absolut inte. Kommer det att hända ibland? Jag skulle satsa så.
Det är punkten i subtilitet. Det påverkar inte användaren överväldigande, men det kan ge några användbara tips eller motiv då och då.
Här är ett enkelt sätt att presentera subtilitet i en design. Ironiskt nog har det förmodligen den mest komplicerade syntaxen där ute. Inte bara det, men det har också betydligt olika syntaxer mellan webbläsare. Låt oss ta en titt.
Med tanke på en ganska enkel kontaktformulär (email, message), här är några styling:
formulär inmatning [typ = text], formulär textarea bakgrundsbild: -webkit-gradient (linjär, vänster botten, vänster topp, färgstopp (0, rgb (255,255,255)), färgstopp (1, rgb (248.248.248) )); Bakgrundsbild: -moz-linjär-gradient (center botten, rgb (255,255,255) 0%, rgb (248.248.248) 100%); beskriva: none; gräns: fast 1px #ccc;
Det är en ganska fullständig deklaration, eller hur? Och det täcker bara två webbläsare!
Jag ska inte gå in Allt av syntaxen, för andra har gjort det för mig. Se "Förstå CSS Gradients" på Nettuts + för bättre förståelse. När du är klar, låt oss prata om subtilitet.
Graden i dessa textområden är nästan otänkbar. Om du spelar med CSS och tar ut gränsen försäkrar jag dig om att den är där.
Om du fortfarande inte kan se den i den andra bilden, ta huvudet och flytta det till sidan av din bildskärm så att du tittar på bildskärmen i en ganska brant vinkel. Se det nu? Om inte, vägrar jag att hållas ansvarig. Jag ser det, så din bildskärm måste brytas. :)
Hur som helst, märka hur nära rgb-färgerna är i css. Överst på textinmatningen och textområdet är skuggade någonsin så lite. Detta är ett exempel på mycket extrem subtilitet. Medan du fyller i ett formulär är det osannolikt att någon någonsin kommer att märka denna gradient. Men människor kan hitta din form bara lite mer tilltalande än andra. även om de inte vet varför.
Jo, vi har nästan gjorde det igenom och hela CSS3-artikeln utan att diskutera webbläsarfrågor. Hur lyckades vi det? För en sak var det inte mycket betoning på kod. Ännu viktigare var att jag sparade bäst för sist.
Om du tittar på demo för den här handledningen i en webkit-webbläsare, jämför då den med en Firefox-webbläsare, så kommer du att märka några skillnader. Om du går över till IE märker du ännu fler skillnader. En fin sak om användningen av subtilitet är att om den subtila skillnaden inte är där, så kommer folk förmodligen inte att märka. Med andra ord fungerar färgförändringen i det första exemplet fortfarande utan övergången; Det är bara lite mindre slickt. Om det enda syftet med att använda nth-of-type var att gruppera på grund av gemensamhet, kommer ingen besökare att bry sig om den grupperingen inte finns där. Menyn fungerar fortfarande. Och lutningen? Kom ihåg hur svårt du var att försöka märka det även när man hörs exakt var det var?
Gör det till en möjlighet för kreativitet, istället för en oöverstiglig börda.
Förmodligen är den mest rationella motsättningen till "olika utseende i olika webbläsare" -strategi att många (kanske mest) kunder vill ha exakt samma webbplats i någon större webbläsare. Om det inte finns något utrymme för budgivning på detta och du måste betala din elräkning, gör vad du behöver för att få det viktiga avrundade hörnet till alla IE-versioner tillbaka till gryningstid.
Vissa kunder kan emellertid utbildas och svepas om några fördelar med att ha en design på ett ställe och en annan någon annanstans. Att acceptera ett något annorlunda utseende kan till exempel dramatiskt skäras ned på HTTP-förfrågningar och överskott av HTML-element, om många bilder används för att skapa gränser och skuggor och vad inte. Eller om du är något som jag har du några personliga projekt och har en bra utmaning (som att ge samma "erfarenhet" cross-browser utan att alltid ha samma layout). Eller kanske du har två olika mönster som du verkligen gillar och kan inte bestämma vilken som ska implementeras. Här är ett tillfälle att implementera en i en webbläsare och den andra i en annan, driven av ett enda stilark.
Den övergripande punkten här är att webbläsarens inkompatibilitet är en faktum av den aktuella webben när man försöker använda CSS3. Så, gör det till en möjlighet för kreativitet, istället för en oöverstiglig börda.
Subtiliteten här är inte precis en design subtilitet. I stället är det mer av a designer subtilitet. Enligt min erfarenhet använder de flesta bara en webbläsare. Webprofessorer glömmer det ibland, eftersom vi installerar tre versioner av fem olika webbläsare på varje maskin vi stöter på.
Så, om en IE-enda användare händer över din webbplats och dess innehåll är tydligt och han eller hon har erfarenhet, har du lyckats med din design. Om en annan användare händer över din webbplats i Chrome och åtnjuter deras erfarenhet och innehållet är klart har du lyckats med din design. Och kanske uppskattar besökaren några extra tid-bitar. Beröm. Men viktigast av allt, om du någonsin får möjlighet att sitta ner och titta på detta hända samtidigt, har du lyckats få lite subtilt roligt.
Accentsconagua