شیب های CSS

ایجاد شیب های CSS را بررسی می کنیم.

شیب های CSS به تصاویری اطلاق می شود که انتقال آرام بین چندین رنگ را نشان می دهد. CSS سه گزینه را ارائه می دهد: شیب خطی ، شیب شعاعی و شیب مخروطی.

ایجاد شیب های خطی

شیب های خطی CSS با عملکرد خطی-شیب () ایجاد می کند. نتیجه این عملکرد یک تصویر است که انتقال بین چندین رنگ را در امتداد یک خط مستقیم نشان می دهد.

یک روش آسان برای ایجاد شیب های خطی در CSS استفاده از تابع شیب خطی و نشان دادن چندین مقدار رنگ در پرانتز است:

زمینه: شیب خطی (جهت ، رنگ-stp1 ، رنگ-stp2 ، …) ؛

انتقال بالا / پایین (پیش فرض)

در این مثال ، یک شیب خطی در CSS از بالا شروع می شود و تغییر می کند. CSS این جهت را به صورت خودکار تنظیم می کند در حالی که کلمات کلیدی جهت دار دیگری وجود ندارد.

#grad {
    background: linear-gradient(#ff5e7c, #c272d4);
}

انتقال چپ / راست

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

#grad {
  background: linear-gradient(to right, #ff5e7c, #c272d4);
}

انتقال مورب

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

#grad {
  background: linear-gradient(to bottom right, #ff5e7c, #c272d4); 
}

دستکاری شیب های خطی

زاویه ایجاد شیب های CSS

علاوه بر نامگذاری کلمات کلیدی برای تعیین جهت شیب ها ، CSS می تواند زوایای خاصی را برای انتقال توصیف کند.

زمینه: شیب خطی (زاویه ، رنگ-stp1 ، رنگ-stp2) ؛

این مثال تعریف می کند که گرادیان خطی 180 درجه دارد:

#grad {
  background: linear-gradient(180deg, #ff5e7c, #c272d4); 
}

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

CSS بیش از دو مقدار رنگ را برای شیب ها می پذیرد.

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

#grad {
  background: linear-gradient(#ff5e7c, #c272d4, #718ced); 
}

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

#grad {
  background: linear-gradient(to left, #ff5e7c, #c272d4, #718ced, #02aab0, #00cdac);
}

استفاده از شفافیت در انتقال ها

مقدار شفافیت یک اثر شیب شفاف و محو در CSS ایجاد می کند.

شاخص های RGBA() یا HSLA() مقدار کدری را از 0 به 1 اضافه می کنند (1 نشان دهنده رنگهای ثابت است).

این مثال نحوه تنظیم شیب شفاف در CSS را نشان می دهد:

#grad {
  background: linear-gradient(to right, rgb(255, 94, 124, 0.5), rgb(194, 114, 212, 1)); 
}

ضرب شیب های خطی

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

این مثال الگوی شیب را تکرار می کند:

#grad {
  background: repeating-linear-gradient(#718ced, #753a88 15%, #ff5e7c 25%); 
}

ایجاد شعاع های شعاعی

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

زمینه: شیب شعاعی (اندازه شکل در موقعیت ، رنگ شروع ، … ، آخرین رنگ)؛

توجه: به طور پیش فرض ، شکل یک بیضی است ، موقعیت آن مرکز و اندازه آن دورترین گوشه است.

توقف رنگی به طور مساوی (به طور پیش فرض)

به طور پیش فرض ، گرادیان شعاعی CSS از مرکز عناصر شروع به تابش می کند و به رنگ های دیگر به سمت لبه ها منتقل می شود.

این مثال انتقالی را نشان می دهد که از مرکز آغاز می شود:

#grad {
  background: radial-gradient(#ff5e7c, #c272d4, #6bbae8); 
}

توقف رنگی با فاصله متفاوت

مقادیر درصد (٪) اضافه شده به اندیکاتورهای رنگ توصیف می کند که هر رنگ چقدر باید فضای لازم را داشته باشد.

این مثال یک شیب شعاعی را نشان می دهد که رنگ ها را به طور مساوی مرتب نمی کند:

