WordAbyss

تبلیغات:

در رشدWordAbyssسهیم باشید

حمایت شما برای ادامه مسیر به ما انگیزه می‌دهد.

حمایت اختیاری
Daramet

سازنده گرادینت CSS

ابزار حرفه‌ای و دقیق برای تولید کدهای رنگ CSS3 به صورت آنلاین.طراحی رابط کاربری مدرن با خروجی استاندارد و سبک.

deg
%
%
پیش‌نمایش زنده
CSS CODE
background: ;

گرادینت CSS چیست؟ (مبانی علمی)

گرادینت در طراحی وب (CSS Gradients) به تکنیکی گفته می‌شود که در آن دو یا چند رنگ به صورت تدریجی و پیوسته در یکدیگر محو می‌شوند. این قابلیت که در CSS3 معرفی شد، طراحان را از استفاده از تصاویر سنگین برای ایجاد پس‌زمینه‌های رنگی بی‌نیاز کرد. از نظر فنی، گرادینت‌ها توسط مرورگر به عنوان یک تصویر (<image>) رندر می‌شوند، اما با این تفاوت که حجم آن‌ها صفر است و قابلیت تغییر مقیاس بدون افت کیفیت را دارند. استفاده صحیح از گرادینت می‌تواند عمق بصری (Visual Depth) رابط کاربری را به شدت افزایش دهد.

فرمول محاسبه و سینتکس

ساختار کلی تابع گرادینت خطی در CSS به شکل زیر است. درک این ساختار به شما کمک می‌کند تا بدون ابزار هم بتوانید کدهای ساده را بنویسید:

linear-gradient( [direction], color-stop1, color-stop2, ... );
  • Direction: جهت تابش (مثل 90deg یا to right).
  • Color Stop: شامل رنگ و محل پایان آن (مثلا blue 20%).

مثال‌های کاربردی در وب فارسی

دکمه پرداخت

در فروشگاه‌های اینترنتی ایرانی، برای دکمه‌های "افزودن به سبد خرید" معمولا از گرادینت‌های قرمز به نارنجی استفاده می‌شود تا حس فوریت (Urgency) ایجاد کند.

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

استفاده از گرادینت‌های ملایم آبی تیره به سرمه‌ای برای هدر سایت‌های شرکتی و بیمه در تهران، حس اعتماد و حرفه‌ای بودن را منتقل می‌کند.

کارت تخفیف

طراحی بنرهای تخفیف ویژه (مثلا یلدا) با گرادینت‌های ارغوانی و طلایی، جذابیت بصری بالایی برای کاربران موبایل دارد.

خطاهای رایج طراحان (Khataha-ye Rayej)

  • ×

    استفاده از بیش از ۳ رنگ متضاد که باعث می‌شود طرح "کثیف" یا "Muddy" به نظر برسد.

  • ×

    فراموش کردن Fallback Color برای مرورگرهای بسیار قدیمی (که البته امروزه کمتر شایع است).

  • ×

    عدم توجه به کنتراست متن روی گرادینت؛ همیشه مطمئن شوید متن سفید روی بخش‌های روشن گرادینت قرار نمی‌گیرد.

  • ×

    استفاده از زاویه‌های نامشخص؛ معمولا زوایای ۹۰، ۴۵ یا ۱۳۵ درجه بهترین نتیجه بصری را دارند.

  • ×

    کپی کردن کدهای بسیار طولانی و غیر بهینه که حاوی پیشوندهای قدیمی (Vendor Prefixes) غیرضروری هستند.

سوالات متداول

آیا استفاده از گرادینت سرعت سایت را کم می‌کند؟
خیر، گرادینت‌های CSS توسط مرورگر رسم می‌شوند و بسیار سبک‌تر از استفاده از تصاویر پس‌زمینه (JPG/PNG) هستند. در واقع برای سئو و سرعت لود بهتر است.
چگونه گرادینت را روی متن اعمال کنیم؟
برای این کار باید از ویژگی background-clip: text و text-fill-color: transparent استفاده کنید که یک افکت بسیار مدرن است.
کد HEX بهتر است یا RGB؟
برای گرادینت‌های ساده HEX کافی است، اما اگر نیاز به شفافیت (Transparency) دارید، حتما باید از فرمت RGBA استفاده کنید تا بتوانید کانال آلفا را کنترل نمایید.