Share
Jeg hører denne CSS3-tingen er alt raseri. Ressurser flyr rundt opplæringsverdenen og blogosfæren som gir strålende eksempler på kreative nye måter å designe ved hjelp av CSS3-moduler. Det er imidlertid enkelt å over-implementere og miste den flotte subtiliteten til gode brukergrensesnitt. Her er tre raske tips for bruk av kraftige CSS3-teknikker på subtile måter.
Folk er i stand til å oppleve og skille mellom små endringer.
Bunnlinjen her er at folk er i stand til å oppleve og skille ut svært små endringer som de ikke kan bevisst merke eller være i stand til å huske. Jeg tviler på at dette er ny informasjon til noen. Det er en av de mer kjente konseptene som fremkommer av sensasjon og perceptionstudier. Noen ganger kan en ting være behagelig over en annen. Og noen ganger vet du ikke engang hvorfor.
Vær imidlertid oppmerksom på at webdesign er en bevisst prosess. Subtile design kan være vanskelig fordi det er lett å tenke "som bare trenger litt mer."Før du vet det, er finessen tapt.
Med det i tankene vil jeg gjerne presentere tre CSS3 teknikker som kan brukes til å gi varierende former for subtilitet for webdesign.
Overgang er et kraftig verktøy, noe som gir en måte for CSS å hovedsakelig animere fra ett endepunkt til et annet. Syntaxen pakker et ganske rikt verktøysett: eiendom, varighet og lettelse. Hver av disse stykkene kan varieres for å gi forskjellige nivåer av subtilitet. Ofte tar det bare å spille - som effekter ofte gjør. Med andre ord, lek med verdiene til den virker riktig. Bare ikke kjør deg gal. Det er lett å gå seg villere, selv en så kort liste over variabler.
Det er ikke uvanlig for navigasjonsartikler å endre farge når musen svever. Overgang kan gjøre fargeendringen litt jevnere.
.nav li a color: # 282828; text-decoration: none; -webkit-overgang: farge .1s brukervennlig -moz-overgang: farge .1s lett-i-ut; -o-overgang: farge .1s lett-i-ut; overgang: farge. 1s lett-i-ut; .nav li a: hover color: # 808080;
Fargeendringen er ikke subtil her. Det er tydelig merkbar. Hva er subtile er utjevningen av den fargeendringen.
Trikset for å holde denne subtile er varigheten. Hvis det er for langt, vil effekten bli altfor merkbar. Navigasjonen kan raskt bli belastende for å svinge over og se amatørosk.
Se demonstrasjonen.
Hvis du ikke har delt inn i CSS3 ennå, er det viktig å merke seg rekkefølgen der nettlesespesifikke deklarasjonene kommer. Egentlig er det bare viktig å legge merke til at ikke-nettleser-spesifikk deklarasjon kommer sist i listen. CSS tar den siste erklæringen og gjør det viktigere ved konflikt. Når en faktisk overgangsspesifikasjon er utgitt, antas det at alle nettlesere skal implementere modulen uten trenger proprietære prefiks. Dermed blir ditt CSS noe fremtidig klar uten reell kostnad for dagens implementeringer.
Legg også merke til at overgangene er i element stil, ikke dens svinger. Dette vil gi overgangen både på mus-over og mus-off.
Nth-of-type eller nth-child selector gjør at mønstre kan deklareres i en rekke elementer og bruke stiler tilsvarende. For eksempel, i et bord kunne nth-barn farge hver andre rad ved å bruke: nth-barn (oddetall). La oss se på et eksempel som kanskje ikke er så klart.
Vi tar en ganske vanlig navigasjonsmarkup ...
... og bruk noen styling.
.nav li: nth-of-type (merkelig) margin-top: 5px; .nav li: nth-of-type (like) margin-top: 12px; .nav li: nth-of-type (2n + 2) margin-right: 0; .nav li: nth-of-type (2n + 3) margin-left: 8px; margin-right: 25px;
Dette vil skape en spredt utseende meny med noen høye elementer, noen få lave elementer, og et par sett som ser sammen. Den visuelle forskjellen mellom dette og en in-line-meny er tydelig.
Så hva er så subtilt om det? Den subtilitet her er todelt.
Så, kanskje en besøkende først ser "Hjem". Den besøkende vil sikkert innse at han eller hun allerede er på hjemmesiden. Han eller hun kan godt se "Arbeid" neste. * Klikk *. Etter å ha sett noen arbeidsstykker, kan de godt ha sett "Blog" neste, men kanskje slutter gruppen å bli sterkere og deres ønske blir trukket til "Om". Designeren kjører nå besøkende med navigasjonslayout. Han eller hun har gitt tips om hvor besøkende skal gå, sekvensielt.
Vil dette skje hver gang? Absolutt ikke. Vil det skje noen ganger? Jeg ville satse på det.
Det er poenget med subtilitet. Det påvirker ikke brukeren overveldende, men det kan gi noen nyttige hint eller motivasjoner nå og da.
Her er en enkel måte å introdusere subtilitet på i et design. Ironisk nok har det sannsynligvis det mest kompliserte syntaksen der ute. Ikke bare det, men det har også vesentlig forskjellige syntakser mellom nettlesere. La oss ta en titt.
Gitt et ganske enkelt kontaktskjema (e-post, melding), her er noen styling:
formularinngang [type = tekst], form tekstarea (bakgrunnsbilde: -webkit-gradient (lineær, venstre bunn, venstre topp, fargestopp (0, rgb (255,255,255)), fargestopp (1, rgb (248.248.248) )); bakgrunnsbilde: -moz-lineær gradient (senterbunn, rgb (255,255,255) 0%, rgb (248.248.248) 100%); skissere: none; grense: solid 1px #ccc;
Det er ganske fullstendig erklæring, ikke sant? Og det dekker bare to nettlesere!
Jeg kommer ikke til å gå inn alle av syntaksen, fordi andre har gjort det for meg. Se "Forstå CSS Gradients" på Nettuts + for bedre forståelse. Når du er ferdig, la oss snakke om subtilitet.
Graden i disse tekstområdene er nesten imperceiveable. Men hvis du spiller med CSS og tar ut grensen, forsikrer jeg deg om at den er der.
Hvis du fortsatt ikke kan se det i det andre bildet, ta hodet og flytt det til siden av skjermen, slik at du ser på skjermen i en ganske bratt vinkel. Se det nå? Hvis ikke, nekter jeg å bli holdt ansvarlig. Jeg ser det, så skjermen din må være ødelagt. :)
Uansett, legg merke til hvor nær rgb-fargene er i css. Øverst på tekstinngangen og tekstområdene er skyggefullt litt så liten. Dette er et eksempel på veldig ekstrem subtilitet. Mens du fyller ut et skjema, er det usannsynlig at noen noen gang vil merke denne gradienten. Men folk kan finne skjemaet ditt bare litt mer tiltalende enn andre; selv om de ikke vet hvorfor.
Vel, vi har nesten gjort det gjennom og hele CSS3-artikkelen uten å diskutere nettleserproblemer. Hvordan klarte vi det? For det første var det ikke mye vekt på kode. Enda viktigere, skjønt, var jeg redde best for sist.
Hvis du ser på demoen for denne opplæringen i en nettleser, sammenligner du det med en Firefox-nettleser, vil du legge merke til noen forskjeller. Hvis du går over til IE, vil du legge merke til ytterligere forskjeller. En fin ting om bruk av subtilitet er at hvis den subtile forskjellen ikke er der, vil folk sannsynligvis ikke merke. Med andre ord virker fargeskiftet i det første eksemplet fortsatt uten overgangen; det er bare litt mindre glatt. Hvis det eneste formålet med å bruke nth-of-type var å gruppere på grunnlag av fellesitet, vil ingen besøkende ta vare på om den gruppen ikke er der. Menyen fungerer fortsatt. Og gradienten? Husk hvor hardt du måtte prøve å legge merke til det selv når du blir fortalt nøyaktig hvor det var?
Gjør det til en mulighet for kreativitet, i stedet for en uoverstigelig byrde.
Sannsynligvis den mest rasjonelle motstanden mot "forskjellige utseende i forskjellige nettlesere" tilnærming til webdesign er at mange (kanskje mest) Klienter vil ønske nøyaktig samme nettside i en hvilken som helst større nettleser. Hvis det ikke er plass til budging på dette, og du må betale din elektriske regning, gjør det du trenger for å få det viktige avrundede hjørnet til alle IE-versjoner tilbake til tidens morgen.
Noen klienter kan imidlertid bli utdannet og svekket om noen fordeler med å ha ett design på ett sted og et annet sted. Hvis du for eksempel aksepterer et litt annet utseende, kan det dramatisk kuttes ned på HTTP-forespørsler og overskytende HTML-elementer, hvis mange bilder brukes til å lage grenser og skygger, og hva ikke. Eller, hvis du er noe som meg, har du noen personlige prosjekter og nyter en god utfordring (som å gi samme "opplevelse" kryssbrowser uten å alltid ha samme layout). Eller kanskje du har to forskjellige design som du virkelig liker og ikke kan bestemme hvilken som skal implementeres. Her er en mulighet til å implementere en i en nettleser og den andre i en annen, drevet ut av et enkelt stilark.
Det overordnede punktet her er at nettleserens inkompatibilitet er en faktum av gjeldende nett når du prøver å utnytte CSS3. Så gjør det til en mulighet for kreativitet, i stedet for en uoverstigelig byrde.
Den subtilitet her er ikke akkurat en design diskresjon. I stedet er det mer av en designer diskresjon. Etter min erfaring bruker de fleste bare en nettleser. Webprofessorer glemmer at noen ganger, ettersom vi installerer tre versjoner av fem forskjellige nettlesere på hver maskin vi kommer over.
Så, hvis en IE-eneste bruker skjer over hele nettstedet ditt, og innholdet er klart og han eller hun nyter opplevelsen, har du lykkes i designet. Hvis en annen bruker skjer over nettstedet ditt i Chrome, og nyter deres erfaring og innholdet er klart, har du lyktes i designet. Og kanskje den besøkende verdsatt noen ekstra tid-biter. Kudos. Viktigst, skjønt, hvis du noen gang får muligheten til å sitte ned og se dette skje samtidig, har du lykkes med å ha litt subtil moro.
Accentsconagua