Share
Gradienter gjør et sneaky comeback. For en stund de tilhørte verden av Miami Vice og Tequila Sunrise, da la de dybde til 1980-magasiner, så var det Geocities-ok, la oss ikke dvele i fortiden.
I dag brukes gradienter på nettet på fet måte; blander svært mettede farger for ekstremt rike effekter (selv om det ikke er til alles smak).
Ser ut som at alle bruker en diagonal gradient igjen som det er 1995. Den samme på den (L: Stripe, R: Google). pic.twitter.com/j3cXyWo9tq
- Eli Schiff (@eli_schiff) 24. november 2015
La oss se på noen få eksempler jeg har snublet over nylig og se om vi kan trekke inspirasjon fra dem.
Du vil ikke bli overrasket over å se Spotify i denne listen. Deres grafikk de siste seks månedene har blitt fylt med duotone bilder og rike gradienter, og avsluttet med deres Year in Music-funksjon.
Kombinert med sterk type, spotify s visuelle merkevare ikke bare trykke deg på skulderen for øyeblikket, det holder hodet mot forsterkeren og cranks opp volumet.
Atomic brukte en lignende tilnærming med deres siste retrospektiv på 2015 designartikler.
Her, den lilla og fuchsia (vinklet ved 45 grader) gir litt nydelig isometrisk dybde og gjør et skikkelig syn på siden.
realfuturefair.com bruker et like spektakulært fargespekter, igjen i diagonal vinkel, med a generert bølge grafikk:
Min tidligere kollega Jeffrey Way har gått horisontal, ved hjelp av en subtil lilla til indigo på laracasts.com:
Kommentar bruker en mindre retro estetikk, i stedet velger å plassere et semi-opaque gradient bilde over hovedsiden bakgrunn:
Dette kunne ha blitt gjort mer ressursfylt - det ekstra bildet legger til en annen forespørsel om forespørsel og 75kb til siden - men det er en stilig effekt.
Webkonferanse Web ettermiddag bruker en gjentagende blå til lilla gradient på siden, noe som er spesielt effektivt som kantene på knappene:
Hold musepekeren over lenken, og hele bakgrunnen vedtar gradienten. Så hvordan er dette gjort? Etter noen grunnleggende stiler blir grensen til knappen gitt en lineær gradient med border-image eiendom. Dette tillater oss effektivt å kaste et bilde på grensen, i stedet for å stole på det normale slag, men du kan deklarere standard grenseegenskaper først for å gi et fall tilbake hvis grensebildet ikke støttes.
Du vil da legge merke til at grensebildeegenskapen følges av border-image-skive: 1;. Dette bestemmer hvor bakgrunnsbildet er skåret, slik at det skal skalere med elementet. Verdien på 1 tar den første pikselen til venstre, toppen, høyre og bunnen av vår gradient "bilde", og kartlegger disse skivene til de åtte områdene av grensen. Les mer om skiver på MDN.
Deretter brukes for den sveverstaten samme gradient til bakgrunnsfyllingen. Her er det i aksjon:
Så langt har vi dekket glatte gradienter; to eller flere farger flyter inn i hverandre langs en perfekt overgang. CSS gjør denne prosessen relativt enkel og vedlikeholdbar i dag. Men gradienter kan også gis karakter i form av tekstur:
På worldseasiestdecision.org er denne grove tegningstekstur brukt til å gi sine gradienter mer personlighet. Fin jobb.
www.viens-la.com bruker også bilder (i motsetning til CSS) for å tillate sine gradienter litt personlighet:
En lignende gradient kan ses gjentatt i detaljene i hele sitt nettsted:
Gradienter er ikke bare begrenset til bakgrunn og grenser, de kan også legge til et element av interesse for typografi:
Her bruker Pierre Georges en gradient på bakgrunn av "Bonjour" -blokkblokken, og bruker deretter bakgrunn klype eiendom for å begrense malt område til teksten. -webkit-tekst-fyll-farge: gjennomsiktig; så gjør den faktiske teksten gjennomsiktig, så gradienten er synlig fra under.
Slik ser (webkit) syntaks ut:
p bakgrunnsbilde: -webkit-gradient (lineær, venstre topp, høyre topp, fargestopp (0, # f24a70), fargestopp (0.5, # c557d8), fargestopp (0.99, # f24a70)); -webkit-bakgrunnsbilder: tekst; -webkit-tekst-fyll-farge: gjennomsiktig;
Trenger du litt mer inspirasjon? Sjekk ut disse filene som er tilgjengelige på Envato Market:
Gradiente - Tumblr tema
RedRice - WordPress One-Page Multipurpose Theme
QuickEvents - Responsive Unbounce Landing Page
Colormuse - One Page Portfolio Muse Mal
Accentsconagua