آموزش شیب های CSS

13 جولای 2021

شیب های CSS به شما امکان می دهد انتقالهای روان بین دو یا چند رنگ مشخص شده را نشان دهید.

CSS دو نوع شیب را تعریف می کند:

  • شیب های خطی (پایین / بالا / چپ / راست / مورب پایین می رود)
  • شعاع شعاعی (تعریف شده توسط مرکز آنها)

شیب های خطی CSS

برای ایجاد یک شیب خطی باید حداقل دو ایستگاه رنگی تعریف کنید. توقف رنگ ، رنگ هایی است که می خواهید انتقال های روان را در بین آنها ایجاد کند. همچنین می توانید یک نقطه شروع و یک جهت (یا یک زاویه) را همراه با اثر گرادیان تنظیم کنید.

نحو

background-image: linear-gradient(directioncolor-stop1color-stop2, …);

جهت – بالا به پایین (این پیش فرض است)

مثال زیر یک شیب خطی را نشان می دهد که از بالا شروع می شود. قرمز شروع می شود ، به زرد تغییر می کند:

مثال

#grad {
  background-image: linear-gradient(red, yellow);
}

جهت – از چپ به راست

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

مثال

#grad {
  background-image: linear-gradient(to right, red , yellow);
}

جهت – مورب

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

مثال زیر یک شیب خطی را نشان می دهد که از بالا سمت چپ شروع می شود (و به پایین راست می رود). قرمز شروع می شود ، به زرد تغییر می کند:

مثال

#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}

با استفاده از زاویه

اگر می خواهید کنترل بیشتری بر جهت شیب داشته باشید ، می توانید به جای جهت های از پیش تعریف شده (به پایین ، به بالا ، به راست ، به چپ ، به پایین راست و غیره) یک زاویه تعیین کنید. مقدار 0deg معادل “به بالا” است. مقدار 90deg معادل “به راست” است. مقدار 180deg معادل “به پایین” است.

نحو

background-image: linear-gradient(anglecolor-stop1color-stop2);

مثال زیر نحوه استفاده از زاویه ها روی شیب های خطی را نشان می دهد:

مثال

#grad {
  background-image: linear-gradient(180deg, red, yellow);
}

با استفاده از چندین توقف رنگی

مثال زیر یک شیب خطی (از بالا به پایین) با چندین توقف رنگی را نشان می دهد:

مثال

#grad {
  background-image: linear-gradient(red, yellow, green);
}

مثال زیر نحوه ایجاد یک شیب خطی (از چپ به راست) با رنگ رنگین کمان و برخی از متن ها را نشان می دهد:

مثال

#grad {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

با استفاده از شفافیت

شیب های CSS همچنین از شفافیت پشتیبانی می کنند ، که می تواند برای ایجاد جلوه های محو شود.

برای افزودن شفافیت ، از تابع rgba () برای تعیین توقف رنگ استفاده می کنیم. آخرین پارامتر در تابع rgba () می تواند مقداری از 0 تا 1 باشد و شفافیت رنگ را تعریف می کند: 0 نشان دهنده شفافیت کامل ، 1 نشان دهنده رنگ کامل (بدون شفافیت) است.

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

مثال

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

تکرار شیب خطی

از تابع تکرار گرادیان خطی () برای تکرار شیب های خطی استفاده می شود:

مثال

یک شیب خطی تکراری:

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

منبع

مقاله‌های مشابه

7 مرحله فروش بیمه عمر (2)

7 مرحله فروش بیمه عمر (2)

18/9/96 چه بلایی سر آدم میاره خیلی جالبه انقدر سنگ، توام داری درست راه میری اینجوری لنگ میزنی، وقتی یه ذره زمانش طولانی تر بشه دیگه لنگ نمیزنی مجبوری اینجوری کنی من دیگه نمیتونم بیام یه ذره میشینی پامیشی، فروش اینو خیلیها حذف میکنن، برای خیلیها تو ذهنشون همون سنگه...

بیشتر بخوانید
7 مرحله فروش بیمه عمر (1)

7 مرحله فروش بیمه عمر (1)

11/9/96 امروز میخوایم 7 مرحله فروش بیمه عمر یا هر محصولی که شما در کل کره زمین میشناسید، وقتی میگم محصول یه روز این محصولی که داریم ازش صحبت میکنیم میتونه هر چیزی به چیزی بجز بیمه عمر باشه، یکی از مهمترین مباحثی که در دوره تکنسین یاد میگیرید و عملاً آچارفرانسه تمام...

بیشتر بخوانید

شما هم به جمع ۱۰۰,۰۰۰ مشترک خبرنامه‌ ما بپیونید

0 دیدگاه

یک دیدگاه بنویسید

نشانی ایمیل شما منتشر نخواهد شد.