آموزش ایجاد پس زمینه با شیب رنگ (gradient) در css

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

آموزش ایجاد پس زمینه با شیب رنگ (gradient) در css
Article مجازی

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

در واقع شما از ویژگی معمول background-image برای ایجاد شیب استفاده می کنید. شیب ها انواع مختلفی دارد که در ادامه به آن ها می پردازیم:

 

1 - شیب خطی (Linear gradient)

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

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

direction : جهت شروع شیب رنگ را مشخص می کند، که یکی از چهار مقدار  to top،  to bottom،  to right، to left  یا حالت ترکیبی، مانند to bottom left را می پذیرد. مقدار top مقدار پیش فرض است.

color-stop : رنگ هایی هستند که می خواهید در طول Gradient استفاده شوند و می توانند بی نهایت باشند و بایستی هر رنگ را با (,) از رنگ بعدی جدا کرد.

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

background-image: linear-gradient(to right, black, white);

برای ایجاد شیب سیاه در بالای عنصر و انتقال به رنگ سفید در پایین آن، می توان از کلمات کلیدی to bottom استفاده کرد، مانند:

background-image: linear-gradient(to bottom, black, white);

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

background-image: linear-gradient(to bottom right, orange, red);

می توانید از هر روش رنگ CSS مانند کلمات کلیدی نظیر white یا black ، مقادیر هگزا دسیمال مانند #000000، مقادیر RGB مانند rgb(0,0,0) و غیره استفاده کنید.

شما فقط به کلمات کلیدی محدود نمی شوید. می توانید مقدار درجه ای را مشخص کنید که جهت شیب را مشخص کند. درجات با عددی از 0 تا 360 نوشته شده و به دنبال آن deg، که مشخص می کند انتقال در کجا به پایان رسد. به عنوان مثال، 0deg بالای عنصر است، بنابراین شیب در پایین شروع می شود و در قسمت بالا پایان می یابد. به عبارت دیگر، این:

background-image: linear-gradient(to top, black, white);

مثل این است که:

background-image: linear-gradient(0deg, black, white);

مقادیر درجه در جهت عقربه های ساعت ادامه می یابد، بنابراین 90deg لبه سمت راست این عنصر است (همان to right)، 180deg پایین عنصر (همان to bottom) است، و 270deg سمت چپ عنصر است (همان to left)

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

به عنوان مثال:

background-image: linear-gradient(135deg, rgb(0,0,0), rgb(204,204,204));

COLOR STOPS

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

background-image: linear-gradient(to right, black, white, black);

 

 

البته، شما می توانید از هر مقدار رنگی (بیان شده به عنوان کلمات کلیدی، هگزادسیمال یا RGB) استفاده کنید و حتی آنها را همزمان با هم استفاده کنید، بنابراین حتی می توانید کد قبل را به این صورت بنویسید:

