در حدود 8 یا 9 سال پیش در طرح های مختلف از گرادینت ها (Gradients)  بسیار استفاده می شد. اما با گذشت زمان و شناخت و به کارگیری سبک های جدید طراحی همچون طراحی مسطح (Flat Design) و طراحی متریال گوگل (Google Material Design) توسط طراحان ایرانی، گرادینت ها به مرور نادیده گرفته شدند و به قولی، از مد افتادند! اما حالا گرادینت ها به طراحی مدرن بازگشته اند؛ با قدرتی بیش از پیش! در این مقاله به بررسی برخی موارد استفاده از Gradient ها خواهیم پرداخت.

امروزه نحوه استفاده از گرادینت ها نسبت به گذشته تغییر زیادی داشته است. در طراحی مدرن، معمولا آن ها را در زمینه و یا بر روی عکس ها با استفاده از تکنیک های Blending استفاده می کنند. همچنین عمدۀ گردینت های امروزی به صورت دو تونی (Duotone) هستند. بهتر از توضیح این مسائل با کلمات، این  است که نمونه هایی از آن ها را ببینیم.
کمپانی اسپاتیفای (Spotify) در طراحی یکی از وبسایت های خود به نام 2015 Year in Music از این تکنیک استفاده کرده که با استقبال کاربرانش روبرو شده است.


Spotify 2015 Year in Music

 

اما امسال استفادۀ طراحان از گرادیان های مختلف چند رنگی (Multicolored Gradients) را نیز شاهد بودیم. این رنگ ها معمولا شامل رنگ های پرجنب و جوش می شد. با اشکالی نامنظم و با افکت هایی همچون تار شدن و Distortion.
امروزه از Gradient ها به روش های مختلفی استفاده می شود؛ اما مشخص ترینِ آن ها اضافه شدن آن ها به جلوه های ثانویه است. برای مثال در حالت Mouse Over، در عنوان ها، عناصر سه بعدی، آیکون ها و غیره.


Gradients in Hover

 

وبسایت معرفی IPhone X علاوه بر ارائه اطلاعات لازم درباره محصول خود، مدرن ترین نکات طراحی را در سال 2018 با دیزاین وبسایتش معرفی کرد. همچنین در بالای این سایت، مشاهده می شود که گرادینت ها همانند حالت سنتی خود (همچون Linear، Radial و غیره) به کار برده نشده اند. در آن ها از چندین رنگ و با ترکیب هایی نامنظم استفاده شده است.


IPhone X Landing

 

IPhone X Landing

برخی ابزارهای کاربردی برای استفاده از CSS3 Gradients
برای استفاده از گرادینت ها در طراحی سایت از CSS استفاده می شود. ابزارهای مختلفی برای طراحی Web Gradient ها وجود دارد که کاربردی ترین هایشان را معرفی می کنیم:

  1. Khorama
  2. Webgradients
  3. Color Space
  4. Cool Hue
  5. Easing Gradients
  6. UI Gradients

 

برگرفته از وبسایت Awwwards