چگونه در CSS طیف رنگ بسازیم؟ Gradients In CSS - مهدیار منصوری - جلسه 12
34 بار بازدید -
3 سال پیش
-
جلسه 12 دوره طراحی سایت
جلسه 12 دوره طراحی سایت - بخش اول - مهدیار منصوری - Mahdiar Mansouri
سرفصل های ویدیو جلسه دوازدهم:
چگونه در CSS طیف رنگ بسازیم؟ طیف رنگ خطی و دایره ای در CSS
معرفی سایت uigradients دات کام به منظور استفاده از طیف رنگ های آماده و جذاب
ادامه فرآیند طراحی یک قالب ساده به منظور تمرین بیشتر
نحوه کامنت گذاری در CSS و نحوه Region بندی در VS Code به منظور مرتب نویسی کد ها
نحوه درست نگارش CSS و استفاده بهینه از کلاس ها به منظور عدم تکرار دستورات CSS
====================================
توی این جلسه میخوایم در رابطه با Gradient ها یا طیف رنگ ها توی CSS باهم صحبت کنیم، و میبینیم که چطور میتونیم با استفاده از دستور linear-gradient(angle,color1,color2) یک طیف رنگ با زاویه مورد نظر خودمون (angle) و رنگ های دلخواه که میتونن حتی بیشتر از 2 تا هم باشن ایجاد کنیم، همچنین زاویه رو میتونیم با استفاده از کلمات کلیدی to top , To bottom , to top left و... هم تعیین کنیم، این دستور برای ما یک طیف رنگ رو ایجاد میکنه و اون رو به ما برمیگردونه ، باید دقت داشته باشیم که این طیف رنگ یک عکس محسوب میشه و برای استفاده ازش باید از background-image استفاده کنیم و نه background-color همچنین یاداوری میکنم که میتونیم با استفاده از دستور
background-blend-mode مود ترکیبی برای یک عکس و یک رنگ انتخاب کنیم و به این شکل یک عکس و یک طیف رنگ رو با هم ترکیب کنیم
بعد از اون یادمیگیریم چطور توی vs code با استفاده از دستور region یک ناحیه رو قابل جمع کردن (Collapsible) کنیم تا با جمع کردن بخش های مختلف کد از ایجاد Scroll بلند بالا جلوگیری کنیم
سپس یادمیگیریم چطور CSS رو بهتر بنویسیم و از کلاس های مشترک برای عناصر مختلف استفاده کنیم تا حجم CSS هایی که مینویسیم کمتر بشه و بجاش فقط از کلاس های مختلف استفاده کنیم
در ادامه به منظور 1تمرین بیشتر همون قالب ساده ای که جلسه قبل شروع کردیم رو ادامه میدیم
امیدوارم از مطالب این جلسه استفاده کرده باشید
ارادتمند شما، مهدیار منصوری
Mahdiar Mansouri
3 سال پیش
در تاریخ 1400/10/21 منتشر شده
است.
34
بـار بازدید شده