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

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

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

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

Free-Learn

تابع linear-gradient در CSS

با استفاده از تابع linear-gradient ( در لغت به معنی شیب خطی ) در CSS میتوان یک شیب خطی که از چندین رنگ ایجاد شده، مشخص و یا تعریف نمود، مثلا میتونیم رنگ زمینه یه باکس رو همزمان هم آبی و هم قرمز کنیم ، یعنی ترکیب این ۲تا رنگ باهمدیگه میشه یه رنگ Gradient ، به همین سادگی

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

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

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

نسخه CSS3

Free-Learn

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

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

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

امتحان کنید

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

امتحان کنید

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

امتحان کنید

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

امتحان کنید

مثال شماره ۵ : استفاده از زوایه ( یعنی در مثال پایین داره میگه رنگ رو در زاویه ۹۰ درجه بپاش )

امتحان کنید

Free-Learn

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

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

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

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 )
  • برای تولید انواع رنگ های گریدینت میتوانید از ابزار آنلاین فری لرن استفاده نمایید. [ مشاهده ابزار ]

Free-Learn

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