Share
Verlopen maken een stiekeme comeback. Ze behoorden een tijdje tot de wereld van Miami Vice en Tequila Sunrise, daarna voegden ze diepte toe aan de tijdschriften van de jaren 80, en toen was er Geocities - oké, laten we niet langer stilstaan bij het verleden.
Tegenwoordig worden gradiënten op het web vetgedrukt gebruikt; het mengen van zeer verzadigde kleuren voor extreem rijke effecten (hoewel het niet naar ieders smaak is).
Het lijkt erop dat iedereen weer een diagonaal verloop gebruikt zoals het in 1995 is. Hetzelfde op dat moment (L: Stripe, R: Google). pic.twitter.com/j3cXyWo9tq
- Eli Schiff (@eli_schiff) 24 november 2015
Laten we een paar voorbeelden bekijken die ik onlangs tegenkwam en kijken of we inspiratie kunnen opdoen.
Je zult niet verrast zijn om Spotify in deze lijst te zien. Hun graphics van de afgelopen zes maanden zijn gevuld met duotoonafbeeldingen en rijke gradiënten, afgesloten met hun Year in Music-functie.
In combinatie met een sterk type, haalt het visuele merk van Spotify je niet alleen op je schouder, maar houdt je je hoofd ook tegen de versterker en verhoogt je het volume.
Atomic gebruikte een vergelijkbare benadering met hun recente retrospectieve op 2015 designartikelen.
Hier geven de paarse en fuchsia (onder een hoek van 45 graden) een aantal mooie isometrische diepte en vormen een echt schouwspel van de pagina.
realfuturefair.com gebruiken een even spectaculair kleurenbereik, opnieuw in een diagonale hoek, met een gegenereerde golfafbeelding:
Mijn voormalige collega Jeffrey Way is horizontaal gegaan en gebruikte een subtiele paarse tot indigo op laracasts.com:
Commentaar gebruikt een minder retro-esthetiek, maar kiest ervoor om een halfdoorzichtig beeld over de achtergrond van de hoofdpagina te plaatsen:
Dit had veel vindingrijker gedaan kunnen worden - de extra afbeelding voegt een ander http-verzoek en 75 kb toe aan de pagina - maar het is een stijlvol effect.
Webconferentie Web 's Middags gebruiken ze een terugkerend blauw-naar-paars verloop op hun pagina, wat vooral effectief is als de randen van knoppen:
Plaats de muisaanwijzer op de link en de hele achtergrond neemt het verloop over. Dus hoe is dit klaar? Na enkele basisstijlen krijgt de rand van de knop een lineair verloop met de border-image eigendom. Hierdoor kunnen we effectief een afbeelding op de rand plaatsen, in plaats van te vertrouwen op de normale lijn, hoewel u standaard randeigenschappen kunt declareren eerste om een terugval te laten als randafbeelding niet wordt ondersteund.
U zult dan opmerken dat de eigenschap border-image wordt gevolgd door border-image-slice: 1;. Dit bepaalt waar de achtergrondafbeelding wordt gesegmenteerd, zodat deze met het element schaalt. De waarde van 1 neemt de eerste pixel aan de linkerkant, de bovenkant, de rechterkant en de onderkant van ons verloop "afbeelding" en wijst die segmenten toe aan de acht regio's van de rand. Lees meer over slicen op MDN.
Vervolgens wordt voor de zweeftoestand hetzelfde verloop toegepast op de achtergrondvulling. Hier is het in actie:
Tot nu toe hebben we vloeiende hellingen behandeld; twee of meer kleuren vloeien in elkaar over een perfecte overgang. CSS maakt dit proces relatief eenvoudig en onderhoudbaar tegenwoordig. Maar hellingen kunnen ook karakter krijgen in de vorm van textuur:
Op worldseasiestdecision.org wordt deze ruwe tekeningstextuur gebruikt om hun hellingen meer persoonlijkheid te geven. Goed werk.
www.viens-la.com gebruiken ook afbeeldingen (in tegenstelling tot CSS) om hun gradiënten een beetje persoonlijkheid te geven:
Een vergelijkbare gradiënt is te zien in de details op hun site:
Verlopen zijn niet alleen beperkt tot achtergronden en randen, maar kunnen ook een interessant element toevoegen aan typografie:
Hier gebruikt Pierre Georges een verloop op de achtergrond van het "Bonjour" paragraafblok, gebruikt dan de background-clip eigenschap om het te beperken geschilderd gebied naar de tekst. -webkit-tekst-vul-kleur: transparant; maakt vervolgens de eigenlijke tekst transparant, zodat het verloop zichtbaar is van onderaf.
Hier ziet u hoe de syntaxis (webkit) eruitziet:
p background-image: -webkit-gradient (lineair, linkerbovenkant, rechtsboven, kleurstop (0, # f24a70), kleurstop (0,5, # c557d8), kleurstop (0,99, # f24a70)); -webkit-achtergrond-clip: tekst; -webkit-tekst-vulling-kleur: transparant;
Meer inspiratie nodig? Bekijk deze bestanden beschikbaar op Envato Market:
Gradiente - Tumblr-thema
RedRice - WordPress One-Page Multipurpose Theme
QuickEvents - responsieve ontgrendelende bestemmingspagina
Colormuse - Muse-sjabloon voor één pagina
Accentsconagua