آموزش شیب رنگ در CSS3 به زبان ساده

ویژگی gradient درCSS3 به شما امکان می دهد بدون استفاده از هر تصویری، از یک رنگ به رنگ دیگر شیب ایجاد کنید.

استفاده از شیب های رنگ در CSS3

ویژگی gradient (گرادیانت یا شیب) در CSS3 یک راه حل انعطاف پذیر برای تولید انتقال نرم و آرام بین دو یا چند رنگ فراهم می کند. پیش از این برای دستیابی به چنین جلوه ای مجبور بودیم از تصاویر استفاده کنیم. با استفاده از شیب های رنگ در CSS3 می توان زمان دانلود را کاهش داده و پهنای باند را ذخیره کرد. عناصر با شیب می توانند بدون از دست دادن کیفیت شان به هر اندازه بزرگتر یا کوچکتر شوند، همچنین خروجی بسیار سریعتر نمایش داده می شود زیرا توسط مرورگر ایجاد می شود.

شیب در دو سبک خطی و شعاعی در دسترس است.

ایجاد شیب خطی در CSS3

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

linear-gradient (جهت, ۱ توقف-رنگ, ۲ توقف-رنگ, …)

شیب خطی- بالا به پایین

مثال زیر یک شیب خطی از بالا به پایین ایجاد می کند. این حالت پیش فرض است.

مثال

.gradient {

/* جایگزین برای مرورگرهایی که از شیب پشتیبانی نمی کنند */

background: red;

/* ۶٫۰۵٫۱ تا برای سافاری */

background: -webkit-linear-gradient(red, yellow);

/* برای اینترنت اکسپلور*/

background: -ms-linear-gradient(red, yellow);

/* ساختار استاندارد */

background: linear-gradient(red, yellow);

}

شیب خطی- چپ به راست

مثال زیر یک شیب خطی از چپ به راست ایجاد می کند.

مثال

.gradient {

/* جایگزین برای مرورگرهایی که از شیب پشتیبانی نمی کنند */

background: red;

/* ۶٫۰۵٫۱ تا برای سافاری */

background: -webkit-linear-gradient(left, red, yellow);

/* برای اینترنت اکسپلور ۱۰*/

background: -ms-linear-gradient(left, red, yellow);

/* ساختار استاندارد */

background: linear-gradient(to right, red, yellow);

}

شیب خطی- مورب

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

مثال

.gradient {

/* جایگزین برای مرورگرهایی که از شیب پشتیبانی نمی کنند */

background: red;

/* ۶٫۰۵٫۱ تا برای سافاری */

background: -webkit-linear-gradient(bottom left, red, yellow);

/* برای اینترنت اکسپلور ۱۰*/

background: -ms-linear-gradient(bottom left, red, yellow);

/* ساختار استاندارد */

background: linear-gradient(to top right, red, yellow);

}

تنظیم جهت شیب های خطی با استفاده از زاویه ها

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

linear-gradient (زاویه, ۱ توقف-رنگ, ۲ توقف-رنگ, …)

مثال زیر با استفاده از زاویه، یک شیب خطی از چپ به راست ایجاد می کند.

مثال

.gradient {

/* جایگزین برای مرورگرهایی که از شیب پشتیبانی نمی کنند */

background: red;

/* ۶٫۰۵٫۱ تا برای سافاری */

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

/* برای اینترنت اکسپلور ۱۰*/

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

/* ساختار استاندارد */

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

}

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

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

مثال

.gradient {

/* جایگزین برای مرورگرهایی که از شیب پشتیبانی نمی کنند */

background: red;

/* ۶٫۰۵٫۱ تا برای سافاری */

background: -webkit-linear-gradient(red, yellow, lime);

/* برای اینترنت اکسپلور ۱۰*/

background: -ms-linear-gradient(red, yellow, lime);

/* ساختار استاندارد */

background: linear-gradient(red, yellow, lime);

}

تنظیم محل توقف های رنگ

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

مثال

.gradient {

/* جایگزین برای مرورگرهایی که از شیب پشتیبانی نمی کنند */

background: red;

/* ۶٫۰۵٫۱ تا برای سافاری */

background: -webkit-linear-gradient(red, yellow 30%, lime 60%);

/* برای اینترنت اکسپلور ۱۰ */

background: -ms-linear-gradient(red, yellow 30%, lime 60%);

/* ساختار استاندارد*/

background: linear-gradient(red, yellow 30%, lime 60%);

}

توجه: هنگامی که تنظیم مکان توقف رنگ را به صورت درصد تعیین می کنید، %۰ نقطه شروع و %۱۰۰ نقطه پایان را نشان می دهد. در این صورت، می توانید مقادیری خارج از آن محدوده یعنی قبل از %۰ یا بعد از %۱۰۰ استفاده کنید تا جلوه دلخواه خود را بدست آورید.

تکرار شیب خطی

