فصل css۳ خلاصه مطالب جلسه چهاردهم - filter , root و ماژولار نویسی css

پرسیده شده
فعالیت 1353 روز پیش
دیده شده 712 بار
9

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

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

 

معرفی 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 @

 

 

 

 

 

فایل پیوست

emad ta
emad ta

19 مرداد 99