ایجاد گرادینت با css

سلام رفقا !!

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

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

اما امروز یاد میگیریم که با کد css3 برای زمینه در سایتتون گرادینت بزارید.

به صورت کلی دو نوع گرادینت داریم، 

• گرادینت خطی (Linear Gradients (goes down/up/left/right/diagonally) )
• گرادینت با زاویه مشخص از مرکز (Radial Gradients (defined by their center))

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

بریم ببینیم چطوری می تونیم یک گرادینت با css اضافه کنیم

 

استفاده از Liner Gradiant

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

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

جهت پیش فرض از بالا به پایین می‌باشد.

#mydiv {
  background-image: linear-gradient(red, yellow);
}
#mydiv {
  background-image: linear-gradient(to right, red , yellow);
}
#mydiv{
  background-image: linear-gradient(to bottom right, red, yellow);
}

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

#mydiv {
  background-image: linear-gradient(-90deg, red, yellow);
}

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

#mydiv {
  background-image: linear-gradient(red, yellow, green);
}
#mydiv{
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

روشهای مختلف مقداردهی رنگها 

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

استفاده از تکرار گرادینت با کد css

#mydiv{
   background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

استفاده از Radial Gradiant

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

به صورت پیش فرض میزان فضای پرکردن رنگ توسط radial gradiant  یکسان است.

#mydiv {
  background-image: radial-gradient(red, yellow, green);
}

تعریف شکل در radial gradiant

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

تعریف میزان اندازه هر رنگ در گرادینت با استفاده از کلید واژه های زیر انجام میشه

• closest-side
• farthest-side
• closest-corner
• farthest-corner

نحوه استفاده از کلیدواژه های اندازه گذاری

#mydiv1 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

#mydiv2 {
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

شما می تونید رنگها رو در radial gradiant تکرار کنید.

#mydiv {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}