امسال شاهد بسیاری از گرادیان های رنگی با پالت های از رنگی های پر حرارت و اشکال نامنظم با افکت های مختلف هستیم. گردایان ها در حال حاضر بطرف سادگی در حرکت هستند ، اما از نظر روند بیشتر مورد توجه قرار گرفته اند ، مشخص ترین مورد استفاده آنها در عناصر ثانویه در ترکیب اجزای صفحه است ، مانند اجزای شناور ، عناوین و مطالب تایپوگرافی ، عناصر سه بعدی ، آیکون ها و موارد دیگر.
گرادیان ها از مدتها قبل مد بودند، آنها در ابتدا به صورت متداول در پس زمینه ها و افکت تصاویر
کاربرد داشتند. تا اینکه Spotify با استفاده از گرادیان های دو قطبی روی عکس ها به عنوان عنصر مشخصه نام تجاری در کمپین ها
و میکرو سایت ها ، آنها را دوباره محبوب کرد. تاریخ در حال بازنگری است ، و ما را با کاوش در تحرکات زیبایی شناسی
دهه 80 و آغاز طراحی وب در دهه 90 میلادی سوق می دهد. شواهد گویای احیای گرادیان ها و حرکت از چند رنگی به گرادیان
های دو قطبی است.
مجموعه سایتهای زیبا که با استفاده از عنصر گرادیان طراحی شده اند
مثل همیشه ، ما وب سایت هایی را انتخاب کرده ایم در این مجموعه می توانید افکت های گرادیانی را در این کارها مشاهده نمایید ، امیدواریم که از این مجموعه طراحی سایت که از گرادیان های مرسوم و مد روز استفاده کرده اند الهام بگیرید.
انواع گرادیان
ما می توانیم رنگها را به روشهای مختلف مخلوط کنیم ، متداول ترین آنها گرادیان های خطی یا شعاعی با پارامترهای مختلف مانند شعاع ، جهت گیری ، تیرگی یا نقاط رنگ است. همچنین می توان با مخلوط های غیر یکنواخت که از مش گرادیان یا سایر تکنیک ها استفاده می کنند ، به نتایج مختلفی رسید. با مش گرادیان سطح گرادیان تحریف می شود تا یک شکل جدید ایجاد گردد. انواع مختلفی از گرادیان وجود دارد ، مانند یکنواخت ، دو قطبی ، چند رنگ ، رمپ و غیره ، همانطور که در شکل زیر نشان داده شده است.
ابزارهای مفید برای ایجاد گرادیان در CSS
برای ایجاد جلوه های گرادیان در CSS ، ابزارهای زیادی وجود دارد که به شما امکان می دهد از طریق ویرایشگرهای بصری ، فقط با کپی و جایگذاری کد CSS ، ت=نتایج جالبی به دست بیاورید ، چند نمونه را در اینجا می بینید:
Webgradients, Khroma
AI, Color
Space, UI
Gradients, Grabient, Coolhue, Easing
Gradients in CSS.
EGGRADIENTS
یک پالت از رنگ گرادیان حاوی 200+ رنگ پس زمینه ، که به شما امکان می دهد به راحتی رنگ گرادیان دلخواه خود را پیدا کرده و CSS را مستقیماً در طرح خود کپی کنید!
WEBGRADIENTS
مجموعه ای از 180 عنصر گرادیان با کد CSS و فایل های پس زمینه PNG.
COLORSPACE
یک منبع کامل رنگ با مولد پالت ، مولد گرادیان و گرادیان های 3 رنگی.
COOLHUE
یک Gradient Palette جالب با کدهای CSS همراه با پلاگین برای Figma و Sketch.
GRABIENT
این ایزار گرادیانهای خطی به شما می دهد که می توانید آنها را شخصی سازی کرده و سپس کد CSS گرادیان را بارگیری کنید!
COLOR DESIGNER
شامل بسیاری از ابزارهای رنگی رایگان: مولد پالت ، مولد گرادیان ، میکسر رنگ ، "این چه رنگی است؟" ، مبدل رنگ و موارد دیگر!
CSS GRADIENT
وب سایت اطلاعات زیادی در مورد گرادیان ها و یک ابزار رایگان ارائه می دهد که به شما امکان می دهد یک پس زمینه گرادیان دار برای وب سایت خود ایجاد کنید.