Menu Close

Miért alkalmazz színátmeneteket a weboldaladon?

Ha nagyon egyszerűen szeretnék fogalmazni akkor azt írnám, hogy mert ez a 2019-es év trendje és mert különlegesebbé, egyedibbé tehető a színátmenetekkel a weboldal háttére vagy a gombok megjelenése. De nézzük egy kicsit részletesebben ezt a témát:

Mit jelent pontosan a színátmenet?

Nem elég „csak” az arculati színeket kiválasztani, amelyben az arculati színek kiválasztásának szempontjai című bejegyzésemben írtam hanem érdemes belőlük színátmenetet is képezni. A színátmenet (grádiens) 2 vagy több szín adott felületen lévő lineárisan vagy radiálisan (ez a két alap, de még számtalan variáció is elérhető) történő keverésével azonosítható. 

Azure Pop 2 szín átmenete
Azure Pop 2 szín átmenete
combi 3 szín átmenete
Combi 3 szín átmenete

Honnan vegyél ötleteket ahhoz, hogy milyen színeket válassz?

Számtalan weboldalon találhatóak tippek, ötletek a gyönyörű színátmenetek összeállítására. A hexa kód kimásolásával pedig a legtöbb webszerkesztő programban már el is tudjuk készíteni a saját (arculati színeinkhez is passzoló) színátmenetes hátterünket vagy gombjainkat. Nézzünk néhány oldalt ezek közül:

  • Az uigradients.com oldalon például teljes képernyő méretben látható 2 szín keverése. A bal oldali „Show all gradients” gomb segítségével színek szerint is választhatunk különböző palettákat. A jobb oldali körbemenő nyíllal pedig lehetőség van a színek irányának megváltoztatására. A <> gombbal elérhető és kimásolhaó a CSS kód, illetve a letöltés gombbal a kép jpg formátumban letölthető. Középen látható a 2 szín hexa kódja a szín négyzete mellett.
uigradients.com oldal
A csodálatos Blurry Beach színátmenet.
  • A webgradients.com oldalon kör alakú elrendezésben láthatóak a színátmenetek. Itt is megtalálható a színek hexa kódja és CSS kódja is. Valamint letölthetőek az ötletek png formátumban. 
webgradients.com oldala
Rengeteg kör alakban elrendezett színátmenet.
  • A gradients.io oldalon csupán tábla elrendezésben és hexa kódokkal találhatók az ötletek, de érdemes innen is ötletet meríteni. 
gradients.io oldala
Tábla elrendezésben található hexa kódokkal is leírt inspirációk.

Hogyan készítsd el a saját verziódat?

  • A superdevresources.com oldalon 2 színből 2 típusú (lineáris és radiális) átmenet majd 8 féle megjelenés készíthető. Hexa kódok és CSS kódok itt is láthatóak a mentés png és jpg formátumban lehetséges.
superdevresources.com oldala
2 arculati színemből készített színátmenet.
  • A mycolor.space oldalon 3 színű grádiens (színátmenet) is készíthető, ami még különlegesebbé teszi a megjelenést. 8 különböző orientációval.
colorspace oldala

Hogyan kombinálhatóak a grádiensek a különböző webdesign stílusokhoz?

SHABBY CHIC

Ez az életstílus elutasít mindent ami új és tökéletes, de úgy marad régi és kopottas, hogy közben igazán elegáns is. A shabby chic stílushoz először is kerestem egy igazán romantikus képet. Készítettem hozzá egy színpalettát (#BFAA69; #8C6B42; #BFA584; #F2E8DF;#D9998B), majd kevertem a színeket . Íme a végeredmény:

shabby chic grádiensek
3 színátmenet shabby chic stílusban
shabby chic paletta
Shabby chic stílusú színpaletta

RETRO

A retro stílushoz a régi dolgok tartoznak, többnyire barnás színátmenetben. Erre a célra ezt a kormányt találtam a leginkább alkalmasnak, a múltbeli meghitt és nosztalgikus utazáshoz, melynek színei: #BF8B5E; #A69C94; #BFB7B0; #8C644D; #402921. A színek keveréséből ez a 3 grádiens keletkezett.

retro színátmenet
3 színátmenet retro stílusban
retro színpaletta
Retro stílusú színpaletta

VINTAGE

Bevallom a vintage az egyik kedvenc stílusum, úgyhogy ehhez igazán nagy öröm volt palettát (#F2D8C2; #E4F2EE; #D9B855; #BF8563; #735949) készíteni és abból grádienst „gyártani”. Ez a stílus a régi kopottas dolgok újragondolásával és a modernitás ötvözésével valami újat teremt. Békebeli hangulat, nosztalgia és természetesség jellemző rá. Nem utolsósorban igazán egyedi weboldalak is építhetőek erre az életérzésre. 

vintage színátmenet
3 színátmenet vintage stílusban
vintage színpaletta
Vintage stílusú színpaletta

GRUNGE

Nos ez egy kissé sötétebb árnyalat és színvilág lett, de azt gondolom, hogy ehhez a stílushoz ez illik igazán. Ez ugyanis egy kopott, szakadt, hippi stílus, melyet először csak zenészekre használtak. Jellemzője a szabálytalan, „piszkos”, foltos háttér tompa színekkel. Az egész összhatása azonban egyfajta vagányságot sugall. A következő színeket használtam a palettában: #3E5902; #6C735D; #262621; #8C884F; #592608.

Grunge stílusú színátmenet
3 színátmenet grunge stílusban
grunge színpaletta
Grunge stílusú színpaletta

MINIMÁL

Ezeken a képeken a 2019-es design stílusból 3 jellemzőt is megjelenítettem: a minimalizmust, az élénk színt és a grádienseket. A minimalizmus a letisztultságot, egyszerűséget jelenti mind a webdesignban, mind az élet más területein. Az erős narancs színnel vagy a grádiensek használatával (színátmenetek) viszont valamivel impulzívabb, egyedibb hatást érhetünk el. A színpalettában szereplő színek: #8C856D; #A69B86; #BF7256; #F2F2F2; #D9D9D9.

minimál stílusú színátmenet
3 színátmenet minimál stílusban
minimál stílusú színpaletta
Minimál stílusú színpaletta

Konklúzió

A fenti grádiensekből látható, hogy bármilyen stílust választasz mindegyiket „feldobja”, ha két vagy több színből készíted el a hátteredet, vagy a gombjaidat. Tehát azért alkalmazz színátmeneteket, mert ettől is feltűnőbb, stílusosabb, elegánsabb lesz az oldalad. 

Amennyiben tetszett amit olvastál, kérlek oszd meg, like-old ezt a bejegyzést! Köszönöm.
Kövess e-mailben!
Facebook
Twitter
Pinterest

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

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük

A felhasználói élmény fokozása érdekében cookie-kat használok. Amennyiben ez bővebben érdekel kattints a további információ gombra. További információ

A süti beállítások ennél a honlapnál engedélyezett a legjobb felhasználói élmény érdekében. Amennyiben a beállítás változtatása nélkül kerül sor a honlap használatára, vagy az "Elfogadás" gombra történik kattintás, azzal a felhasználó elfogadja a sütik használatát.

Bezárás