جهت ورود به تالار گفتمان سایت کلیک کنید


آموزش کامل استفاده از خاصیت فیلتر در Css

یکی از خاصیت های بسیار حرفه ای و زیبای CSS , خاصیت filter میباشد . این خاصیت با مقادیری که دارد , میتوانید عکس مورد نظر خود را به سیاه سفید , تار , سایه و … تبدیل کنید .

برای این ساعت از سایت اسکریپت دات کام قصد دارم به آموزش این توابع از css بپردازم که امیدوارم مورد پسند کاربران گرامی قرار گیرد .

یکی از معایب filter ها , عدم پشتیبانی تمامی مرورگرها از این خاصیت می باشد . این خاصیت را در حال حاضر مرورگر های Google Chrome و Opera پشتیبانی میکنند و مرورگر های FireFox , Safari و IE از این خاصیت پشتیبانی نمیکنند .

طبیعتا وب سایتی مورد تایید است که در تمامی مرورگرها یکسان باشد . یعنی از خاصیت هایی استفاده شود تا تمامی مرورگرها قابلیت پشتیبانی از آنها را داشته باشند . ولی این مورد , به معنی عدم استفاده از Filter ها نمی باشد . چون در حال حاضر , 60% مردم دنیا از گوگل کروم استفاده میکنند .

آموزش کامل استفاده از خاصیت فیلتر در Css

و اما آموزش : 

1 – در ابتدا باید توجه داشته باشید که باید در css , هم خاصیت Filter را بنویسید و هم با پیشوند -webkit-

( Function  به معنی تابع می باشد که در ادامه آموزش خواهم داد )

2 – طبیعتا برای همه ی عکس های یک وب سایت , دادن این توابع خیلی عقلانی نیست و باید به صورت سفارشی سازی , فقط بعضی از عکس ها از این توابع تبعیت کنند .

میتوانید از کلاس های html استفاده کنید .  به عنوان مثال :  

تابع خاصیت GrayScale ( سیاه و سفید ) :  ( نکته : مقدایر بین %0 تا  %100 را میگیرد )

 

تابع خاصیت sepia ( عکس های قدیمی ) :  ( نکته : مقدایر بین %0 تا %100 را میگیرد )

 

تابع خاصیت saturate ( غلظت رنگ ها ) :  ( نکته : مقدایر بین %0 تا  %∞ را میگیرد )

 تابع خاصیت blur ( تاری و شفافیت عکس ) :  ( نکته : مقدایر بین 0px تا 100px را میگیرد )

تابع خاصیت hue-rotate ( تغییر رنگ بر اساس دایره رنگی ) :  ( نکته : مقدایر بین 0deg تا 360deg را میگیرد )

 تابع خاصیت invert ( تبدیل رنگ ها به مکمل رنگشان ) :  ( نکته : مقدایر بین %0 تا %100 را میگیرد )

 تابع خاصیت contrast ( کنتراست ) :  ( نکته : مقدایر بین %0 تا  %∞ را میگیرد )

 تابع خاصیت brightness ( تاریکی و روشنایی ) :  ( نکته : مقدایر بین %0 تا  %∞ را میگیرد )

 تابع خاصیت drop-shadow ( سایه ) :

توجه : عدد اول جابجایی سایه در جهت محور x , عدد دوم جابجایی سایه در جهت محور y , عدد سوم مقدار سایه و در آخر رنگ سایه  . ضمنا عدد ای اول و دوم میتوانند منفی هم باشند .

دموی تمامی توابع

پخش اختصاصی

گرداوری : وحید مجیدی

فایل آماده آموزش :

  • امتیاز شما به این مقاله ؟
    خیلی بدبدمعمولیخوبخیلی خوب (لطفا رای بدید)
  • جهت تبادل گفتگو و حل مشکلات در باره این موضوع , کلیک کنید

    9 پاسخ به “آموزش کامل استفاده از خاصیت فیلتر در Css”

    1. شاهین گفت:

      مرسی داش وحید
      لطفا آموزش درباره افکت هایی که برای عکس می تونیم به کار ببریم بیشتر بزار
      چاکریم

    2. شاهین گفت:

      داش وحید دمت گرم خیلی به درد خورد فقط تو مرورگر واترفاکس و اینترنت اکسپلورر نشونشون نمیده، اگه از مرورگره که هیچی ولی اگه میشه واسه اونام درستش کرد لطفا بگو. مرسی

      • وحید مجیدی گفت:

        شاهین جان همون طور که توی پست نوشتم این کد ها فقط برای کروم هست و بقیه ساپورت نمیکنن به هیچ عنوان

    3. بهینه سازی وردپرس گفت:

      فوق العاده بود

      خیلی ممنون بابت وب سایت خوبتون

    4. محمد فرجی گفت:

      عالـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــی

      وحید جون مثه همیـــــــــــــــــــــــــــــــــــــــــــشه
      تکــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــی

    5. وحید مجیدی گفت:

      قربان شما وظیفس …

    6. ارم سرور گفت:

      ممنون

    7. dashesi_lamer گفت:

      نایس

    پاسخ دادن به شاهین لغو پاسخ

    نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *