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

جستجو ...


هدف ما این است که شما را در بالاترین سطح برنامه نویسی و توسعه وب سایت باشید.

ثبت نام کنید

گرادینت در css، نوعی تصویر است که از یک فضای رنگی ایجاد شده که چندین رنگ را به نمایش می‌گذارد و مرز بین رنگ‌ها واضح نیست. بسته به نوع گرادینت، رنگ‌ها در این فضای رنگی، به صورت خطی یا به صورت مدور نشان داده می‌شوند.


پیش نیاز این دوره آموزشی:

گرادینت (Gradient)، به معنای سطح شیب‌دار است اما در css، به نوعی تصویر گفته می‌شود که از یک فضای رنگی تشکیل شده است و  گذر رنگ‌ها در آن واضح نیست یا به عبارت دیگر، رنگ‌ها در یکدیگر محو می‌شوند. در هر نقطه از صفحه HTML، که نیاز به استفاده از تصویر دارید، می‌توانید از گرادینت استفاده کنید. گرادینت‌ها به صورت پویا توسط مرورگر ایجاد می‌شوند و در نتیجه با زوم کردن، اندازه آنها به گونه‌ای تغییر می‌کند که کیفیت تصویر همچنان حفظ شود.

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

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

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

گرادینت خطی، یک نوار از رنگ‌ها ایجاد می‌کند که روی یک خط راست پیشروی می‌کنند.

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

.simple-linear {
  background: linear-gradient(blue, pink);
}

 

تعیین جهت گرادینت خطی

به صورت پیش فرض، جهت پیشروی رنگ در گرادینت خطی از بالا به پایین است. برای تغییر جهت پیشروی رنگ، شما می‌توانید جهت را به صورت زیر (به سمت راست) تغییر دهید.

.simple-linear {
  background: linear-gradient(blue, pink);
}

نمایش مورب گرادینت خطی

شما می‌توانید نوار رنگی گرادینت را به صورت مورب، از یک گوشه تصویر تا گوشه مقابل آن، نمایش دهید. برای این منظور، باید گوشه نهایی نوار رنگی را مشخص کنید. در کد زیر، طراح گوشه پایین سمت راست را به عنوان مقصد نهایی نوار رنگ تعیین کرده است.

.diagonal-gradient {
  background: linear-gradient(to bottom right, blue, pink);
}

تعیین جهت گرادینت خطی با استفاده از زاویه

طراح می‌تواند با مشخص کردن یک زاویه مشخص، جهت گرادینت را به طور دقیق‌تری کنترل کند.

.angled-gradient {
  background: linear-gradient(70deg, blue, pink);
}

زمانی که از زاویه استفاده می‌کنید، 0deg ، یک گرادینت عمودی در جهت بالا به پایین ایجاد می‌کند، 90deg یک گرادینت افقی در جهت چپ به راست ایجاد می‌کند و همین‌طور برای مقادیر زاویه‌ای دیگر در جهت عقربه‌های ساعت پیش می‌رود. مقادیر منفی برای زاویه باعث می‌شود نوار رنگی در خلاف جهت عقربه‌های ساعت نمایش داده شود.

زاویه ها در گرادینت

بیش از دو رنگ در گرادینت خطی

شما می‌توانید برای ایجاد گرادینت از بیش از دو رنگ استفاده کنید. به صورت پیش فرض، رنگ‌ها با یک فاصله، یکی پس از دیگری نمایش داده می‌شود.

.auto-spaced-linear {
  background: linear-gradient(red, yellow, blue, orange);
}

نقطه توقف رنگ‌ ها در گرادینت خطی

شما می‌توانید نقطه توقف رنگ‌ها را برحسب درصد یا با مقدار طول رنگ در نوار رنگی تعیین کنید. اگر نقطه توقف‌ها را با درصد مشخص می‌کنید، 0% نقطه آغازین نوار رنگی و 100%، نقطه نهایی نوار رنگی را نشان می‌دهد.

.multicolor-linear {
  background: linear-gradient(to left, lime, lime 28px, red 77%, cyan);
}

پشته تصاویر با گرادینت خطی

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

.layered-image {
  background: linear-gradient(to right, transparent, mistyrose),
      url("https://mdn.mozillademos.org/files/15525/critters.png");
}

ایجاد پشته تصاویر با گرادینت خطی

همچنین شما می‌توانید این پشته تصاویر را تنها با استفاده از گرادینت‌های متفاوت ایجاد کنید. اگر تصاویر بالای پشته کاملا مات نباشند، تصاویر پایین پشته نیز قابل مشاهده است:

.stacked-linear {
  background:
      linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
      linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
      linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}

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

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

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

.simple-radial {
  background: radial-gradient(red, blue);
}

تعیین نقاط توقف در گرادینت شعاعی

دوباره شبیه به گرادینت خطی، می‌توان موقعیت توقف شعاع رنگ را برحسب درصد یا با مقدار طول شعاع مشخص کرد:

.radial-gradient {
  background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
}

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

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

مثال: مقدار closest-side برای بیضی ها