#grad {
  background: radial-gradient(#ff5e7c 10%, #c272d4 50%, #6bbae8 80%);
}

تنظیم شکل

پارامتر شکل در شیب های شعاعی مشخص می کند که CSS چه فرم باید ایجاد کند. مقدار می تواند بیضی یا دایره باشد. بیضی پیش فرض است.

این مثال یک شیب شعاعی در یک دایره ایجاد می کند:

#grad {
  background: radial-gradient(circle, #ff5e7c, #c272d4, #6bbae8); 
}

دستکاری شیب های شعاعی

اندازه کلمات کلیدی

پارامتر size اندازه گرادیان را مشخص می کند. در اینجا مقادیر ممکن است:

• نزدیکترین طرف
• دورترین طرف
• نزدیکترین گوشه
• دورترین گوشه

نکته: با قرار دادن آن در این جمله ، در مورد مقداری که نیاز دارید تصمیم بگیرید – بگذارید رنگ از مرکز به [مقدار وارد شود] محو شود.

در مثال ، ما برای نشان دادن تفاوت نزدیکترین و دورترین سمت از دو مقدار مخالف استفاده می کنیم:

#grad1 {
  background: radial-gradient(closest-side at 65% 50%, #ff5e7c, #c272d4, #6bbae8); 
}

#grad2 {
  background: radial-gradient(farthest-side at 65% 50%, #ff5e7c, #c272d4, #6bbae8); 
}

تکرار شیب های شعاعی

ویژگی تکرار-شعاعی-گرادیان به شما امکان می دهد گرادیان شعاعی را در CSS تکرار کنید تا الگوهای مارپیچی ایجاد کنید.

#grad {
  background: repeating-radial-gradient(#5b07ff, #ff008d 15%, #5d78f9 25%); 
}

تنظیم شیب های مخروطی

تابع conic-gradient () مخروطی ایجاد می کند مانند Crad radient-gradient (). هر دو انتقال را از وسط شروع می كنند ، اما شیب های مخروطی توقف رنگ را در اطراف دایره قرار می دهند.

یک مثال اساسی از یک شیب مخروطی در CSS مانند این است:

#grad {
 height: 300px;
 width: 600px;
 background: blue; /* In case a browser doesn't support gradients */
 background: conic-gradient(#ff5e7c, #c272d4, #6bbae8); /* Standard syntax */
 background: -webkit-conic-gradient(#ff5e7c, #c272d4, #6bbae8); /* Safari */
}

بخاطر بسپارید: تابع conic-gradient () بهترین پشتیبانی از مرورگر را ندارد – فقط در Google Chrome ، Opera و Safari کار می کند.

ایجاد شیب مخروطی از سایر نقاط

اگر درصد های دیگری به غیر از 50 و 50 درصد را تعیین کنید ، انتقال از نقطه دیگری شروع می شود:

#grad {
 height: 300px;
 width: 600px;
 background: blue; /* In case a browser doesn't support gradients */
background: conic-gradient(at 30% 30%, #ff5e7c, #c272d4, #6bbae8); /* Standard syntax */
  background: -webkit-conic-gradient(at 30% 30%,#ff5e7c, #c272d4, #6bbae8); /* Safari */
}

تنظیم یک زاویه در شیب های CSS

اگر لازم است انتقال را از زاویه دیگری شروع کنید ، می توانید آن را به صورت زیر مشخص کنید:

#grad {
 height: 300px;
 width: 600px;
 background: blue; /* In case a browser doesn't support gradients */
background: conic-gradient(from 60deg, #ff5e7c, #c272d4, #6bbae8); /* Standard syntax */
  background: -webkit-conic-gradient(from 60deg,#ff5e7c, #c272d4, #6bbae8); /* Safari */
}

نکات مهم ایجاد شیب های CSS:

• در صورتی که شیب ها در بعضی از مرورگرها کار نمی کنند ، حتماً ویژگی رنگ پس زمینه را به عنوان یک تابع بازگشتی قرار دهید.
• شما می توانید از شیب های CSS در هر مکانی که به طور معمول یک تصویر اضافه می کنید استفاده کنید. از آنجا که مرورگرها شیب ایجاد می کنند ، بهتر از تصاویر شطرنجی هستند.

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.