گروه مقاله : CSS
تاريخ انتشار : 1396/03/22 - 16:09
كد :7628

آموزش طراحی سایت ایجاد گرادینت

در این مقاله با نحوه ایجاد گرادینت در CSS3 آشنا خواهیم شد.

آموزش طراحی سایت ایجاد گرادینت

گرادینت در Css3 به شما اجازه نمایش انتقال نرم بین دو یا چند رنگ مشخص شده را خواهد داد .

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

انواع گرادینت ها در Css3

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

 

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

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

ویژگی

linear-gradient

 

26.0
10.0 -webkit-

10.0

16.0
3.6 -moz-

6.1
5.1 -webkit-

12.1
11.1 -o-

radial-gradient

 

26.0
10.0 -webkit-

10.0

16.0
3.6 -moz-

6.1
5.1 -webkit-

12.1
11.6 -o-

repeating-linear-gradient

 

26.0
10.0 -webkit-

10.0

16.0
3.6 -moz-

6.1
5.1 -webkit-

12.1
11.1 -o-

repeating-radial-gradient

 

26.0
10.0 -webkit-

10.0

16.0
3.6 -moz-

6.1
5.1 -webkit-

12.1
11.6 -o-

 

گرادینت های خطی در Css3

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

گرادینت خطی از بالا به پایین(گرادینت پیشفرض)

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

مثال:

#grad {
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, yellow); /* Standard syntax */
}

مشاهده نتیجه

 

گرادینت خطی از چپ به راست

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

مثال:

#grad {
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, red , yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, red , yellow); /* Standard syntax */
}

مشاهده نتیجه

 

گرادینت خطی مورب

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

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

مثال:

#grad {
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left top, red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, red, yellow); /* Standard syntax */
}

مشاهده نتیجه

 

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

اگر میخواهید که بر روی جهت گرادینت خود کنترل داشته باشید، میتوانید یک زاویه تعریف کنید. این زاویه تعریف شده به جای زوایای از پیش تعیین شده مانند

to bottom, to top, to right, to left, to bottom right, قرار خواهد گرفت.

زاویه بصورت زاویه میان خط افقی و خط گرادینت تعیین میگردد.

در مثال زیر نحوه تعریف گرادینت مورب با زاویه دلخواه را نشان میدهد.

مثال:

#grad {
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(-90deg, red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(-90deg, red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(-90deg, red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(-90deg, red, yellow); /* Standard syntax */
}

مشاهده نتیجه

 

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

در مثال زیر یک گرادینت خطی از بالا به پایین با چندین رنگ را نشان میدهد:

مثال:

#grad {
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(red, yellow, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, yellow, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, yellow, green); /* Standard syntax */
}

مشاهده نتیجه

 

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

مثال:

#grad {
background: red; /* For browsers that do not support gradients */
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Opera 11.1 to 12.0 */
background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Fx 3.6 to 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Standard syntax */
background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

مشاهده نتیجه

 

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

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

برای افزودن شفافیت باید از عملگر rgba() استفاده کنیم و به کمک آن رنگ ها را مشخص کنیم. آخرین پارامتر عملگر rgba() میتواند عددی بین 0 تا 1 را بپذیرد . با این ویژگی با عدد 0 رنگ کاملا محو و با عدد 1 رنگ کاملا واضح بدست خواهیم آورد.

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

مثال

#grad {
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari 5.1-6*/
background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Fx 3.6-15*/
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*Standard*/
}

مشاهده نتیجه

 

تکرار یک گرادینت خطی

عملگر repeating-linear-gradient() برای تکرار گرادینت خطی به کار میرود:

مثال:

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

#grad {
background: red; /* For browsers that do not support gradients */
/* Safari 5.1 to 6.0 */
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Opera 11.1 to 12.0 */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6 to 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Standard syntax */
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

مشاهده نتیجه

 

گرادینت مدور CSS3

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

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

بصورت پیشفرض شکل بیضی ، اندازه دورترین فاصله و مکان مرکز بیضی است.

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

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

مثال:

#grad {
background: red; /* For browsers that do not support gradients */
background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, yellow, green); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */
background: radial-gradient(red, yellow, green); /* Standard syntax */
}

مشاهده نتیجه

 

گرادینت مدور با فواصل متفاوت

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

مثال

#grad {
background: red; /* For browsers that do not support gradients */
background: -webkit-radial-gradient(red 5%, yellow 15%, green 60%); /* Safari 5.1-6.0 */
background: -o-radial-gradient(red 5%, yellow 15%, green 60%); /* For Opera 11.6-12.0 */
background: -moz-radial-gradient(red 5%, yellow 15%, green 60%); /* For Firefox 3.6-15 */
background: radial-gradient(red 5%, yellow 15%, green 60%); /* Standard syntax */
}

مشاهده نتیجه

 

درج شکل

پارامتر shape میتواند برای شما شکلی را تعریف کند. این پارامتر میتواند اشکال circle همان دایره و ellipse همان بیضی را ایجاد کند. شکل پیشفرض بیضی است.

مثال زیر یک گرادینت مدور با شکل دایره را نشان میدهد.

مثال:

#grad {
background: red; /* For browsers that do not support gradients */
background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 to 12.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 to 15 */
background: radial-gradient(circle, red, yellow, green); /* Standard syntax */
}

مشاهده نتیجه

 

استفاده از اندازه های متفاوت با کلمات کلیدی

پارامتر های اندازه طبیعتا اندازه های گرادینت را مشخص می کنند این پارامتر ها چهار ویژگی دارند:

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

مثال:

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

#grad1 {
background: red; /* For browsers that do not support gradients */
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60% 55%, closest-side, red, yellow, black);
/* For Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%, closest-side, red, yellow, black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%, closest-side, red, yellow, black);
/* Standard syntax */
background: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

#grad2 {
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60% 55%, farthest-side, red, yellow, black);
/* Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%, farthest-side, red, yellow, black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%, farthest-side, red, yellow, black);
/* Standard syntax */
background: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

مشاهده نیتجه

 

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

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

مثال:

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

#grad {
background: red; /* For browsers that do not support gradients */
/* For Safari 5.1 to 6.0 */
background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
/* For Opera 11.6 to 12.0 */
background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
/* For Firefox 3.6 to 15 */
background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
/* Standard syntax */
background: repeating-radial-gradient(red, yellow 10%, green 15%);
}

 

مشاهده نتیجه

 

تهیه و تنظیم توسط شرکت طراحی سایت سارگون با ما در تماس باشید.

نظرات كاربران :
نام :
ايميل :
متن نظر : * 
 
متن بالا را وارد نماييد*