Articles

inspiráló webes színátmenetek és hol találja meg őket

a webes színátmenetek visszatérnek az online világ tervezési elemeként. Ők váltak egy egyszerű módja annak, hogy a honlapon az élet.

ha jól alkalmazzák őket, egységes érzést adnak a szemnek, amely felkéri a felhasználót, hogy maradjon a weboldalon. Ez az érzés az oldalszerkezet durva éleinek és töréseinek hiányából fakad.

web gradients - nyc_pride amint a fenti példában látható, a gradiens megnyugtatja a háttérkép működését, hogy alkalmas legyen a felhasználói felület kialakításának hátterére.

szeretné tudni az okát?

a titok az, hogy a gradiens terjedésének harmóniája a természetben előforduló jelenségekből származik, ahol többnyire nem jelennek meg durva élek. Mindennek szerves alakja vagy lágy átmenete van.

emellett az embereknek nagyszerű színlátásuk van, és élvezik a színek látását. Képzeljen el egy fekete-fehér színátmenetet. Ez az esettől függ, de valószínűleg nem úgy néz ki, hogy sok esetben a nagyszerű és színes színátmeneteket részesítik előnyben.mit gondolsz, miért szeret mindenki naplementét nézni?

web színátmenetek - naplemente színátmenet

vagy csak teszi a fejét az ég felé?

webes színátmenetek - természetgradiens

a színátmenetek használata a weboldal hátterében diszkrét módon is irányíthatja a látogató nézetét a tartalomban anélkül, hogy bosszantó nyilakat kellene elhelyeznie az előtérben.

az előtérben kell használni a fontos információkat egyébként, és a háttér is eleget alárendelt célra.

az olyan elemekre alkalmazva, mint a gombok és ikonok, a színátmenetek szintén könnyű 3D-s hatást eredményezhetnek.

nem mindig könnyű megtalálni a megfelelő színátmenetet, és ezeket az előnyöket megfelelően alkalmazni.

ne aggódj. Van megoldás.

számos olyan online eszköz létezik, amelyek már sok előkészített színátmenetet kínálnak, akár csak inspiráció céljából, akár közvetlenül, hogy könnyen integrálhassák őket a webhelyére.

most már csak meg kell találnia, hogy melyik eszköz felel meg legjobban az Ön igényeinek.

kezdjük.

inspiráló webes színátmenetek…

webes színátmenetek - symodd

mint említettük, a symodd egy klasszikus példa arra, hogy a jó webes színátmenetek hogyan működhetnek egyszerű háttérként, amely egyébként érdekes és vonzó.

web gradients - qards

nem csak a qard-okat használja gradiensként háttérként, hanem szinte minden egyes elemre alkalmazzák, különösen az ikonokra és a gombokra.

web gradients - gogoro

a Gogoro olyan gradienst használ, amely dinamikusabbá teszi és támogatja a márka célját.

mint látható ezeken a weboldalakon minden arról szól, hogy megtaláljuk a megfelelő egyensúlyt és a színeket mérsékelten használjuk.

nem inspiráló színátmenet:

web gradients - badExample

Ez a színátmenet annyira csúnya, hogy bocsánatot kell kérnem, hogy itt bemutatom, mert annyira fáj a szemnek. Túl sok színe van, amelyek mind nagyon különbözőek. Ezenkívül az előtérben lévő sima fekete szöveg elmozdultnak tűnik, és a színátmenet elnyomja.

tehát, ha miután látta ezeket a példákat, még mindig nem biztos abban, hogy alkalmazhat-e olyan gradienst, amely képes támogatni a projektet, ahogy kellene, mélyebben belemerülhet a web-és grafikai tervezésbe.

nem elég?

WEB DESIGN PROFESSIONAL

Tudjon meg többet az aláírási tanfolyamunkról.
válassza ki a legjobb menetrend
tanulni ONLINE vagy az iskolában.

tanfolyam megtekintése

kövesse ezt az útmutatót, hogy jobban megértse a gradiens típusokat, és tanácsot adjon a legjobb gyakorlatokról.

… és hol találja őket

web gradients - uiGradients
web gradients - uiGradients

