شما اینجا هستید

گرادیان انتقال آهسته بین دو یا چند رنگ را نمایش میدهد.

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

در CSS3 دو نوع گرادیان وجود دارد :

  • گرادیان خطی (linear gradients) که به سمت پایین، بالا، چپ، راست و مورب میرود.
  • گرادیان شعاعی (radial gradients) که یک نقطه مرکز برای آغاز حرکت برایش تعریف میگردد.

گرادیان خطی – linear gradients

برای ایجاد گرادیان خطی باید حداقل دو رنگ تعریف کنیم. این رنگها همان رنگهایی هستند که میخواهید انتقال نرم رنگها از میان آنها باشد. همچنین میتوان نقطه شروع و جهت حرکت (یا زاویه حرکت) را برای گرادیان تنظیم کرد.

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

background: linear-gradient(direction, color-stop1, color-stop2, ...);

 

جهت حرکت پیشفرض گرادیان از بالا به پایین میباشد

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

<html>

<head>

<style>

#grad1 {

    height: 200px;

    background: linear-gradient(red, blue); /* Standard syntax (must be last) */

}

</style>

</head>

<body>


<h3>Linear Gradient - Top to Bottom</h3>


<div id="grad1"></div>


</body>

</html>

 

گرادیان خطی – چپ به راست

مثال زیر گرادیان خطی را که از چپ و با رنگ قرمز آغاز شده و به رنگ آبی تبدیل میشود را نشان میدهد:

#grad {
  background: linear-gradient(to right, red , blue); /* Standard syntax */
}

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

میتوان با مشخص کردن موقعیت عمودی و افقی نقطه آغاز گرادیان را به صورت مورب هم ایجاد کرد.

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

#grad {

  background: linear-gradient(to bottom right, red , blue);
}

 

بهره گیری از زاویه ها

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

سینتکس استفاده از زاویه

background: linear-gradient(angle, color-stop1, color-stop2);

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

مثال زیر طریقه استفاده از زاویه را در گرادیان خطی نمایش میدهد:

<html>

<head>

<style>

#grad1 {

    height: 100px;

    background: linear-gradient(0deg, red, blue);

}


#grad2 {

    height: 100px;

    background: linear-gradient(90deg, red, blue);

}


#grad3 {

    height: 100px;

    background: linear-gradient(180deg, red, blue);

}


#grad4 {

    height: 100px;

    background: linear-gradient(-90deg, red, blue);

}

</style>

</head>

<body>


<h3>Linear Gradients - Using Different Angles</h3>

<div id="grad1" style="color:white;text-align:center;">0deg</div><br>

<div id="grad2" style="color:white;text-align:center;">90deg</div><br>

<div id="grad3" style="color:white;text-align:center;">180deg</div><br>

<div id="grad4" style="color:white;text-align:center;">-90deg</div>


</body>

</html>

 

استفاده از چند رنگ

مثال زیر نحوه استفاده از چند رنگ را نشان میدهد:

<html>

<head>

<style>

#grad1 {

    height: 55px;

    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);

}

</style>

</head>

<body>


<div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold">

Gradient Background

</div>

</body>

 

استفاده کردن از شفافیت – transparency

گرادیان شفافیت را نیز پشتیبانی میکند که میتوان از آن برای ایجاد جلوه های در حال محو استفاده کرد. برای افزودن شفافیت ما از تابع ()rgba برای تعریف رنگها استفاده میکنیم. آخرین پارامتر در ()rgba میتواند عددی از 0 تا 1 باشد که این عدد شفافیت رنگ را مشخص میکند : 0 نشانگر شفافیت کامل و 1 نشانگر نبودن شفافیت است.

مثال زیر یک گرادیان خطی را که از چپ با شفافیت کامل آغاز شده و همینطور آهسته از شفافیتش کم میشود تا به رنگ بدون شفافیت برسد را نشان میدهد:

#grad {
  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

 

گرادیان شعاعی – radial gradients

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

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

background: radial-gradient(shape size at position, start-color, ..., last-color);

مثال زیر نحوه ایجاد گرادیان شعاعی را نمایش میدهد:

#grad {
  background: radial-gradient(red, green, blue);
}

شکل ظاهری پیشفرض گرادیان شعاعی، بیضی میباشد.

تنظیم شکل گرادیان شعاعی

پارامتر shape شکل گرادیان را مشخص میکند که میتونه دایره یا بیضی باشه که به صورت پیشفرض بیضی است.

مثال زیر شکل گرادیان را دایره میکند:

#grad {
  background: radial-gradient(circle, red, yellow, green);
}

 

افزودن دیدگاه جدید

دیدگاه

  • تگ‌های HTML مجاز: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <img>
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.

Plain text

  • تگ‌های HTML مجاز نیستند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
كد امنيتي
این پرسش برای جلوگیری از ارسال اسپمهای اتوماتیک است.