background-image: linear-gradient(to right, black, rgb(255,255,255), #FFFFFF, HSL(0,0%,0%));

مرورگرهای وب به طور مساوی رنگ ها را پخش می كنند، بنابراین در این مثال سمت چپ از مشكی شروع می شود. وسط رنگ سفید است. و با مشکی تمام می شود. با این حال، شما می توانید COLOR STOPS متفاوتی را در مکان های خاص پس زمینه اضافه کنید.

به عنوان مثال، اگر می خواهید از رنگ قرمز تیره شروع کنید، پس از 10 درصد ، رنگ نارنجی را اضافه کنید و در آن رنگ بمانید، و سپس به قرمز تیره برگردید، برای این کار، از چهار COLOR STOPS - قرمز ، نارنجی ، نارنجی و قرمز - استفاده می کنید و مشخص می کنید که دو ایستگاه سفید در کجا باید قرار گیرد:

background-image: linear-gradient(to right, #900, #FC0 10%, #FC0 90%, #900);

 

 

توجه کنید که 10% مربوط به رنگ دوم (نارنجی) است: این به مرورگر می گوید که پس از10% عنصر این رنگ را اضافه کند. به همین ترتیب، 90% نشان می دهد كه مرورگر باید 90% عنصر نارنجی باقی بماند و سپس انتقال را به رنگ قرمز تیره آغاز كند .

دیگر نیازی به استفاده از مقادیر برای اولین یا آخرین رنگ نیست، زیرا مرورگر فرض می کند که رنگ اول از 0% شروع می شود و رنگ آخر 100% به پایان می رسد. با این وجود، اگر می خواهید رنگ شروع را در قسمت بیشتر عنصر نگه دارید، می توانید بعد از اولین رنگ، مقدار را ارائه دهید. به عنوان مثال:

background-image: linear-gradient(to right, #900 20%, #FC0 30%, #FC0 70%, #900 80%);

 

 

توجه داشته باشید که اولین رنگ 900#  نیز دارای 20% موقعیت است. این بدان معنی است که اولین 20 درصد عنصر (از چپ به راست) باید رنگ قرمز تیره باشد. سپس، در نقطه 20 درصد، شیب باید شروع به انتقال به رنگ نارنجی تا 30 درصد کند.

 

2 - تکرار شیب های خطی

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

background-image: repeating-linear-gradient(45deg, #900 20px, #FC0 30px, #900 40px);

 

 

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

حتی می توانید از شیب های تکرار شونده برای ایجاد نوارهای جامد و بدون هیچگونه تغییر فانتزی و ظریف بین رنگ ها استفاده کنید. به عنوان مثال:

background-image: repeating-linear-gradient(45deg, #900 0, #900 10px, #FC0 10px, #FC0 20px);

 

 

در اینجا، شما با رنگ قرمز تیره (#900) در نقطه صفر شروع می کنید، و دوباره در نقطه10px  به قرمز می روید. از آنجا که در حال گذر از بین همان رنگ ها هستید، مرورگر این را به عنوان یک خط ترسیم می کند. در مرحله بعد، شما با 10 پیکسل به نارنجی (# FC0) منتقل می شوید. از آنجا که همان نقطه ای است که قرمز به پایان می رسد، این یک انتقال ظریف نیست. الگو فقط از قرمز به نارنجی می رود.

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

background-color: #FC0;
background: repeating-linear-gradient(to bottom left, #900 20px, #FC0 30px, #900 40px);

 

3 - شیب های شعاعی (Radial Gradient)

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

background-image: radial-gradient(black, white);

 

 

اینجا یک شکل بیضوی ایجاد شده که متناسب با ارتفاع و عرض عنصر می باشد، با شیب مرکزی در مرکز عنصر. همچنین می توانید با اضافه کردن یک کلید واژه circle قبل از رنگ ها، شیب دایره ای ایجاد کنید.

background-image: radial-gradient(circle, black, white);

 

 

در حالی که یک مرورگر به طور معمول مرکز یک گرادیان شعاعی را در مرکز عنصر ترسیم می کند، می توانید با استفاده از کلمه کلیدی at مرکز رنگ را تغییر دهید قرار دهید. به عنوان مثال، در تصویر زیر شیب شعاعی 20 درصد از لبه سمت چپ عنصر و 40 درصد از بالای عنصر شروع می شود.

background-image: radial-gradient(circle at 20% 40%, black, white);

برای ایجاد کردن اندازه شیب، می توانید یکی از چهار کلمه کلیدی را استفاده کنید:

  • کلمه کلیدی closest-side به مرورگر می گوید که شیب را از مرکز تا سمتی که به مرکز نزدیکتر است گسترش دهد. به عنوان مثال در تصویر زیر نزدیکترین سمت به مرکز شیب لبه بالایی است، بنابراین شعاع دایره از مرکز دایره به این لبه می رود. این کار کل شیب را درون عنصر نگه می دارد. در زیر کد تولید این شیب آمده است:
background-image: radial-gradient(closest-side circle at 20% 40%, black, white);

 

 

هنگامی که closest-side روی یک شیب بیضوی اعمال می شود، از هر دو طرف نزدیکتر (یعنی طرف بالا یا پایین و سمت چپ یا راست) برای محاسبه شعاع x و y بیضی استفاده می شود.

  • کلمه کلیدی closest-corner عرض شیب را از مرکز آن به گوشه عنصری که نزدیکترین است اندازه گیری می کند. این می تواند بدان معنی باشد که شیب ممکن است عنصر را تحت الشعاع قرار دهد. به عنوان مثال، دایره ای که در بالای تصویر زیر کشیده شده است، اندازه واقعی شیب را نشان می دهد. بخشی از شیب فراتر از عنصر است:
background-image: radial-gradient(closest-corner circle at 20% 40%, black, white);

 

 

  • کلمه کلیدی farthest-side شعاع یک دایره را از وسط آن به طرف عنصری که دورتر است، می سنجد. در مورد شیب بیضوی، فاصله آن از مرکز تا دورترین سمت بالا یا پایین و دورترین سمت چپ یا راست است.
background-image: radial-gradient(farthest-side circle at 20% 40%, black, white);

 

 

  • کلمه کلیدی farthest-corner شعاع یک دایره را از وسط آن تا دورترین گوشه آن عنصر اندازه می گیرد.
background-image: radial-gradient(farthest-corner circle at 20% 40%, black, white);

 

 

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

background-image: radial-gradient(circle at 20% 40%, red 20%, orange 80%, yellow);

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

background-image: radial-gradient(circle at 20% 40%, rgb(255,0,0) 20%, rgb(255,165,0) 80%, #FFFF00);

مانند شیب های خطی، Internet Explorer 9 و قبل از آن، در صورت استفاده از شیب شعاعی، نمی دانند در مورد چه چیزی صحبت می کنید. شما باید یک رنگ پس زمینه پشتیبان اضافه کنید:

background-color: red;
background: radial-gradient(circle at 20% 40%, red 20%, orange 80%, yellow);

 

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

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

background-image: repeating-radial-gradient(circle, red 20px, orange 30px, yellow 40px, red 50px);

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

 

محتوا
  • - آموزش ایجاد پس زمینه با شیب رنگ (gradient) در CSS

  • آموزش ایجاد پس زمینه با شیب رنگ (gradient) در css

توسعه وب / HTML-CSS