می توانید با استفاده از تابع ()repeating-linear-gradient ، شیب های خطی را تکرار کنید.

مثال

.gradient {

/* جایگزین برای مرورگرهایی که از شیب پشتیبانی نمی کنند */

background: white;

/* ۶٫۰ تا ۵٫۱ برای سافاری */

background: -webkit-repeating-linear-gradient(black, white 10%, lime 20%);

/* برای اینترنت اکسپلور ۱۰*/

background: -ms-repeating-linear-gradient(black, white 10%, lime 20%);

/* ساختار استاندارد */

background: repeating-linear-gradient(black, white 10%, lime 20%);

}

ایجاد شیب شعاعی در CSS3

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

radial-gradient (اندازه شکل at موقعیت, رنگ–۱توقف, رنگ–۲توقف, …);

معنای آرگومان های تابع ()radial-gradient  به صورت زیر است:

• موقعیت – نقطه شروع شیب را مشخص می کند، که می تواند براساس واحدهای (px ، em، یا درصد) یا کلمات کلیدی (left, bottom, و غیره) مشخص شود.
• شکل – شکل انتهایی شیب را مشخص می کند. می تواند دایره یا بیضی (circle یا ellipse) باشد.
• اندازه- اندازه شکل انتهایی شیب را مشخص می کند. مقدار پیش فرض farthest-side است.

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

مثال

.gradient {

/* جایگزین برای مرورگرهایی که از شیب پشتیبانی نمی کنند */

background: red;

/* ۶٫۰ تا ۵٫۱ برای سافاری */

background: -webkit-radial-gradient(red, yellow, lime);

/* برای اینترنت اکسپلور ۱۰*/

background: -ms-radial-gradient(red, yellow, lime);

/* ساختار استاندارد */

background: radial-gradient(red, yellow, lime);

}

تنظیم شکل شیب های شعاعی

آرگومان شکل در تابع ()radial-gradient برای تعریف شکل نهایی شیب شعاعی استفاده می شود. می تواند مقدار circle  (دایره) یا ellipse (بیضی) را بپذیرد. در اینجا مثالی آورده شده است:

مثال

.gradient {

/* جایگزین برای مرورگرهایی که از شیب پشتیبانی نمی کنند */

background: red;

/* ۶٫۰ تا ۵٫۱ برای سافاری */

background: -webkit-radial-gradient(circle, red, yellow, lime);

/* برای اینترنت اکسپلور ۱۰ */

background: -ms-radial-gradient(circle, red, yellow, lime);

/* ساختار استاندارد */

background: radial-gradient(circle, red, yellow, lime);

}

توجه: اگر آرگومان شکل حذف یا مشخص نشده باشد و اگرکه آرگومان اندازه دارای طول یکسان باشد، شکل پیش فرض انتهایی به صورت دایره است، در غیر اینصورت بیضی می شود.

تنظیم اندازه شیب های شعاعی

آرگومان اندازه در تابع ()radial-gradient  برای تعیین اندازه شکل انتهایی شیب استفاده می شود. اندازه را می توان با استفاده از واحدها یا کلمات کلیدی تنظیم کرد:

closest-side, farthest-side, closest-corner, farthest-corner.

مثال

.gradient {

/* جایگزین برای مرورگرهایی که از شیب پشتیبانی نمی کنند */

background: red;

/* ۶٫۰ تا ۵٫۱ برای سافاری */

background: -webkit-radial-gradient(left bottom, circle farthest-side, red, yellow, lime);

/* برای اینترنت اکسپلور ۱۰ */

background: -ms-radial-gradient(left bottom, circle farthest-side, red, yellow, lime);

/* ساختار استاندارد */

background: radial-gradient(circle farthest-side at left bottom, red, yellow, lime);

}

تکرار شیب های شعاعی

همچنین می توانید با استفاده از تابع ()repeating-radial-gradient شیب شعاعی را تکرار کنید.

مثال

.gradient {

/* جایگزین برای مرورگرهایی که از شیب پشتیبانی نمی کنند */

background: white;

/* ۶٫۰ تا ۵٫۱ برای سافاری */

background: -webkit-repeating-radial-gradient(black, white 10%, lime 20%);

/* برای اینترنت اکسپلور ۱۰*/

background: -ms-repeating-radial-gradient(black, white 10%, lime 20%);

/* ساختار استاندارد */

background: repeating-radial-gradient(black, white 10%, lime 20%);

}

شفافیت و شیب در CSS3

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

مثال

.gradient {

/* جایگزین برای مرورگرهایی که از شیب پشتیبانی نمی کنند */

background: url(“images/sky.jpg”);

/* ۶٫۰ تا ۵٫۱ برای سافاری*/

background: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url(“images/sky.jpg”);

/* برای اینترنت اکسپلور ۱۰ */

background: -ms-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url(“images/sky.jpg”);

/* ساختار استاندارد*/

background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url(“images/sky.jpg”);

}