فیلتر ها(filter)کاربردی وب در Css
بیشتر مواقع نیاز داریم تا هنگام طراحی یک صفحه وب بر روی عناصر از فیلتر های مختلفی که در برنامه های ویرایش تصویر مانند فتوشاپ هستند استفاده کنیم.در سی اس اس بخصوص Css3 فیلترهای بسیار کاربردی در اختیار توسعه دهندگان قرار گرفت تا به راحتی بتوانید بر روی عناصر و تصاویر خود از این فیلتر ها در دنیای وب استفاده کنند.
فیلتر ها در CSS
فیلترها در CSS یک روش پردازش کردن عنصر قبل از اینکه در صفحه نمایش داده شود می باشند. اگر با فیلترهای نرم افزار فوتوشاپ آشنا باشید در CSS هم تا الان چندین فیلتر از همان جنس برای استفاده موجود است. معمولا از این فلیترها برای تاثیر روی تصاویر در صفحه استفاده می شود ولی می توان این فیلترها را روی عناصری که تصویر هم ندارند اعمال کرد.برای درک بهتر توضیحات توصیه می کنیم از دوره آموزش ویدئویی Css پیشرفته استفاده کنید.
دانستن این موضوع هم خالی از لطف نیست اگر بدانید چندین کتابخانه مختلف برای ایجاد filter های جذاب و زیبا وجود دارد که می توانید از آن ها در پروژه خود استفاده کنید،یکی از معروف ترین کتابخانه ها CssGram است.
لیست تمامی فیلترهایی که در این آموزش استفاده کرده ایم:
- blur()
- brightness()
- contrast()
- drop-shadow()
- grayscale()
- hue-rotate()
- invert()
- opacity()
- saturate()
- sepia()
نحوه استفاده از یک Filter بسیاره ساده است به کد زیر دقت کنید
.img { filter: blur(20px); }
و همچنین می توانید چندین Filter را باهم استفاده کنید
.img { filter: blur(20px) grayscale(20%); }
تابع invert
این تابع امکان معکوس کردن رنگ ها را به ما می دهد و یک مقدار بین 0 تا 100% می گیرد و هر چه به سمت 100% حرکت کنیم تصویر از لحاظ رنگی معکوس تر به نظر می رسد. مقدار 100% نمایانگر نهایت وارونگی رنگ ها می باشد و عدد 0 تصویر یا عنصر را بدون تغییر نشان می دهد و اگر هیچ مقداری به این تابع ندهیم مقدار پیشفرض یعنی 100% را به خود می گیرد. اعداد بیشتر از 100% هم به 100% تبدیل می شوند. همچنین این تابع عدد بین صفر تا یک هم به جای درصد قبول می کند.
img { filter: invert(); filter: invert(40%); filter: invert(0.32); }
در ویدئو زیر به صورت کامل با Filter های Css3 آشنا می شویم.
[videojs mp4=”http://dl.codefriend.ir/Css%20Pishrafteh/%D9%81%DB%8C%D9%84%D8%AA%D8%B1%D9%87%D8%A7%20%D8%AF%D8%B1%20CSS.mp4″ width=”1280″ height=”720″]
برچسب:css filter, filter css, آموزش ویدئویی آنلاین, استفاده از hover در css, اموزش انلاین رایگان, اموزش کار با فیلتر, اموزش کار با فیلترها, بهترین سایت اموزشی, تابع در css, چندین Filter, خاصیت hover در css, خاصیت کلیک در css, دستور hover در html, طراحی صفحات وب پیشرفته, طراحی یک صفحه وب, فلیترهای وب, فوتوشاپ, فیلتر ها در Css, فیلتر ها(filter)در Css, فیلتر وب در Css, فیلترها در فتوشاپ, فیلترهای css, کتابخانه css, معروف ترین, منابع آموزش, منابع آموزشی برنامه نویسی, منبع اموزش وب