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

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

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

Free-Learn

تابع linear-gradient در CSS

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

باید تا الان دیده باشید، پس زمینه های رنگی که از ترکیب چندین رنگ تشکیل شده اند، مثلا از مخلوط کردن رنگ قرمز و نارنجی میتوان یک زمینه رنگی زیبا برای پس زمینه یک عنصر ایجاد کرد.

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

با استفاده از جهت های بالا – راست – پایین و چپ و یا با استفاده از زوایه ( angle ) مثلا ۴۵deg ( یعنی زاویه ۴۵ درجه ) میتوان جهت پاشیده شدن رنگ را مشخص و یا تعریف نمود.

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

نسخه CSS3

Free-Learn

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

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

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

امتحان کنید

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

امتحان کنید

مثال شماره ۳ : استفاده از چندین رنگ ( بیش از ۳ رنگ )

امتحان کنید

مثال شماره ۴ : استفاده از درصد در کنار رنگ ها ( مثلا میگیم رنگ قرمز ۵۰ درصد از رنگ زمینه را تشکیل دهد و رنگ نارنجی هم ۵۰ درصد )

امتحان کنید

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

امتحان کنید

Free-Learn

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

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

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

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

Free-Learn

شکل نوشتاری

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

Free-Learn

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

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

در یک آموزش جداگانه ( بصورت کامل ) در مورد رنگ گریدینت ( Gradient ) صحبت کردم که پیشنهاد میکنم این آموزش را حتما مشاهده نمایید. ( آموزش رنگ گریدینت یا Gradient در CSS )

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

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

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

Free-Learn

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