آموزش تابع radial-gradient در CSS

اگر مقاله قبلی ما یعنی ” آموزش تابع linear-gradient در CSS ” را مطالعه کرده باشید ، درمورد بحث gradient درحالت linear توضیحات کاملی را خدمتتان ارائه کردیم و در انتهای همان مقاله قول دادیم که در این بخش نیز درمورد حالت radial برای gradient خدمتتان توضیحات لازمه را ارائه کنیم تا مباحث gradient به شکل کامل به اتمام برسد و تمامی نکات مربوط به این بخش را یاد گرفته باشید .

حالت radial-gradient نوعی از پاشش رنگ است اما به حالت radial ( دایره‌ای ) برای پس زمینه ، که می‌توانید بصورت ترکیب رنگ از مرکز هر المان یا گوشه‌های آن استفاده کنید . حالت کلی این دستور بصورت زیر است :

background-image: radial-gradient(red, yellow, green);

این دستور حالات مختلفی را ممکن است ایجاد کند برای مثال نمونه زیر :

background-image: radial-gradient(circle at top right, yellow, #f06d06);

در این حالت جهت پاشیده شدن رنگ از جهت بالا سمت راست است و می‌توانید مصداق آن را در زیر مشاهده کنید که بصورت کروی از گوشه‌ی بالا و سمت راست به سمت گوشه پایین و سمت چپ حرکت می‌کند :

یا برای مثال یک نمونه دیگر را نیز از این دستور می‌توانید به شکل زیر بنویسید که شامل مقادیری با % است :

background-image: radial-gradient(at 50% 50% , black , orange , blue);

خروجی این دستور بصورت زیر نمایش داده می‌شود :

البته که این پاشش رنگ نمای جذابی ندارد و لازم است تا در این موارد با دقت و ظرافت بیشتری عمل کنید و هدف در این بخش ، آموزش صحیح استفاده از دستور gradient در حالت radial است . یک نمونه دیگر از حالت radial را می‌توانیم بصورت زیر داشته باشیم که شامل دستور ” circle closest-side ” برای تعیین جهت است :

background-image: radial-gradient(circle closest-side, yellow,black, #673AB7);

خروجی دستور را مشاهده کنید :

همانند حالت linear-gradient در این بخش نیز یک اسکلت کلی داریم که مطمئنا تاکنون آن را یاد گرفته‌اید :

radial-gradient( shape size at position , start_color , ... , end_color );

همانند مطالبی که در مقاله قبلی گفتیم ، می‌توانید برای طراحی gradient های جذاب از وب سایت‌‎های کمکی استفاده کنید . همان سایتی که در محتوای قبلی خدمتتان معرفی کردیم در اینجا نیز کاربرد دارد . مجدد باید از سایت cssgradient.io استفاده کنید .

در این وب سایت برای اینکه حالت radial در گردینت را ایجاد کنید ، باید از پایین و سمت چپ ( زیر بخش انتخاب کننده رنگ ) حالت radial را انتخاب کرده و رنگ‌های خود را انتخاب کنید و سپس از قطعه کد تولید شده استفاده کنید .

بحث radial-gradient دستوری است که استفاده از آن در مثال‌های کمی ممکن است و داخل پروژه‌های واقعی شاید از آن خیلی خیلی کم استفاده کنید و یا هرگز استفاده نکنید . معمولا برای ساخت دکمه‌های جذاب در سایت با پاشش رنگ از گوشه ( همانند مثال اول در این صفحه ) ممکن است مورد استفاده قرار گیرند لذا بروی این بخش نیازی نیست تا تمرکز داشته باشید . صرفا اطلاع از نحوه کار این دستور برای شما کافی است .

امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

اشتراک گذاری محتوا