ایجاد شده در ۱۸ مرداد ۱۳۹۹
سلام دوستان خلاصه مطالبی که استاد توی این جلسه گفتن رو قرار دادم اگه مطلب اضافه‌تری رو دارین که بنده جا انداختم
لطفا اضافه کنید
مفهوم کلی گرادینت یعنی رسیدن از یک طیف رنگی به یک طیف رنگی دیگر هست که به دو نوع linear و radial
برای استفاده از گرادینت‌ها باید بیایم و از پراپرتی background-image استفاده بکنیم و بعد توابع گرادینت را در داخل آن‌ها صدا بزنیم همچنین میتوانیم از background هم بیایم و استفاده بکنیم
linear-gradient : به عنوان مقدار اول جهت گرادیت رو میگرد که مقادیر to right و to left و to top و to bottom رو میگیرد و به عنوان مقدارهای دوم و سوم و .. هم مقادیر رنگی میگیرد
نکنه » همچنین ما برای جهت‌ها هم میتوانیم مقادیر درجه چه مثبت و چه منفی هم بیایم و بدهیم مثل 55deg
repeating-linear-gradient مشابه یکی بالایی هست ولی سه مقدار میگیرد که هرسه مقادیر رنگی هستند همچنین در کنار آن‌ها مخصوصا مقدار آخری با گزاشتن درصد میتوانیم بیایم و اون رو تکرار کنیم
readial-gradient : یک حالت بیضی و دایره ای رو درست میکند که از مرکز شروع میکند به اجرا شدن و مقادیر رنگی میاد و میگیرد و همچنین ما در مقادیر اول به جای استفاده از رنگ میتوانیم بیایم و از shape ها هم استفاده بکنیم برای مثال شکل circle
معرفی وب سایت cssgradient.io برای کار کردن بهتر با گرادینت‌ها مون در داخل پروژه
borderImage : برای استفاده از آن در ابتدا باید بیایم و از یک border معمولی استفاده بکنیم و مقدار رنگ اون رو برابر با transparent بکنیم همچنین با استفاده از اون مقدار عددی که میدهیم میتوانیم زخامت رو هم کنترل بکنیم و به طور کلی جدا جدا میتوانیم به صورت زیر ازش استفاده بکنیم
border-image-slice : تعداد تکرار‌های تصاویر border رو میاد و انجام میدهد
border-image-source : منبع عکس مورد استفاده مارو میاد و در داخل یک url میگیرد
border-image-repeat : میاد و سه حالت میگیرد اولی مقدار round هست که میاد و حالت تکرار پذیری در وسط‌ها انجام میدهد و راس هارو کاری ندارد دومی stretch که میاد و می‌کشه اون border های مارو یعنی راس هارو کاری نداره و وسط رو میاد و می‌کشه space بین دو مقادیر قبلی هست
حال برای خلاصه نویسی هم border-image میاد مورد اول url و مورد دوم مقدار slice رو میگیرد و مورد سوم repeat
تصاویر ما برای استفاده باید به صورت png باشد