این آموزش در تاریخ ۱۴۰۰/۱۰/۲۰ آپدیت شده است.

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

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

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

Free-Learn

تابع radial-gradient در CSS

با استفاده از تابع radial-gradient ( در لغت به معنی شیب شعاعی ) در CSS میتوان یک شیب شعاعی ( دایره ای ) که از چندین رنگ ایجاد شده، مشخص و یا تعریف نمود.

این تابع رنگ را بصورت شعاعی ( یاهم دایره ای – از مرکز ) ایجاد میکند، ولی تابع linear-gradient میتواند رنگ را بصورت خطی ( مثلا از سمت راست به چپ و.. ) ایجاد نماید.

با استفاده از جهت های بالا – راست – پایین و چپ و یا با استفاده از واحدهای اندازه گیری ( همچون PX یا % ) میتوان محل / موقعیت پاشیده شدن رنگ را مشخص و یا تعریف نمود.

نسخه CSS3

Free-Learn

مثال از تابع radial-gradient در CSS

در ادامه میتوانید یک مثال از این تابع را در زبان CSS مشاهده نمایید.

مثال شماره ۱ : پاشیده شدن رنگ های قرمز ، زرد و سبز از مرکز

امتحان کنید

مثال شماره ۲ : استفاده از جهت ( پاشیده شدن رنگ از جهت بالا سمت راست )

امتحان کنید

مثال شماره ۳ : مشخص کردن موقعیت قرارگیری رنگ ( مثلا گفتیم بصورت افقی ۱۰درصد و بصورت عمودی ۵۰ درصد )

امتحان کنید

مثال شماره ۴ : مشخص کردن نحوه پاشیده شدن رنگ ( نزدیک اطراف باکس )

امتحان کنید

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تابع radial-gradient در CSS پشتیبانی میکنند یا خیر.

نام تابع Chrome Firefox Opera Safari Edge
()radial-gradient ۲۶ ۱۶ ۱۲٫۱ ۷ بله

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این تابع در CSS بصورت زیر می باشد.

Free-Learn

جدول مقادیر تابع radial-gradient در CSS

در جدول زیر میتوانید، مقادیری را که میتوان در این تابع استفاده کرد مشاهده نمایید.

مقدار توضیح
shape شکل شیب شعاعی را مشخص میکند
ellipse ( بیضی – بصورت پیش فرض )
circle ( دایره ای )
size سایز / اندازه نمایشی شکل شیب شعاعی را مشخص میکند – مشاهده مثال
farthest-corner ( پیش فرض – دور از گوشه ها )
closest-side ( نزدیک اطراف )
closest-corner ( نزدیک گوشه ها )
farthest-side ( دور از اطراف )
position موقعیت یا محل قرار گیری را مشخص میکند
( پیش فرض مقدار center می باشد، یا هم بصورت ۵۰% ۵۰% )
استفاده از کلمات کلیدی مجاز زیر :
at top
at bottom
at left
at right
at top right
at top left
at bottom right
at bottom left
یا استفاده از واحدهای اندازه گیری همچون پیکسل یا درصد : مثال
( مقدار اول بصورت افقی و مقدار دوم عمودی را مشخص میکند )

start_color , … , end_color رنگ شماره ۱ , رنگ شماره ۲ و…

Free-Learn

نکات و توضیحات

  • برای تولید انواع رنگ های گریدینت میتوانید از ابزار آنلاین فری لرن استفاده نمایید. [ مشاهده ابزار ]

Free-Learn

دریافت PDF یا پرینت این مطلب