آموزش ایجاد طیف رنگی با استفاده از css3

آموزش ایجاد طیف رنگی با استفاده از css3
آکادمی آی تی
آکادمی آی تی
dots

آموزش ایجاد طیف رنگی با استفاده از css3

زمان مورد نیاز برای مطالعه 5 دقیقه

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

دپارتمان ‌ها: آموزش طراحی سایت
1398/08/02
4,160 بازدید

​من میام اینجا یک دونه div ایجاد میکنم داخل html ام و یک class هم بهش میدم.مثلا class grad 1

میام اینجا  class grad 1 رو خصوصیت بهش میدم .یه width بهش میدم مطابق معمول،مثلا 300 پیکسل باشه یه height هم بهش میدیم 200 px

{;grad1{ width: 300px; height: 500px.

ومیایم سراغ خصوصیت بک گراند،من زمانی که میخواهم از گرادینت ها استفاده بکنم باید از بک گراند استفاده کنم.
من 2 نوع طیف رنگی دارم یک طیف رنگی خطی و یک طیف رنگی دایره ای هست ،برای طیف رنگی خطی میام از liner-gradient استفاده میکنم.

 

.grad1{ width: 300px; height: 500px; background: red; background:linear-gradient(-90deg,red 30px,green 90px,blue 300px); /* background: -webkit-linear-gradient(-90deg,red,green,blue); background: -moz-linear-gradient(-90deg,red,green,blue); background: -o-linear-gradient(-90deg,red,green,blue);*/ }

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

 

مطابق معمول خصوصیت مربوط به css3 هست ،من حتما باید به این صورت بنویسمش یعنی برای وبکیت بازم مینویسم background-webkit- یعنی پراپرتی اش رو همون بک گراند در نظر میگیرم اما value ای که دارم تغییر میدم و داخلش webkit میاد به این صورت قرار میگیره باز از همین کپی میکنم به جای webkit میگیم moz برای موزیلا  -o- رو هم برای اوپرا میاریم که به این صورت داریمش

معمولا زمانی که از گرادینت ها استفاده میکنند یک بک گراند دیگه هم مینویسند، یک رنگی رو یا یک عکسی رو مثلا من میتونم یک پیکسل از این رو ببرم یک عکس بگذارم و بک گراند ریپید کنم. این کار برای چه زمانی است؟ و کجا به درد میخوره؟ برایbrowser هایی که ساپورت نمیکنند لینیر گرداینت یا اون گردینت خطی رو.
میایم و یک رنگ مینویسیم (background:red) اگر ساپورت نکردن ،چون css ام خطی داره خونده میشه این آخر نوشته شده پس اینها بی اثر میشن ،من میام اینجا این رو بالا قرار میدم ،بالا که میگذارم اگر براوزر ساپورت بکنه این خط هارو این مقدار ها جایگزین میشه اگر نه خب جایگزین نمیشه و این بک گراند redرو نشون مده ،ولی اگه بیاد پایین این خط ها خوانده میشن ،ساپورت هم میشن ولی در انتها من اومدم  بک گراند رو به یک رنگ ساده تبدیل کردم .نوشتم  background red 


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

من این رو میگم body

میبینید داره repeat میشه.چرا؟چون من یک contentدارم ،اگر این روحذفش بکنم ،میبینید که داره repeat میشه zoom out هم که میکنم این repeat داره انجام میشه چرا؟چون من باید بیام و کنترل بکنم ابعاد رو چون محتویات نداریم  دیگه.بگیم body و html مون هر 2تا شون width  شون و height شون 100% بشه 

 body,html{ width: 100%; height: 100%; }

الان مشکل حل میشه .body من هرچقدر هم که ریسایز بشه ،میبینید اون باکسی که قبلا انتخاب کرده بودیم چقدر کوچیکه ولی این 100% body رو داره در نظر میگیره ، زوم هم که میکنم باز فرقی نمیکنه ،زوم 0،100،500 فرقی نمیکنه کل body مون رو داره اون گرادینت رو بهش اعمال میکنه و من دارم میبینم.
چرا من htmlو body م رو width و height اش رو 100% کردم؟ به این دلیل که چون محتوا ندارند width و height شون هم 100% نیست .پس حتما هر 2تا رو 100% میکنم که مشکل حل بشه.
شبیه به همین من گرادینت دایرهای هم دارم .

یک div دیگه هم میندازم اینجا و این رو میکنم grad2
و یک class دیگه هم کپی میکنم و تغییر میدم مقدارهاش رو 

.grad2{ width: 500px; height: 500px; background: red; /*background:radial-gradient(center,#f1c40f,#e67e22,#c0392b);*/ background:-webkit-radial-gradient(#f1c40f,#e67e22,#c0392b); /*background:-o-radial-gradient(#f1c40f,#e67e22,#c0392b); background:-moz-radial-gradient(#f1c40f,#e67e22,#c0392b);*/ }

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

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