az uiGradients nagyon könnyen használható, mert csak két fő képernyője van. A betöltés után közvetlenül egy véletlenszerű színátmenetet láthat az egész képernyőn.

a nyilak oldalán, akkor válthat a nagy ajánlat mindenféle színátmenetek. A második képernyő az összes színátmenetet listaként jeleníti meg, amelyet végig lehet görgetni és szín szerint rendezni.

a webes színátmenetek által létrehozott légkört az egyedi neve támogatja. Különlegességként elforgathatja a színátmenetet is, hogy lássa, hogyan néz ki egy másik perspektívából.

azok számára, akik szeretnének hozzájárulni a létrehozott gradienshez a közösséghez, létezik lehetőség a gradiens hozzáadására a gyűjteményhez a Githubon keresztül. Ez a színátmenetek sokféleségét szinte korlátlanná teszi.

az uiGradients háromféleképpen mentheti el a választott színátmenetet. Ha újra szeretné létrehozni a színátmenetet egy grafikai tervező szoftverben vagy kódban, egyszerűen átmásolhatja a Hex színkódot.

a webhely közvetlen megvalósításához megkaphatja a CSS kódot.

a gradiens inspirációként történő mentéséhez töltse le a JPEG fájlt.

WebGradients

webgradients - WebGradients

Ez az eszköz azzal kezdődik, hogy a 180 webgradiens gyűjteményét hosszú listaként jeleníti meg, amelyen keresztül görgethet. Ha többet szeretne látni egy színátmenetből, kattintson a választásra, és a szín az egész képernyőn megjelenik.

minden gradiensnek van neve, így később konkrétabbá teszi azok alkalmazását.

WebGradients által működtetett itmeo, a cég, amely több digitális eszközök online. Gradiens szolgáltatásuk ebben az esetben ingyenes, hacsak nem akar vázlatot vagy Photoshop fájlt letölteni.

az uigradiensekhez hasonlóan itt is három lehetőség van az új megtalált gradiens inspiráció mentésére.

minden színátmenethez menthet egy nagy PNG fájlt, hogy háttérként használhassa saját grafikai tervezéséhez.

annak érdekében, hogy a pontos színeket és a színátmenetet egy grafikai tervező szoftverben vagy kódban használhassa, másolhatja a Hex színkódot, vagy megkaphatja a színátmenet CSS verzióját.

coolHue

webes színátmenetek - coolHue

Ez a színátmenetgyűjtemény már a weboldal első megnyitásakor megjelenik. 60 színes színátmeneten belül választhat. Csak lapozzunk minden esetben hat csempe egy sorban a különböző gradiens.

sajnos nincs mód a gradiens teljes méretének megjelenítésére.

a coolhue szép kiegészítése az animáció, amikor az egérmutatót a gradiens csempék fölé viszi, ami kézzelfogható benyomást kelt.

a webes színátmenetek csak a színeken keresztül adják át a légkörüket. Ezért nincs nevük ebben az eszközben. Ezért a jobb alsó sarokban több lehetőség van a Sketch és a Photoshop számára.

Ha az egérmutatót a kiválasztott gradiens fölé viszi, két további lehetőség jelenik meg. Másolhatja a CSS kódot az egyszerű megvalósítás érdekében a kódjába, vagy letölthet egy kis PNG fájlt.

Ha a pontos színeket szeretné használni, egyszerűen átmásolhatja a Hex színkódot a színátmenet alól.

ColorSpace

colorspace

a ColorSpace lehetőséget kínál arra, hogy 10 különböző irányba színátmenetet válasszon és alkalmazzon. A szín alkalmazásához választhat a felbukkanó színmenüből, ugyanúgy,mint egy képszerkesztő szoftverben. Beillesztheti a szín hexadecimális színkódját is, így pontosan megkapja a használni kívánt színeket.

a színátmenetet a háttérben a teljes képernyőn alkalmazzák. Ez nagyon jó érzést ad a színek hangulatáról, és arra ösztönöz, hogy kiválassza azt a színt, amely úgy érzi, hogy a legjobban megfelel a keresett témának.

