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

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

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

Free-Learn

تابع repeating-radial-gradient در CSS

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

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

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

با استفاده از یک مقدار درصدی ( از ۰% تا ۱۰۰% ) نیز میتوان مشخص کرد که یک رنگ تا چه اندازه از کل رنگ زمینه را تشکیل بدهد.

نسخه CSS3

Free-Learn

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

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

مثال شماره ۱ : استفاده از جهت و شکل ( شکل دایره ای – از سمت بالا » چپ )

امتحان کنید

Free-Learn

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

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

» عددی که در کنار -webkit- و -moz- و -o- وجود دارد ، یعنی از آن نسخه به بالا باید از این پیشوندها استفاده نمایید. ( درباره پیشوندها بیشتر بخوانید )

نام تابع Chrome Firefox Opera Safari IE
()repeating-radial-gradient ۲۶٫۰
۱۰٫۰ -webkit-
۱۶٫۰
۳٫۶ -moz-
۱۲٫۱
۱۱٫۱ -o-
۶٫۱
۵٫۱ -webkit-
۱۰٫۰

Free-Learn

شکل نوشتاری

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

Free-Learn

جدول مقادیر تابع repeating-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

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

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

  • -webkit- برای مرورگر کروم و سافاری
  • -moz- برای مرورگر موزیلا فایرفاکس
  • -o- برای مرورگر اُپرا

Free-Learn

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