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

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

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

Free-Learn

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

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

بطور کلی این تابع همان تابع linear-gradient می باشد، فقط در این تابع میتوان مشخص کرد که رنگ در ۲ جهت بصورت بی نهایت تکرار شود.

نسخه CSS3

Free-Learn

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

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

مثال شماره ۱ : استفاده از جهت ( به سمت راست )

امتحان کنید

مثال شماره ۲ : استفاده از زاویه ( درجه )

امتحان کنید

Free-Learn

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

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

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

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

Free-Learn

شکل نوشتاری

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

Free-Learn

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

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

مقدار توضیح
direction جهت پاشیده شدن رنگ را مشخص میکند
استفاده از کلمات کلیدی زیر مجاز می باشد

to top
to right
to bottom
to left
to top left
to top right
to bottom left
to bottom right

یا استفاده از درجه / زاویه ( همانند مقادیر زیر )

… , color1 , color2
رنگ شماره ۱ ,  رنگ شماره ۲ و…
( یک مقدار از %۰ تا %۱۰۰ در کنار رنگ میتواند میزان پخش شدن رنگ را مشخص کند )

Free-Learn

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

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

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

Free-Learn

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