گرادیان ها

پادکست CSS - 021: Gradients

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

ممکن است در ابتدا فکر کنید که برای این کار باید یک تصویر را از ابزار طراحی خود صادر کنید، اما می توانید به جای آن از یک linear-gradient استفاده کنید.

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

گرادیان خطی

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

.my-element {
    background: linear-gradient(black, white);
}

همچنین می‌توانید یک زاویه یا کلمات کلیدی که یک زاویه را نشان می‌دهند ارسال کنید. اگر می خواهید از کلمات کلیدی استفاده کنید، جهتی را بعد از کلمه کلیدی to مشخص کنید. این به این معنی است که اگر شیب سیاه و سفیدی را می‌خواهید که از چپ (سیاه) به راست (سفید) اجرا می‌شود، زاویه را to right به عنوان اولین آرگومان مشخص می‌کنید.

.my-element {
    background: linear-gradient(to right, black, white);
}

یک مقدار توقف رنگ که در جایی که یک رنگ متوقف می شود و با همسایگان خود مخلوط می شود، تعریف می شود. برای شیبی که با سایه تیره قرمز شروع می شود و با زاویه 45 درجه، در 30 درصد اندازه گرادیان به قرمز روشن تر تغییر می کند: به نظر می رسد.

.my-element {
    background: linear-gradient(45deg, darkred 30%, crimson);
}

می‌توانید هر تعداد رنگ و توقف رنگ را در یک linear-gradient() اضافه کنید، و می‌توانید با جدا کردن هر گرادیان با کاما، گرادیان‌ها را روی هم قرار دهید.

گرادیان شعاعی

برای ایجاد یک گرادیان که به صورت دایره‌ای تابش می‌کند، تابع radial-gradient() وارد عمل می‌شود. این شبیه به linear-gradient() است، اما به جای تعیین زاویه، به صورت اختیاری یک موقعیت و شکل انتهایی را مشخص می‌کنید. اگر فقط رنگ‌ها را مشخص کنید، radial-gradient() موقعیت را به‌عنوان center انتخاب می‌کند و بسته به اندازه کادر، یک دایره یا بیضی را انتخاب می‌کند.

.my-element {
    background: radial-gradient(white, black);
}

موقعیت گرادیان مشابه background-position با استفاده از کلمات کلیدی و/یا مقادیر عددی است. اندازه گرادیان شعاعی اندازه شکل انتهایی گرادیان (دایره یا بیضی) را تعیین می کند و به طور پیش فرض farthest-corner خواهد بود، به این معنی که دقیقاً با دورترین گوشه کادر از مرکز مطابقت دارد. همچنین می توانید از کلمات کلیدی زیر استفاده کنید:

• closest-corner به مرکز شیب نزدیکترین گوشه خواهد رسید.
• closest-side با نزدیکترین سمت جعبه به مرکز گرادیان ملاقات می کند.
• farthest-side برخلاف closest-side عمل می کند.

می‌توانید هر تعداد استاپ رنگ را که دوست دارید اضافه کنید، درست مانند linear-gradient . به همین ترتیب، می‌توانید به تعداد دلخواه radial-gradients اضافه کنید.

گرادیان مخروطی

یک گرادیان مخروطی یک نقطه مرکزی در جعبه شما دارد و از بالا (به طور پیش فرض) شروع می شود و در یک دایره 360 درجه می چرخد.

.my-element {
    background: conic-gradient(white, black);
}

تابع conic-gradient() آرگومان های موقعیت و زاویه را می پذیرد.

به طور پیش فرض، زاویه 0 درجه است که از بالا، در مرکز شروع می شود. اگر بخواهید زاویه را روی 45deg تنظیم کنید، گوشه سمت راست بالا خواهد بود. آرگومان زاویه هر نوع مقدار زاویه را می پذیرد، مانند گرادیان های خطی و شعاعی.

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

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

تکرار و مخلوط کردن

هر نوع گرادیان یک نوع تکرار شونده نیز دارد. اینها عبارتند از repeating-linear-gradient() ، repeating-radial-gradient() و repeating-conic-gradient() . آنها مشابه توابع غیر تکراری هستند و آرگومان های یکسانی را می گیرند. تفاوت این است که اگر گرادیان تعریف شده را بتوان برای پر کردن جعبه تکرار کرد، بر اساس هر دو اندازه آنها، این کار انجام می شود.

اگر به نظر می رسد گرادیان شما تکرار نمی شود، احتمالاً طولی را برای یکی از توقف های رنگ تعیین نکرده اید. برای مثال، می‌توانید با تنظیم طول توقف رنگ، یک پس‌زمینه راه راه با repeating-linear-gradient ایجاد کنید.

.my-element {
  background: repeating-linear-gradient(
    45deg,
    red,
    red 30px,
    white 30px,
    white 60px
  );
}

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

منابع

• Conic.css - مجموعه ای مفید از گرادیان های مخروطی
• راهنمای MDN برای گرادیان
• مولد گرادیان

درک خود را بررسی کنید

دانش خود را از گرادیان تست کنید