طیف های CSS3  به شما امکان ایجاد طیف رنگی بین دو یا چند رنگ های مشخص  را می دهد. در گذشته، شما برای این افکت ها باید از عکس استفاده می کردید،
  • 1395/3/18 6/7/2016 4:33:06 PM 6/7/2016 4:33:06 PM
  • 0
  • 397

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

در CSS3  دو نوع طیف می توان تعریف کرد:

  • طیف های خطی ( که در جهت پایین/ بالا/ چپ/ راست/ مورب حرکت می کند)
  • طیف محوری ( که توسط مرکزشان تعریف می شوند)

پشتیانی مرورگر

در جدول زیر اعداد نشان دهنده ی اولین نسخه ی مرورگری است که به طور کامل از خصوصیت پشتیبانی می کند. اعدادی که به همراه  -webkit-, -moz-, -o- آمده اند اولین نسخه ای از مرورگر را نشان می دهد که خصوصیت در صورت استفاده شدن با یک پیشوند توسط مرورگر پشتیبانی شده است.

خصوصیت

IE

Chrome

Firefox

Safari

Opera

linear-gradient

10.0

26.0

10.0

Webkit-

16.0

3.6 –

Moz-

6.1

5.1 –

Webkit-

12.1

11.1 –

o-

radial-gradient

10.0

26.0

10.0 –

Webkit-

16.0

3.6 –

Moz-

6.1

5.1 –

Webkit-

12.1

11.6 –

o-

repeating-linear-gradient

10.0

26.0

10.0 –

Webkit-

16.0

3.6 –

Moz-

6.1

5.1 –

Webkit-

12.1

11.6 –

o-

repeating-radial-gradient

10.0

26.0

10.0 –

Webkit-

16.0

3.6 –

Moz-

6.1

5.1 –

Webkit-

12.1

11.6 –

o-

 


طیف های خطی CSS3

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

نحو

background: linear-gradient(directioncolor-stop1color-stop2, ...);

 

طیف خطی – بالا به پایین ( این حالت پیش فرض است)

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

 


مثال

#grad {
  background: -webkit-linear-gradient(red, yellow); /* برای سافاری 5.1 تا 6.0 */
  background: -o-linear-gradient(red, yellow); /* برای اپرا 11.1 تا 12.0 */
  background: -moz-linear-gradient(red, yellow); /* برای فایرفاکس 3.6 تا 15 */
  background: linear-gradient(red, yellow
); /* نحو استاندارد */
}

طیف خطی – چپ به راست

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

 


مثال

#grad {
  background: -webkit-linear-gradient(left, red , yellow); /* برای سافاری 5.1 تا 6.0 */
  background: -o-linear-gradient(right, red, yellow); /* برای اپرا 11.1 تا 12.0 */
  background: -moz-linear-gradient(right, red, yellow);/* برای فایرفاکس 3.6 تا 15 */
  background: linear-gradient(to right, red , yellow); /* نحو استاندارد */
}

طیف خطی – مورب

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

 


مثال

#grad {
  background: -webkit-linear-gradient(left top, red , yellow); /* برای سافاری 5.1 تا 6.0 */
  background: -o-linear-gradient(bottom right, red, yellow); /* برای اپرا 11.1 تا 12.0 */
  background: -moz-linear-gradient(bottom right, red, yellow); /* برای فایرفاکس 3.6 تا 15*/
  background: linear-gradient(to bottom right, red , yellow); /* نحو استاندارد */
}

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

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

نحو

background: linear-gradient(anglecolor-stop1color-stop2);

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

 


مثال

#grad {
  background: -webkit-linear-gradient(180deg, red, yellow); /*برای سافاری 5.1 تا 6.0 */
  background: -o-linear-gradient(180deg, red, yellow); /* برای اپرا 11.1 تا 12.0 */
  background: -moz-linear-gradient(180deg, red, yellow);/* برای فایرفاکس 3.6 تا 15 */
  background: linear-gradient(180deg, red, yellow); /*نحو استاندارد  */
}


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

مثال زیر یک طیف رنگی ( از بالا به پایین) با چند نقطه رنگ را نشان می دهد

 


مثال

#grad {
  background: -webkit-linear-gradient(red, green, yellow); /* سافاری 5.1 تا 6 */
  background: -o-linear-gradient(red, green, yellow); /*اپرا 11.1 تا 12.0  */
  background: -moz-linear-gradient(red, green, yellow);/* فایرفاکس 3.6 تا 15 */
  background: linear-gradient(red, green, yellow); /* نحو استاندارد */
}

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

طیف پس زمینه


مثال

#grad {
  /* برای سافاری 5.1 تا 6.0 */
  background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  /* برای اپرا 11.1 تا 12.0*/
  background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  /* برای فایرفاکس 3.6 تا 15 */
  background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  /* نحو استاندارد */
  background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
}


استفاده از شفافیت

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

0 شفافیت کامل را نشان می دهد، 1 رنگ کامل ( بدون شفافیت را )  نمایش میدهد.

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

 


مثال

