گرادینت چیست و چه کاری انجام می دهد
گرادینت یک نوع تصویر می باشد که از دو یا چند رنگ که به آرامی در هم محو می شوند تشکیل می شود و در نهایت تولید طیف های رنگی می کند. ساخت Gradient کار سادهای نیست مخصوصاً اگر بخواهید تنظیمات خاصی به آن بدهید البته سایت هایی هستند مانند uigaradient که یک کدهای گرادینت آماده را در اختیار شما قرار می دهد اما ما اینجا در فرازگر ابزار پیشرفته ای را برای ساخت گرادینت CSS در نظر گرفته ایم که به آسانی و با سلیقه خود کدهای CSS گرادینت خود را تولید کنید.
نحوه ساخت گرادینت CSS به چه شکل است
برای ایجاد این نوع از gradient ها نیاز داریم که حداقل 2 رنگ مختلف را انتخاب کرده باشیم. کار gradient این است که بین این 2 رنگ به صورت نرم انتقال رنگی انجام دهد و direction جهت حرکت طیف را مشخص میکند. در صورتی که این خصوصیت را تعریف نکنید به صورت پیش فرض مسیر حرکت به سمت پایین است. ساختار کلی این دستور به شکل زیر است.
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
جهت های حرکت میتواند به صورت های زیر تعریف شود:
- to top right
- to top left
- to bottom right
- to bottom left
درصورتی که بخواهید به جای استفاده از دستورات بالا از درجه استفاده کنید، کافیست مقدار مورد نظر خود را برای مثال به این شکل 225deg بکار ببرید
انواع گرادینت
ما در CSS دو نوع gradient میتوانیم تعریف کنیم:
- های linear (خطی): این gradient ها به صورت مورب به جهات مختلف (مانند بالا، پایین، راست و چپ) می روند.
- gradient های radial (شعاعی): یک مرکز دارند و به صورت شعاع برای آن مرکز حرکت می کنند.
نحوه کار با ابزار ساخت گرادینت CSS
کار با این ابزار بسیار ساده است، کافیست دستک ها و رنگ ها را با توجه به نیاز خود تغییر داده تا به طیف رنگ مورد نظر خود برسید و سپس در آخر از سمت راست بر روی دکمه کپی دستورات CSS کلیک کنید تا در حافظه کلیپ بورد را ذخیره کنید تا بتوانید آن را در محل کد نویسی خود ذخیره کنید.
سلام خیلی ممنونم یک قسمت هم برای box shadow هم درست کنید خیلی عالی میشه