۰ emad ta
فصل css۳ خلاصه مطالب جلسه چهاردهم - filter , root و ماژولار نویسی css
جامعه Html & CSS ایجاد شده در ۱۹ مرداد ۱۳۹۹

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

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

 

معرفی filter‌ها : یک سری توابع رو در داخل خودش دارد 

1- ( ) blur این تابع در واقع میاد و صفحه رو مات میکند و مقادیر عددی به صورت پیکسل میگیرد 

2-  ( ) brightness این تابع میزان نور و روشنایی  در تصویر مشخص میکند 

3-  ( )  contrast میزان غلظت و اشباع شدگی بین رنگ هارو  انجام میدهد پر رنگ کردن و تیره کردن و به صورت درصدی مقدار مگیرد تضاد رنگی 

4-  ( )  grayscale  میزان سیاه و سفیدی و مردگی تصویر رو میاد و مشخص میکند از رنگی بودن به سمت سیاه و سفید بودن و مقادیر بین صفر تا 100 درصد مقدار می‌گیرد

5-  ( ) hue-rotate  چرخش رنگ‌ها به منظور نقطه مقابلشون مثلا آبی به قرمز و درجه میگیرد 

6- ( ) invert میاد و بین تصویر اصلی و حالت نگاتیو اون تغیر ایجاد میکند و مقادیر درصدی میگیرد 

7- () opacity میزان وضوح تصویر رو میاد و مشخص میکند و مقادیر درصدی میگیرد 

8- ( ) saturation میزان اشباع شدگی رنگ رو میاد و مشخص و مقادیر درصدی میگیرد

9- ( ) sepia بین رنگ خودش و یک رنگ قهوه ای شروع به پیمایش میکند

10 -( ) drop-Shadow برای سایه ما ی جور ایجاد سایه میکند و در تصویرمون سایه درست میکند وسه مقدار به صورت پیکسلی میگیرد 

و به عنوان خلاصه نوشتن در ابتدا  میتوانیم از تابع ( )  contrast و بعد از تابع ( ) brightness و .. استفاده بکنیم 

 

همان طور که قبلا هم گفتیم زبان Css یک زبان برنامه نویسی نیست چون در آن ما نمیتوانیم توابع و متغیرهارو بیایم و تعریف بکنیم و برای حل این مورد پیش پردازنده هایی مثل sass و less معرفی شده اند که وظیفه اشون این بود که بعضی از قابلیت هایی مثل تعریف توابع یا متغیر هارو بیاین

خود css به تنهایی برای رفع این موضوع یک سودوکلاس به نام روت رو اومد و درست کرد که بتوانیم یک چیزایی شبیه به متغیر‌ها در اون ایجاد بکنیم شیوه کار به این صورت هست که ما یک استایل  به صورت root: {} تعریف میکنیم بعد در داخل اون میایم و  متغیر هامون رو اضافه میکنیم و هرجا که خواستیم بیایم واز این‌ها استفاده بکنیم به این صورت که در داخل  ( نام متغیری که نوشتیم قرار میدهیم ) var 

 

 

ماژولا کردن : یک پروژه به صورت متوسط ممکن هست به صورت 2500 تا 3000 تا استایل داشته باشد که اگه بیایم و استایل هارو در یکی قرار دهیم  درسته میایم و برای فهم بیشتر کامنت گزاری میکنیم اما این اسکرول مدیریت کد هامون سخت میکند که خود css با ماژولار  رو برای مدیریت برامون در نظر گرفته اما محصول نهایی باید فشرده و به صورت یک فایل استایل بره و فرستاده بشود چون اگه فایل‌ها زیاد باشن به ازای هر فایل یک درخواست ارسال می‌شود که خوب نیست حال برای نوشتن ماژولار ما در داخل یک فایل جداگانه میایم و کدهامونو می‌نویسیم و در انتها اون هارو به پوشه ی اصلی مون import میکنیم که خود import کردن هم به دو صورت هست 

1- " import " adress file @ 

2-    ( " " ) import url @

 

نکته » برای ما‌ها که از کاراکترهای فارسی استفاده میکنیم برای بهتر کار کردن بهتر است از  کد زیر بیایم و اضافه بکنیم 

و در بالاترین قسمت سندمون باشد   "charset "UTF-8 @