#grad {
  background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /* سافاری 5.1 تا 6.0*/
  background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));/* اپرا 11.1 تا 12*/
  background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*فایرفاکس 3.6 تا 15*/
  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*استاندارد*/
}


تکرار یک طیف خطی

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

 

 

مثال

یک تکرار طیف رنگی:

#grad {
  background: red; /* برای مرورگرهایی که از طیف پشتیبانی نمی کنند */
  /* سافاری 5.1 تا 6.0 */
  background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* اپرا 11.1 تا 12.0 */
  background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* فایرافکس 3.6 تا 15 */
  background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* نحو استاندارد */
  background: repeating-linear-gradient(red, yellow 10%, green 20%);
}


طیف محوری 

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

نحو

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

 

به صورت پیش فرض ، شکل بیضی است، اندازه  دورترین-گوشه (farthest-corner)  و مکان مرکز است

طیف محوری – نقاط رنگ با فاصله های مساوی ( این حالت پیش فرض است)


مثال

یک طیف محوری با نقاط رنگ با فاصله های مساوی:

 


مثال

#grad {
  background: red; /*برای مرورگرهایی که از طیف پشتیبانی نمی کنند  */
  background: -webkit-radial-gradient(red, yellow, green); /* سافاری 5.1 تا 6.0 */
  background: -o-radial-gradient(red, yellow, green); /* اپرا 11.6 تا 12.0 */
  background: -moz-radial-gradient(red, yellow, green); /* فایرفاکس 3.6 تا 15 */
  background: radial-gradient(red, yellow, green); /* نحو استاندارد */
}


طیف محوری – نقاط رنگ با فاصله های متفاوت 

مثال زیر یک طیف محوری با نقاط رنگ با فاصله های متفاوت را نشان می دهد:

 

مثال

#grad {
  background: red; /* برای مرورگرهایی که از طیف پشتیبانی نمی کنند */
  background: -webkit-radial-gradient(red 5%, yellow 15%, green 60%); /* سافاری 5.1 تا 6.0 */
  background: -o-radial-gradient(red 5%, yellow 15%, green 60%);/* برای اپرا 11.6 تا 12.0*/
  background: -moz-radial-gradient(red 5%, yellow 15%, green 60%); /* برای فایرفاکس 3.6 تا 15 */
  background: radial-gradient(red 5%, yellow 15%, green 60%); /* Standard syntax */
}


ایجاد شکل

پارامتر شکل یک شکل را تعریف می کند. آن می تواند مقدار دایره یا بیضی بگیرد.مقدار پیش فرض بیضی است.

مثال

 

مثال

#grad {
  background: red; /* برای مرورگرهایی که از طیف پشتیبانی نمی کنند */
  background: -webkit-radial-gradient(circle, red, yellow, green); /* سافاری */
  background: -o-radial-gradient(circle, red, yellow, green); /* اپرا 11.6 تا 12.0 */
  background: -moz-radial-gradient(circle, red, yellow, green);/* فایرفاکس 3.6 تا 15 */
  background: radial-gradient(circle, red, yellow, green); /* نحو استاندارد */
}


استفاده از کلید واژه های سایز مختلف

پارامتر اندازه، اندازه طیف را تعریف می کند. آن می تواندچهار مقدار بگیرد:

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

مثال

یک طیف محوری با کلمات کلیدی با اندازه مختلف

#grad1 {
  background: red; /* For browsers that do not support gradients */
  /* سافاری 5.1 تا 6.0 */
  background: -webkit-radial-gradient(60% 55%, closest-side, red, yellow, black); 
  /* برای اپرا 11.6 تا 12.0 */
  background: -o-radial-gradient(60% 55%, closest-side, red, yellow, black);
  /* برای فایرفاکس 3.6 تا 15 */
  background: -moz-radial-gradient(60% 55%, closest-side, red, yellow, black);
  /* نحو استاندارد */
  background: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

#grad2 {
  /* برای سافاری 5.1 تا 6.0 */
  background: -webkit-radial-gradient(60% 55%, farthest-side, red, yellow, black);
  /* برای اپرا 11.6 تا 12.0 */
  background: -o-radial-gradient(60% 55%, farthest-side, red, yellow, black);
   /* برای فایرفاکس 3.6 تا 15 */
  background: -moz-radial-gradient(60% 55%, farthest-side, red, yellow, black);
  /* نحو استاندارد */
  background: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}


تکرار یک طیف محوری

تابع repeating-radial-gradient() برای تکرار طیف های محوری استفاده می شوند:

مثال

یک تکرار طیف محوری:

 

 

#grad {
  background: red; /* For browsers that do not support gradients */
  /* برای سافاری 5.1 تا 6.0 */
  background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
  /* برای اپرا 11.6 تا 12.0 */
  background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
 /* برای فایرفاکس 3.6 تا 15 */
  background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
  /* نحو استاندارد */
  background: repeating-radial-gradient(red, yellow 10%, green 15%);
}

محمد انصاری

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

نظرات 0
برای ارسال دیدگاه وارد حساب کاربری خود شوید.

ورود به حساب کاربری ایجاد حساب کاربری
محمد انصاری
طیف های CSS3
زیگماوب