فصل css۳ خلاصه مطالب جلسه سیزدهم - gradient و border image در CSS

سلام دوستان خلاصه مطالبی که استاد توی این جلسه گفتن رو قرار دادم اگه مطلب اضافه تری رو دارین که بنده جا انداختم

لطفا اضافه کنید

مفهوم کلی گرادینت یعنی رسیدن از یک طیف رنگی به یک طیف رنگی دیگر هست که به دو نوع 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 باشد