بازی با گرادیان رنگ

در حالی که استفاده از رنگ های مجزا یک راه عالی برای زنده کردن وب سایت است، حتی رنگ ها وقتی همیشه از آنها استفاده می کنید می توانند تا حدودی خسته کننده شوند. برای کمک به ساختن چیزها جالب‌تر این است که استاندارد CSS3 گرادیان‌های رنگی را به ترکیب اضافه می‌کند. یک گرادیان رنگ به آرامی از یک رنگ به رنگ دوم محو می شود و یک انتقال گرم ایجاد می کند اثر این رنگ‌های انتقالی اغلب برای پس‌زمینه استفاده می‌شوند و جلوه ایجاد می‌کنند که به بازدیدکنندگان وب سایت کمک می کند تا محتوا را با تغییر شیب رنگ دنبال کند یک رنگ متفاوت دو نوع گرادینت رنگ در استاندارد CSS3 تعریف شده است:

»» گرادیان های خطی: با استفاده از جهت پهلو به پهلو یا بالا به پایین محو می شوند.

»» گرادیان های شعاعی: از یک نقطه مرکزی استفاده کنید و از آنجا به سمت بیرون محو شوید (تابش کنید)،

بسیار شبیه یک تی شرت کراوات شده این بخش نحوه استفاده از هر یک از این روش ها را در صفحات وب خود مورد بحث قرار می دهد.

گرادیان های خطی

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

گرادیان خطی (جهت، رنگ1، رنگ2)؛ پارامتر جهت تعیین می کند که گرادیان باید به کدام سمت برود. اگر جهت را حذف کنید، مرورگر گرادیان را از بالا به پایین ایجاد می کند که یک امر رایج است افکت برای پس زمینه اگر می خواهید جهت را تغییر دهید، آن را با جهت مشخص کنید.

که گرادیان باید از color1 به color2 محو شود، مانند این:

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

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

پس زمینه: خطی گرادیان (قرمز، نارنجی)؛

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

پس زمینه: گرادیان خطی (قرمز، نارنجی، زرد)؛

این انتقال رنگ را از قرمز به نارنجی و سپس در نهایت به رنگ می گیرد مقصد زرد گرادیان های شعاعی

Radial-gradient() همان کار گرادیان خطی را انجام می دهد، اما در a الگوی دایره ای که از یک نقطه مرکزی تابش می کند. اگر خاطرات خوبی از روزهایی دارید که تی شرت های کراوات دار محبوب بودند، ممکن است شیب های شعاعی را دوست داشته باشید!

فرمت تابع radial-gradient() در اینجا آمده است:

گرادیان شعاعی (اندازه شکل، رنگ 1، رنگ 2، …) کلید ایجاد گرادیان شعاعی پارامتر شکل است که تعریف می کند

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

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

پس زمینه: گرادیان خطی (قرمز، نارنجی، زرد)؛ این انتقال رنگ را از قرمز به نارنجی و سپس در نهایت به مقصد زرد می برد.

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

radial-gradient() همان کار شیب خطی را انجام می دهد، اما در یک الگوی دایره ای که از یک نقطه مرکزی تابش می کند. اگر خاطرات خوبی از روزهایی دارید که تی شرت های کراوات دار محبوب بودند، ممکن است شیب های شعاعی را دوست داشته باشید!

فرمت تابع radial-gradient() در اینجا آمده است:

گرادیان شعاعی (اندازه شکل، رنگ 1، رنگ 2، …)

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

همچنین می خواهید دو یا چند رنگ را برای ایجاد افکت گرادیان در تصویر تعریف کنید. ساده ترین راه برای تعریف گرادیان شعاعی این است که فقط رنگ ها را تعریف کنیم: پس زمینه: گرادیان شعاعی (قرمز، نارنجی، زرد)؛ این یک گرادیان شعاعی بیضوی ایجاد می کند که در مرکز عنصر قرار دارد و به سمت خارج به سمت دورترین گوشه تابش می کند.