در این مثال از مقدار closest-side استفاده شده است که شعاع بیضی را برابر فاصله بین نقطه آغازین (مرکز دایره) تا نزدیک‌ترین سمت جعبه‌ای قرار می‌دهد که تصویر گرادینت را محصور کرده است.

.radial-ellipse-side {
  background: radial-gradient(ellipse closest-side,
      red, yellow 10%, #1e90ff 50%, beige);
}

مثال: مقدار farthest-corner برای بیضی ها

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

.radial-ellipse-far {
  background: radial-gradient(ellipse farthest-corner,
      red, yellow 10%, #1e90ff 50%, beige);
}

مثال: مقدار closest-side برای دایره ها

این مثال از closest-side برای دایره استفاده می‌کند که اندازه شعاع دایره را برابر با فاصله بین مرکز دایره تا نزدیک‌ترین سمت جعبه قرار می‌دهد. در این مثال، شعاع دایره نصف ارتفاع جعبه است و در واقع مرکز دایره در ارتفاعی برابر نسبت به بالا و پایین جعبه قرار دارد و بالا و پایین جعبه نسبت به سمت راست و چپ جعبه، به مرکز دایره نزدیک‌تر هستند.

.radial-circle-close {
  background: radial-gradient(circle closest-side,
      red, yellow 10%, #1e90ff 50%, beige);
}

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

پشته تصاویر گرادینت شعاعی

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

.stacked-radial {
  background: 
      radial-gradient(circle at 50% 0,
        rgba(255,0,0,.5),
        rgba(255,0,0,0) 70.71%),
      radial-gradient(circle at 6.7% 75%,
        rgba(0,0,255,.5),
        rgba(0,0,255,0) 70.71%),
      radial-gradient(circle at 93.3% 75%,
        rgba(0,255,0,.5),
        rgba(0,255,0,0) 70.71%) beige;
  border-radius: 50%;
}

گرادینت های تکرار شونده

ویژگی‌های ()linear-gradient و ()radial-gradient، به طور خودکار نمی‌توانند نقاط توقف رنگ‌ها را به صورت تکراری نمایش دهند. اما، ویژگی‌های ()repeating-linear-gradient و ()repeating-radial-gradient می‌توانند این قابلیت را ارائه کنند.

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

.repeating-linear {
  background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px);
}

گرادینت خطی تکرارشونده

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

.repeating-radial {
  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
}

پشته گرادینت های تکرار شونده

از گرادینت‌های تکرار شونده نیز می‌توان برای ایجاد پشته‌ای از تصاویر استفاده کرد:

.multi-repeating-linear {
  background:
      repeating-linear-gradient(190deg, rgba(255, 0, 0, 0.5) 40px,
        rgba(255, 153, 0, 0.5) 80px, rgba(255, 255, 0, 0.5) 120px,
        rgba(0, 255, 0, 0.5) 160px, rgba(0, 0, 255, 0.5) 200px,
        rgba(75, 0, 130, 0.5) 240px, rgba(238, 130, 238, 0.5) 280px,
        rgba(255, 0, 0, 0.5) 300px),
      repeating-linear-gradient(-190deg, rgba(255, 0, 0, 0.5) 30px,
        rgba(255, 153, 0, 0.5) 60px, rgba(255, 255, 0, 0.5) 90px,
        rgba(0, 255, 0, 0.5) 120px, rgba(0, 0, 255, 0.5) 150px,
        rgba(75, 0, 130, 0.5) 180px, rgba(238, 130, 238, 0.5) 210px,
        rgba(255, 0, 0, 0.5) 230px),
      repeating-linear-gradient(23deg, red 50px, orange 100px,
        yellow 150px, green 200px, blue 250px,
        indigo 300px, violet 350px, red 370px);
} 
.multi-repeated-gradient {
  background:
      repeating-radial-gradient(ellipse at 80% 50%,rgba(0,0,0,0.5),
        rgba(0,0,0,0.5) 15px, rgba(255,255,255,0.5) 15px,
        rgba(255,255,255,0.5) 30px) top left no-repeat, 
      repeating-radial-gradient(ellipse at 20% 50%,rgba(0,0,0,0.5),
        rgba(0,0,0,0.5) 10px, rgba(255,255,255,0.5) 10px,
        rgba(255,255,255,0.5) 20px) top left no-repeat yellow;
  background-size: 200px 200px, 150px 150px;
}

در کد زیر، از پشته گرادینت‌های تکرارشونده برای ایجاد یک گرادینت شطرنجی استفاده شده است:

.plaid-gradient {
  background:
      repeating-linear-gradient(90deg, transparent, transparent 50px,
        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
        transparent 56px, transparent 63px,
        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
        transparent 69px, transparent 116px,
        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
      repeating-linear-gradient(0deg, transparent, transparent 50px,
        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
        transparent 56px, transparent 63px,
        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
        transparent 69px, transparent 116px,
        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
      repeating-linear-gradient(-45deg, transparent, transparent 5px,
        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px),
      repeating-linear-gradient(45deg, transparent, transparent 5px,
        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);
}

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

 

 

متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

برترین های