a színtér segítségével a kiválasztott színátmenet URL-jét is átmásolhatja. Ez nagyon egyszerűvé teszi a szín opcióinak megosztását anélkül, hogy fájlt kellene mentenie, majd mellékletként elküldenie, vagy el kellene küldenie a specifikációkat a színből. Az elküldött linkre kattintva láthatják, hogy mit néztek, és megkapják az összes szükséges információt, a hexadecimális kódokat és a CSS kódot.

Ha azonban inkább egy képfájlt szeretne menteni, sajnos ez a webhely nem adja meg ezt a lehetőséget.

Ultimate CSS Gradient Generator

web gradients - Ultimate CSS Gradient Generator

most jön a bonyolultabb eszközök, amelyek ebben az esetben, mint a neve már mondja, csak akkor használják az integráció a CSS kódot.

a felület négy részre oszlik, és egy tipikus grafikai szoftverre emlékeztet. Beállíthat vagy létrehozhat előre beállított értékeket, megtekintheti ezt az eredményt egy kis előnézetben, és megnézheti a teljes CSS kódot.

a végső CSS gradiens generátor a ColorZilla böngészőbővítmény része. Gradiens eszköze korlátlan lehetőségeket kínál webes színátmenetek létrehozására.

annyi színt adhat hozzá, amennyit csak akar, beállíthatja a színárnyalatot és a telítettséget, ahogyan azt a grafikai tervező szoftverből ismeri, megfordíthatja a színátmenetet, és beállíthatja a színátmenetet, az átlátszóságot és a színátmenet helyét.

Ezen kívül elmentheti saját létrehozott gradiensét az előre beállított értékekre, csak egy módja van annak exportálására a CSS vagy SASS kóddal.

de ezt megelőzően beállíthatja a színátmenet méretét, megváltoztathatja annak tájolását különböző irányokba, és kiválaszthatja a színformátumot az öt megadott lehetőség közül.

problémák dönteni?

uiGradients WebGradients coolHue Gradientify Gradients.io CSS Gradient Generator
Full-screen view + + +
Switch in full-screen view +
List view + + + + + +
Amount of gradients almost unlimited 180 60 45 24 unlimited
Sort gradients by colour
Named gradients + + + +
Rotate gradient (change orientation) + +
Change colour opacity +
Change colour location +
More than two colours + +
Change hue/saturation +
Reverse colours + +
Adding new gradient + +
Import image +
Import CSS code + +
Change export size +
Hex Color Code + + + + +
CSS code + + + + +
Chose colour format (CSS) +
JPEG file 1920 × 1080
PNG file 2400 × 2000 500 × 500

a webes színátmenetek eszköz használata mindig a projekttől, a rendelkezésre álló időtől és az egyéniség szintjétől vagy más minőségi követelményektől függ.

a fenti táblázat segít eldönteni, hogy melyik eszközt használja a legjobban a kívánt eredményhez.

emlékszel a legfontosabb dologra?

ne használjon túl sok színt – a mai legjobb gyakorlat az, hogy csak két színt használjon, amelyek szintén nem különböznek egymástól.

amire szintén figyelnie kell, az a gradiens általános kialakítása, a projekt későbbi alkalmazásának módja, valamint az, hogy hogyan illeszkedik a környezetébe.

az uiGradients minden fontos vizuális funkciót kínál, amint az az asztalon látható. Ez az eszköz a lehető legjobb módon képzeli el a projekt gradiensét.

Ha azt szeretnénk, hogy mélyebben alkalmazkodik a gradiens egy kiváló minőségű webes projekt kombinálhatja uiGradients a végső CSS gradiens generátor importálásával a CSS kódot, vagy a letöltött képet.

most már készen állsz arra, hogy egyedül csináld. Ha úgy dönt, hogy gradiensekkel dolgozik, kérjük, ossza meg velünk a Twitteren.

WEB DESIGN PROFESSIONAL

Tudjon meg többet az aláírási tanfolyamunkról.
válassza ki a legjobb menetrend
tanulni ONLINE vagy az iskolában.

tanfolyam megtekintése

Vélemény, hozzászólás?

Az e-mail-címet nem tesszük közzé.