گرادیان ها

گرادیان یک محدوده رنگ شده است که به آرامی از یک رنگ به رنگ دیگر تبدیل می شود. این ویژگی در css3 ارائه شده است و در هر قسمتی که به یک تصویر نیاز داریم می توانیم از آن استفاده کنیم؛ اما معمولا این ویژگی به همراه ویژگی background و background-image استفاده می شود تا یک پسزمینه به حالت گرادیان بوجود آید.

ویژگی linear-gradient

تابع linear-gradient() یک گرادیان را به وجود می آورد که به آرامی از یک رنگ به رنگ دیگر تبدیل می شود:

linear-gradient([<angle> | to <side-or-corner>]
                       {, <color stop> [stop position] (2-∞) )

در ساده ترین حالت، گرادیان شامل دو رنگ است که به آرامی از بالا به پایین تغییر می کنند. در مثال پایین، گرادیان از رنگ خاکستری شروع می شود و به رنگ سیاه ختم می شود (از بالا به پایین).

.mygradient {
   background-image :linear-gradient(gray, black);
}

تصویر بالا: یک گرادیان ساده خطی

با استفاده از کلیدواژه to می توانیم زاویه گرادیان را مشخص کنیم. با استفاده از این کلیدواژه، مقصدی که قرار است گرادیان در آن نقطه پایان پذیرد مشخص می کنیم: top, right, bottom, left یا هر ترکیبی از آنها. مثال زیر را ببینید:

linear-gradient(to bottom right,  gray, black);

تصویر بالا: یک گرادیان خطی به سمت پایین، راست

با استفاده از واحد درجه (deg) می توانیم زاویه را به صورت دقیق مشخص کنیم. صفر درجه (0deg)همانند نوشتن top است. درجه ها در جهت گردش عقربه های ساعت محاسبه می شوند، و زاویه های منفی نیز قابل قبول هستند.

linear-gradient(0deg, gray, black); /* to top */
linear-gradient(90deg, gray, black); /* to right */
linear-gradient(180deg, gray, black); /* to bottom */
linear-gradient(-90deg, gray, black); /* to left */

در بین رنگهای ابتدا و انتها می توان رنگ های دیگر هم اضافه کرد. فضای مربوط به هر رنگ را می توان بر اساس درصد یا مقدار طولی مشخص کرد. اگر فضای مربوط به هر رنگ را مشخص نکنیم، رنگ ها به طور مساوی تقسیم می شوند. در مثال زیر، رنگ سفید به اندازه 25% مشخص شده است، در حالی که مقدار پیش فرض برای آن 50% است. در تصویر زیر نتیجه را مشاهده می کنید: linear-gradient(gray, white 25%, black);

تصویر بالا: یک گرادیان خطی با استفاده از چند رنگ

ساختار استانداردی که در بالا ذکر شد فقط در نسخه های خاصی از مرورگرهای وب پشتیبانی می شود:
Chrome26+, Firefox16+, IE10+, Safari1.6+, Opera12.1+. با استفاده از پیشوندهای –moz, -webkit, -o می توان پشتیبانی از این تابع را تا این نسخه ها افزایش داد: Firefox3.6, Chrome1, Safari4, Opera11.1.

.linear-gradient{
background-color : red; /* رنگ جایگزین */
/* chrome 1-9, Safari 4-5 */
background :-webkit-gradient(linear, left top, right top, from(red) , to(orange));
/* Chrome 10-25, Safari 5.1-6.1 */
background :-webkit-linear-gradient(left, red, orange);
/* Firefox 3.6-15 */
background :-moz-linear-gradient(left, red, orange);
/* Opera 11.1-12.1 */
background : -o-linear-gradient(left, red, orange);
/* standard syntax */
background : linear-background(to right, red, orange);
}

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

radial-gradient([<shape> + <size>] [at <position>]
		{,<color stop> [stop position]} {2-∞} )

برای اینکه بتوانیم یک گرادیان دایره ای شکل ایجاد کنیم باید حداقل دو نقطه رنگی ایجاد کنیم. گرادیان دایره ای که در شکل زیر وجود دارد با رنگ خاکستری در وسط شکل شروع و به رنگ مشکی در کناره های شکل ختم می شود (این نکته را نیز در نظر داشته باشید که برای ایجاد یک گرادیان دایره ای، مثل یک گرادیان خطی با کمک ویژگی های background و background-image استفاده می کنیم).

.radial-gradient{
	background-image: radial-gradient(gray, black);	
             width: 300px;
             height: 300px;
}

تصویر بالا: یک گرادیان دایره ای ساده

مثل تابع linear-gradient می توانیم بیشتر از دو رنگ را در گرادیان دایره ای شکل داشته باشیم که می توانید به صورت اختیاری یک مقدار بر اساس طول یا درصد برای محل قرارگیری هر رنگ مشخص کنید که محل تمام شدن هر رنگ را مشخص می کند. مثال زیر را مشاهده کنید:

radial-gradient(black 25%, white, black 75%);

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

می توانیم گرادیان دایره ای را طوری تعریف کنیم که شکل آن به شکل دایره یا لوزی باشد. شکل پیش فرض به صورت بیضی - ellipse - است؛ در این حالت گرادیان می تواند خود را متناسب با طول و عرض فضایی که در آن اعمال می شود شکل دهد، مثل شکل مثال بالا (البته مثال بالا یک مربع به اندازه 300 در 300 پیکسل است و این باعث شده که شکل گرادیان به صورت دایره ای شکل باشد، مگر نه در حالت پیش فرض، گرادیان خود را با عرض و ارتفاع مطقه ای که در آن تعریف شده است تطبیق می دهد). مقدار جایگزین دیگر، دایره - circle - است که در مثال پایین مشاهده می کنید، که گرادیان را مجبور می کند به شکل دایره باشد و با طول و عرض شکلی که در آن اعمال شده است هیچ رابطه ای ندارد (بر خلاف مثال های قبل).

radial-gradient(circle, black 25%, white, black 75%);

تصویر بالا: یک گرادیان دایره ای با شکل دقیق دایره

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

radial-gradient(75% 25%, gray, black);

تصویر بالا: یک گرادیان دایره ای که در آن اندازه هر رنگ تغییر داده شده

اگر برای ایجاد گرادیان به دقت کمتری احتیاج داشته باشید می توانید از مقادیر از پیش تعریف شده نیز استفاده کنید، این مقادیر شامل این موارد هستند: closest-side, closest-corner, farthest-side, farthest-corner. این مقادیر مشخص می کنند که نقطه مرکزی گرادیانی که شکل می گیرد تا چه اندازه نسبت به کناره های عنصر یا گوشه های عنصر فاصله داشته باشد. به عنوان مثال مقدار farthest-side گرادیان را به شکلی بوجود می آورد که آخرین رنگ مربوط به گرادیان در دورترین نقطه کناری عنصر نسبت به نقطه مرکزی قرار گیرد.

radial-gradient(farthest-side, gray, black);

در حالت پیش فرض، نقطه مرکزی مربوط به یک گرادیان در قسمت مرکز عنصر قرار دارد. نقطه مرکزی مربوط به گرادیان را می توان با استفاده از کلیدواژه at مشخص کرد که پس از آن موقعیت مورد نظر شما قرار می گیرد. مقدار موقعیت دقیقا مثل ویژگی background-position تعیین می شود. ابتدا موقعیت افقی (horizontal position) را تعیین می کنیم، و سپس موقعیت عمودی (vertical position) قرار می گیرد که موقیت عمودی یک مقدار اختیاری است. موقعیت را می توان با اسفتاده از کلیدواژه های left, center, right + top, center, and bottom و مقادیر طولی یا مقادیر درصدی، یا ترکیبی از آنها مشخص کرد. یک مثال را در شکل زیر می بینید، که نقطه مرکزی گرادیان در آن به قسمت پایین سمت راست منتقل شده است:

radial-gradient(at right bottom, gray, black);

تصویر بالا: یک گرادیان دایره ای که مرکز آن در پایین سمت راست قرار دارد

پشتیبانی از تابع radial-gradient() به همراه استفاده از پیشوندهای –moz, -webkit و -o تاحدود زیادی شبیه به تابع linear-gradient() است. مثل تابع linear-gradient() ساختار دستوری گرادیان دایره ای شکل نیز در طول زمان مورد بازبینی های مختلفی قرار گرفته است. یک مثال در مورد ساختار دستوری که در تمام مرورگرها پشتیبانی می شود را در زیر مشاهده می کنید:

.radial-gradient
{
background-color:red;/*رنگ جایگزین*/

/*Chrome1-9,Safari4-5 */
background:-webkit-gradient(radial,centercenter,0px, center center,100%,color-stop(0%,red), color-stop(100%,orange));

/*Chrome10-25,Safari5.1-6.1*/
background:-webkit-radial-gradient(center,ellipse cover,red 0%, orange  100%);

/*Firefox3.6-16*/
background:-moz-radial-gradient(center,ellipse cover,red 0%, orange  100%);

/*Opera 11.6-12.1*/
background:-o-radial-gradient(center,ellipse cover,red 0%, orange  100%);

/*Standardsyntax*/
background:radial-gradient(ellipseatcenter,red 0%,orange  100%);
}

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

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

repeating-linear-gradient([<angle> | to <side-or-corner>]
                                       {, <color stop> [stop position]} (2-∞) )

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

repeating-linear-gradient(-45deg, white 0, black 10%, white 20%);

تصویر بالا: یک گرادیان خطی تکرار شونده

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

repeating-radial-gradient(black, black 5%, white 5%, white 10%);

تصویر بالا: یک گرادیان دایره ای تکرار شونده