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 színátmenet
Azure Pop 2 szín átmenete
Zöld, kék, sárga átmenetei
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.