Vloeiende kleurovergangen: CSS gradient

Natuurlijke kleuren zijn meestal gelijkmatig glad. Maar zelfs op een perfect vlakke ondergrond een effen kleur beeld van de natuurlijke kleur overgangen van. Altijd onbedoeld vallen zonlicht of kunstlicht, evenals de verandering van de kijkhoek maakt onregelmatige en unieke tinten.

Twee gezichtspunten gericht op hetzelfde object, zien het kleurverschil respectievelijk hun visie hoeken en correlatie met andere invalshoeken van stralen op het oppervlak van de heen en weer.

Psychologische effecten van kleurovergangen

Kleur is niet alleen de fysieke sensaties en hangt niet alleen af van de tijd en de positie in de ruimte. Beelden van bomen, gebouwen, bergen en andere items in een omgekeerde positie op te roepen het gevoel van reflectie in het wateroppervlak of op het andere oppervlak.

Absoluut zwarte parallelle lijnen op een perfect wit oppervlaktewanden elke lijn over de gehele lengte evenredig met de diktevermindering van de natuurlijke lijndikte als ze op een muur - dit alles zal een gevoel in de kijker dat de kamer een horizontaal plafond veroorzaken.

Een beeld is ingeschreven met de twee, en elk van hen is verschoven ten opzichte van elkaar over een afstand tussen de ogen, waardoor het effect van de ruimtelijke volume als defocus uitstraling.

Als de poster is groot genoeg en de grensovergang in werkelijkheid gemaakt perfect, zal het beeld op de poster worden gezien als natuurlijk dat de gewenste kleurschakeringen, het bewustzijn van de toeschouwer automatisch verbinding.

Site, en vooral, het ontwerp en de kleurstelling zijn essentieel en extra hulpbron logica, zijn dialoog, moet u de juiste psychologische effect op de bezoeker.

Vloeiende overgangen door middel van CSS

Verlopen worden gemaakt met lineaire gradiënt () en radiale gradiënt (). In het eerste geval een gladde kleurverandering optreedt langs de lijn en in het tweede geval - van een ellips of cirkel. CSS helling kan worden ingesteld in de eigenschappen van de achtergrond, background-image, border-afbeelding, list-style-image. Superpositie van elementen aan elkaar, het definiëren van de transparantie kan grote tinten genereren en maak unieke overgangen.

Er moet echter rekening mee worden gehouden dat de kleur overgang kan niet altijd glad zijn. Sommige varianten van kleurencombinaties, de waarden van transparantie, pagina-indeling achtergrond kan ongewenste effecten stap te geven.

CSS-regels voor het opnemen achtergrondverloop

De gradiënt is een vloeiende overgang van de ene kleur naar de andere. In dat geval kunt u meerdere kleuren te gebruiken. Let op de lineaire versie van (CSS lineair verloop) kan worden gevarieerd:

De eerste parameter is de hellingshoek side of regio, gevolgd door kleur. Niet nodig om slechts twee kleuren te gebruiken, kunt u het hele regenboog te tekenen. Het toepassen van transparantie ondoorzichtigheid woning kan worden verkregen overlappende effecten.

De keuze van de kleur, de kleur generatoren

Het creatieve deel van de ontwerper, de site van de ontwikkelaar in de afgelopen jaren vereenvoudigd. Het wordt praktisch en passende rechthoekige vorm, met een minimum aan informatie, een minimum aan functies, de maximale gevoel en mentale houding ten opzichte van het product te verkopen, een dienst, markeert kortingen, kwaliteit en / of significante verschillen ten opzichte van concurrenten.

Maar zelfs in zulke harde voorwaarden, voorschriften en de oprichting van de moderne web-bron is een plek voor creativiteit en een duidelijke wens van sommige ontwikkelaars om een agressieve, doelgericht werken met kleur te maken, als gevolg van het gevoel van de inhoud van de tekst en de gekozen stijl dialoog. CSS gradient is steeds vaker succesvol toegepast.

Kleur oplossingen "Google" en "Skype's", in het bijzonder, had een effect en de volgelingen, maar in de laatste paar jaar, de actieve component van webdesign begon te zoeken naar nieuwe vormen, nieuwe kleuren en onopvallend, probeer dan de dynamiek van de vloeiende vormen.

Op het internet zijn er tal van online bronnen (CSS gradient generator), die de taak van het kiezen van de juiste kleuren :. Angrytools, flatonika, generatecass etc. Met hun hulp sterk vereenvoudigt, kan je echt tijd besparen op de keuze van de juiste kleur, rekening houden met de lijn overgangen en overlays.

Dynamische kleurenschema

Traditie, ten grondslag liggen aan de creatie van web-middelen, gemaakt onschendbaar regel: de structuur, de inhoud en de site samenspraak met de klant - de bevoegdheid van de ontwikkelaar geeft uitvoering aan de wil van de eigenaar (klant). Uiterlijk van de site, het ontwerp is traditioneel verwijst naar het feit dat het niet wordt bepaald door de klant.

Ondertussen, een verscheidenheid aan apparaten groeit, en de families van elk type zijn er verschillende veelbelovende exemplaren, met aanzienlijke verschillen, niet alleen in kleurweergave, zoals in de resolutie en de browser maakt het zichtbare gebied.

Een verscheidenheid van browsers en versies gebruikt creëert ook problemen op een adequate in kaart brengen van CSS gradient mogelijkheden.

Gezamenlijk beoordeling van deze omstandigheden, en voorbeelden van enkele veelbelovende werk, kan worden gesteld dat het uiterlijk van de site enige staat defaultnom - de bevoegdheid van de ontwikkelaar en / of eigenaar van de bron. Alleen wanneer een klant eerst de bron bezoekt, kan het in staat zijn om het ontwerp van de site te evalueren. Indien de klant fit om de site te onthouden heeft gezien en gebruiken in hun dagelijks leven, zijn verlangen om de tools om het uiterlijk te controleren hebben en de functionaliteit is volledig gerechtvaardigd.

Zo'n zwaartepunt van de overdracht ontwikkelaar voordelen: Het is niet nodig om deel te nemen aan de uitvoering van cross-browser compatibiliteit, testsite op verschillende apparaten op verschillende besturingssystemen.

Bovendien zal de trend van een gemeenschappelijke databank voor de daadwerkelijke uitvoering van CSS-regels om verschillende apparaten te maken. Dit is slechts het begin, maar het potentieel is van groot belang.