جستجو برای:
  • صفحه اصلی
  • دوره های آموزشی
    • آموزش سئو محتوا جدید 1401
    • آموزش رایگان وردپرس 1401
    • آموزش رایگان HTML و CSS
    • دوره طراحی سایت فرانت اند
    • دوره طراحی سایت با وردپرس
    • دوره جامع برنامه نویسی PHP
  • انجمن سایت آموزی
  • مقالات سایت آموزی
  • تماس با سایت آموزی
  • درباره سایت آموزی
  • 09366806011
  • siteamoozi[at]gmail.com
  • آموزش طراحی سایت
  • آموزش وردپرس
سایت آموزی
  • صفحه اصلی
  • دوره های آموزشی
    • آموزش سئو محتوا جدید 1401
    • آموزش رایگان وردپرس 1401
    • آموزش رایگان HTML و CSS
    • دوره طراحی سایت فرانت اند
    • دوره طراحی سایت با وردپرس
    • دوره جامع برنامه نویسی PHP
  • انجمن سایت آموزی
  • مقالات سایت آموزی
  • تماس با سایت آموزی
  • درباره سایت آموزی
0

ورود و ثبت نام

بلاگ

سایت آموزی > مقالات سایت آموزی > آموزش های طراحی سایت > css > صفت filter در css

صفت filter در css

اسفند 24, 1398
ارسال شده توسط سایت آموزی
css
1.02k بازدید

صفت filter در css روش های پردازش رندر کردن تگ های html

در این مقاله از سایت آموزی در مجموعه آموزش های صفات سی اس اس به بررسی و تحلیل خاصیت filter در زبان CSS می پردازیم.

ویژگی کاربردی filter در سومین نسخه این زبان طراحی یعنی css3 معرفی شده است.

صفت filter در css روش های پردازش رندر کردن عناصر html

معرفی و کاربرد ویژگی filter در زبان طراحی سی اس اس

به کمک خاصیت filter در CSS3 می توانیم عناصر html را قبل از نمایش در صفحه وب  به شیوه دلخواه خود پردازش و رندر نماییم.

filter در حقیقت یک عمدتا جهت تاثیر روی تصاویر در صفحات وب استفاده می شوند. اما می توانیم علاوه بر تگ ایجاد تصاویر برای سایر تگ های html نیز از خصوصیت filter بهره برد.

جهت اجرای دستورات توابع filter حتما باید از پیشوندها یا perfix های لازم برای مرورگرهای معتبر اینترنتی استفاده نماییم.

به عنوان مثال برای اعمال توابع فیلتر در مرورگر گوگل کروم از پیشوند -webkit- استفاده نمایید.

مقادیر صفت کاربردی filter در زبان طراحی css

صفت filter که در زبان طراحی CSS3 معرفی شده است، 14 مقدار می پذیرد که عبارتند از:

  1. مقدار none
  2. تابع ()blur
  3. تابع ()brightness
  4. تابع ()contrast
  5. تابع ()drop-shadow
  6. تابع ()grayscale
  7. تابع ()hue-rotate
  8. تابع ()invert
  9. تابع ()opacity
  10. تابع ()saturate
  11. تابع ()sepia
  12. تابع ()url
  13. مقدار initial
  14. مقدار inherit

مقدار none درون خاصیت filter در زبان سی اس اس

اگر خاصیت filter را برای یک عنصر html برابر با مقدار none قرار دهیم، در حقیقت می خواهیم هیچگونه تغییری در حالت پیش فرض نمایش تصاویر یا سایر تگ های html توسط خاصیت filter اعمال نشود.

مقدار none به عنوان مقدار پیش فرض خصوصیت filter محسوب می شود.

[html] h3 {-webkit-filter: none;} [/html]

تابع ()blur درون خاصیت filter در زبان css

اگر خاصیت filter را برای یک عنصر html برابر با تابع ()blur قرار دهیم، در حقیقت می خواهیم عناصر html را قبل از نمایش در صفحه وب ، به شیوه ای مات و یا محو شده رندر کنیم.

برای تابع ()blur تنها مقادیر مثت مجاز است. هر چه این مقدار مثبت بیشتر باشد، تصاویر و یا سایر المان های html مورد نظر مات تر و محو شده تر دیده می شوند.

مقدار صفر ، برای تابع ()blur معادل اعمال نشدن خصوصیت filter بر روی المان های html مربوطه می باشد.

تابع ()blur ، مقدار طولی براساس واحد px , em , rem و … می پذیرد. اما برای این تابع نمی توانید از مقادیر درصدی ( % ) استفاده نمایید.

blur | صفت filter در css روش های پردازش رندر کردن عناصر html[html] h3 {-webkit-filter: blur(10px);} [/html]

تابع ()brightness درون خاصیت filter در زبان سی اس اس

اگر خاصیت filter را برای یک عنصر html برابر با تابع ()brightness قرار دهیم، در حقیقت می خواهیم میزان روشنایی یک عنصر html را تعیین نماییم.

تابع ()brightness ، مقدار 0 تا 1 و همچنین مقدار درصدی ( % ) می پذیرد. در مقدار عددی هر چقدر به سمت صفر نزدیک تر شویم، عنصر html تاریک تر و هر چقدر به سمت یک نزدیک تر باشیم، عنصر html روشن تر خواهد شد.

یعنی عناصری با مقدار صفر کاملا تاریک و عناصر html با مقدار 1 ، کاملا روشن خواهند بود.

در مورد مقدار درصدی نیز هرچقدر مقدار درصدی برای عناصر html بیشتر از 100% تعیین شود، عناصر html روشن تر خواهند شد.

[html] h3 {-webkit-filter: brightness(200%);} [/html]

صفت filter در css روش های پردازش رندر کردن تگ های html

brightnes | صفت filter در css روش های پردازش رندر کردن عناصر htmlتابع ()contrast درون خاصیت filter در زبان css

اگر خاصیت filter را برای یک عنصر html برابر با تابع ()contrast قرار دهیم، در حقیقت می خواهیم تضاد بین روشن ترین و تاریک ترین ، بخش های یک تصویر را معین کنیم.

مقدار دهی در این تابع کاملا مانند مقدار دهی درون تابع ()brightness می باشد.

[html] h3 {-webkit-filter: contrast(200%);} [/html]

contrast | صفت filter در css روش های پردازش رندر کردن عناصر html

تابع ()drop-shadow درون خاصیت filter در زبان سی اس اس

اگر خاصیت filter را برای یک عنصر html برابر با تابع ()drop-shadow قرار دهیم، در حقیقت می خواهیم در پشت عناصر html چند ضلعی و یا دایره ای شکل سایه بیندازیم.

ویژگی box-shadow تنها برای سایه اندازی  تگ های html در اشکال مربع و مستطیلی مناسب است، اما بوسیله تابع ()drop-shadow می توان اشکالی چند ضلعی و یا دایره ای را هم سایه دار کرد.

این تابع 4 مقدار می پذیرد. مقدار اول و دوم مکان سایه را در راستای افقی تعیین می کنند. مقدار سوم ماتی سایه یا میزان بلور است. و مقدار چهارم هم رنگ سایه را مشخص می نماید.

[html] h3 {-webkit-filter: drop-shadow(10px 10px 3px rgba(0,0,0,0.3));} [/html]

drop-shadow | صفت filter در css روش های پردازش رندر کردن عناصر htmlتابع ()grayscale درون خاصیت filter در زبان css

اگر خاصیت filter را برای یک عنصر html برابر با تابع ()grayscale قرار دهیم، در حقیقت می خواهیم تصویر را سیاه سفید یا بی رنگ نماییم. مقادیر این تابع بین 0% تا 100% و بین 0 تا 1 است. در مقادیر درصدی 0% حکم بدون تغییر بودن رنگ تصویر و 100% تصویر را به بی رنگ ترین حالت ممکن تبدیل می کند. عدد 0 نیر تصویر در حالت بدون تغییر رنگ و عدد 1 تصویر را به بی رنگ ترین حالت ممکن تغییر می دهد.

[html] h3 {-webkit-filter: grayscale(100%);} [/html]

grayscale | صفت filter در css روش های پردازش رندر کردن عناصر html

تابع ()hue-rotate درون خاصیت filter در زبان سی اس اس

اگر خاصیت filter را برای یک عنصر html برابر با تابع ()hue-rotate قرار دهیم، در حقیقت می خواهیم یک درجه برای رنگ مورد نظر تعیین نماییم.

همانطور که می دانید همه رنگ ها در یک ساختار دایره ای شکل قرار می گیرند. که بین 0 تا 360 درجه می باشد. تابع ()hue-rotate نیز یک مقادیر بین 0 درجه تا 360 درجه را برای تگ html مربوطه تعیین می نماید.

مقدار پیش فرض صفر درجه به معنی عدم تغییر رنگ توسط تابع ()hue-rotate در بوده و مقدار 360 درجه به طور کامل رنگ را درتگ html مروطه تغییر خواهد داد.

[html] h3 {-webkit-filter: hue-rotate(120deg);} [/html]

صفت filter در css روش های پردازش رندر کردن تگ های html

hue-rotate | صفت filter در css روش های پردازش رندر کردن عناصر html

تابع ()invert درون خاصیت filter در زبان css

اگر خاصیت filter را برای یک عنصر html برابر با تابع ()invert قرار دهیم، در حقیقت می خواهیم یک تگ html و یا تصاویر اچ تی ام الی را معکوس نماییم.

تابع ()invert ، مقادیری بین 0% تا 100% و مقادیری بین 0 و 1 را به خود اختصاص می دهد. مقدار پیش فرض 0% به معنی عدم معکوس شدن رنگ و مقدار 100% به عنوان حداکثر معکوس شدن رنگ ها می باشد. مقادیر بیشتر از 100% به 100% برمی گردند.

همچنین مقدار 0 به معنی عدم معکوسی در رنگ تگ html مربوطه و مقدار 1 به معنی حداکثر معکوس شدگی رنگ در عنصر html مورد نظر است.

[html] h3 {-webkit-filter: invert(100%);} [/html]

invert | صفت filter در css روش های پردازش رندر کردن عناصر html

تابع ()opacity درون خاصیت filter در زبان سی اس اس

اگر خاصیت filter را برای یک عنصر html برابر با تابع ()opacity قرار دهیم، در حقیقت می خواهیم یک شفافیت به تگ html مورد نظر بدهیم.

تابع ()opacity نیز کاملا مشابه صفت opacity عمل می کند. این تابع نیز مقادیری بین 0% تا 100% و بین 0 تا 1 می گیرد.

در مقادیر درصدی و عددی ذکر شده، هرچه به سمت مقدار کوچک تر برویم، شفافیت و یا شیشه ای شدن تگ html یا تصویر اچ تی ام الی بیشتر خواهد شد. تا جایی که در مقدار 100% و مقدار 1 به حداکثر شفافیت و ناپدید شدن عنصر HTML می رسیم.

[html] h3 {-webkit-filter: opacity(0.4);} [/html]

opacity | صفت filter در css روش های پردازش رندر کردن عناصر html

تابع ()saturate درون خاصیت filter در زبان css

اگر خاصیت filter را برای یک عنصر html برابر با تابع ()saturate قرار دهیم، در حقیقت می خواهیم به یک عنصر html یا تصویر اچ تی ام الی ، یک رنگ زنده تر بدهیم.

تابع ()saturate تصویر اچ تی ام الی را خوش رنگ تر می کند. این تابع مقدار 0 تا 1 و مقدار 0% تا 100% را می پذیرد. مقادیر کوچکتر تغییر کمتری در رنگ اعمال می کند و مقادیر بزرگتر منجر به زنده تر شدن و اشباع بیشتر رنگ می گردد. مقادیر بیشتر از 100% هم برای این تابع در نظر گرفته می شود و رنگ تصویر را به حالت اشباع تری تبدیل می کند.

[html] h3 {-webkit-filter: saturate(250%);} [/html]

saturation | صفت filter در css روش های پردازش رندر کردن عناصر html

تابع ()sepia درون خاصیت filter در زبان سی اس اس

اگر خاصیت filter را برای یک عنصر html برابر با تابع ()sepia قرار دهیم، در حقیقت می خواهیم به یک عنصر html یا تصویر اچ تی ام الی ، یک رنگ قهوه ای ملایم بدهیم.

تابع ()sepia ، مقدار 0 تا 1 و مقدار 0% تا 100% را می پذیرد. مقادیر کوچکتر تغییر کمتری در رنگ اعمال می کند و مقادیر بزرگتر منجر به تغییر رنگ بیشتر می گردد.

[html] h3 {-webkit-filter: sepia(100%);} [/html]

sepia | صفت filter در css روش های پردازش رندر کردن عناصر html

تابع ()url درون صفت filter در زبان css

اگر خاصیت filter را برای یک عنصر html برابر با تابع ()url قرار دهیم، در حقیقت می خواهیم یک فیلتر سفارشی شده توسط خودمان که مثلا با SVG ساخته ایم را به تگ HTML مورد نظر یا تصویر اچ تی ام الی اعمال کنیم. در این صورت برای اعمال این نوع فیلتر کافی آدرس id فیلتر ساخته شده را در تابع ()url بنویسیم.

[html] h3 {-webkit-filter: url(#myFilter);} [/html]

مقدار initial درون خاصیت filter در زبان سی اس اس

اگر خاصیت filter را برابر با مقدار initial تعریف کنیم، در حقیقت مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.

مقدار inherit درون خاصیت filter در زبان css

اگر خاصیت filter را برابر با مقدار inherit تعریف کنیم، در واقع تگ html مربوطه خصوصیت مورد نظر را از والد پدری خود به ارث می برد.

صفت filter در css روش های پردازش رندر کردن عناصر html

بررسی صفت filter از نظر نسخه زبان طراحی css

ویژگی کاربردی filter در سومین نسخه این زبان طراحی یعنی css3 معرفی شده است.

بررسی ساختاری خصوصیت filter در زبان طراحی سی اس اس

عناوین ساختاری خاصیت filter

وضعیت ساختاری خاصیت filter

مقدار پیش فرض

none

قابلیت توارث

ندارد

قابلیت تحرک

دارد

ورژن css صفت

CSS3

سینتکس صفت در جاوا اسکریپت

"object.style.WebkitFilter="grayscale(100%)

پشتیبانی مرورگرهای اینترنتی از خاصیت filter در زبان طراحی css
خاصیت css chromeinternet-explorerfirefoxsafariopera
filter 53.0 به بالا و 18.0 تا 53.0 با -webkit- 13.0 35.0 9.1 به بالا و 6.0 تا 9.1 با -webkit- 40.0 به بالا و 15.0 تا 40.0 با -webkit-

پیوندهای مهم و کاربردی

تگ های HTML در سایت آموزی

تگ های جدید HTML5 در سایت آموزی

صفات تگ های HTML در سایت آموزی

تگ های منسوخ شده HTML5 در سایت آموزی

تگ های block level و inline level در سایت آموزی

تگ های HTML در W3school

ویژگی های CSS در سایت آموزی

ویژگی های CSS در W3schools

صفت filter در css روش های پردازش رندر کردن تگ های html – اختصاصی سایت آموزی

محتوا نمایش
1 معرفی و کاربرد ویژگی filter در زبان طراحی سی اس اس
2 مقادیر صفت کاربردی filter در زبان طراحی css
3 مقدار none درون خاصیت filter در زبان سی اس اس
4 تابع ()blur درون خاصیت filter در زبان css
5 تابع ()brightness درون خاصیت filter در زبان سی اس اس
6 صفت filter در css روش های پردازش رندر کردن تگ های html
7 تابع ()contrast درون خاصیت filter در زبان css
8 تابع ()drop-shadow درون خاصیت filter در زبان سی اس اس
9 تابع ()grayscale درون خاصیت filter در زبان css
10 تابع ()hue-rotate درون خاصیت filter در زبان سی اس اس
11 صفت filter در css روش های پردازش رندر کردن تگ های html
12 تابع ()invert درون خاصیت filter در زبان css
13 تابع ()opacity درون خاصیت filter در زبان سی اس اس
14 تابع ()saturate درون خاصیت filter در زبان css
15 تابع ()sepia درون خاصیت filter در زبان سی اس اس
16 تابع ()url درون صفت filter در زبان css
16.1 مقدار initial درون خاصیت filter در زبان سی اس اس
16.2 مقدار inherit درون خاصیت filter در زبان css
16.3 بررسی صفت filter از نظر نسخه زبان طراحی css
16.3.1 بررسی ساختاری خصوصیت filter در زبان طراحی سی اس اس
16.3.2 پشتیبانی مرورگرهای اینترنتی از خاصیت filter در زبان طراحی css
16.4 پیوندهای مهم و کاربردی
16.5 صفت filter در css روش های پردازش رندر کردن تگ های html – اختصاصی سایت آموزی
برچسب ها: آموزش کاربردی طراحی سایتآموزش های CSS3سی اس اسطراحی سایت کاربردیویژگی های css
درباره سایت آموزی

علیرضا ابراهیمی - بنیانگذار وبسایت آموزشی سایت آموزی ، 8 سال سابقه فعالیت حرفه ای در زمینه طراحی سایت ، سئو ، سابقه تدریس اغلب زبان های برنامه نویسی تحت وب ، محقق و تحلیلگر ساختارهای توسعه دهنده وب

نوشته های بیشتر از سایت آموزی
در اینستاگرام
ما را دنبال کنید!

مطالب زیر را حتما مطالعه کنید

لیست کامل ویژگی های CSS | لیست صفات CSS | صفات CSS3 | آموزش طراحی سایت حرفه ای | فیلم آموزش طراحی سایت

صفت all در زبان سی اس اس

لیست کامل ویژگی های CSS | لیست صفات CSS | صفات CSS3 | آموزش طراحی سایت حرفه ای | فیلم آموزش طراحی سایت

صفت align-items در زبان سی اس اس

لیست کامل ویژگی های CSS | لیست صفات CSS | صفات CSS3 | آموزش طراحی سایت حرفه ای | فیلم آموزش طراحی سایت

خاصیت align-self در زبان سی اس اس

لیست کامل ویژگی های CSS | لیست صفات CSS | صفات CSS3 | آموزش طراحی سایت حرفه ای | فیلم آموزش طراحی سایت

صفت animation-delay در زبان سی اس اس

لیست کامل ویژگی های CSS | لیست صفات CSS | صفات CSS3 | آموزش طراحی سایت حرفه ای | فیلم آموزش طراحی سایت

صفت animation-play-state در زبان سی اس اس

لیست کامل ویژگی های CSS | لیست صفات CSS | صفات CSS3 | آموزش طراحی سایت حرفه ای | فیلم آموزش طراحی سایت

صفت animation-duration در زبان سی اس اس

قدیمی تر معرفی و کاربرد تگ address در html
جدیدتر تگ blockquote در html

دیدگاهتان را بنویسید لغو پاسخ

5 × یک =

دوره های آموزشی
دوره طراحی سایت فروشگاهی دوره طراحی سایت فروشگاهی
دوره طراحی سایت فرانت اند آموزش طراحی سایت فرانت اند
لوگوی معتبر پرداخت بانک اینترنتی پی لاین
لوگوی معتبر نماد اعتماد الکترونیک
لوگوی معتبر ساماندهی رسانه های دیجیتال
logo-samandehi
آخرین مقالات سایت آموزی
  • زبان های برنامه نویسی طراحی سایت
  • آموزش نصب وردپرس در لوکال هاست
  • رفع ارور Inline small CSS در جی تی متریکس
  • ویژگی onbeforeprint در زبان اچ تی ام ال
  • ویژگی name در زبان اچ تی ام ال
آخرین دیدگاه‌ها
  • مریم در خاصیت background-color در css
  • ابوالفضل در تفاوت شناسه و کلاس در اچ تی ام ال و سی اس اس
  • سایت آموزی در آموزش رایگان طراحی سایت شرکتی با وردپرس ( جدید 1401 )
  • hadi sobati در آموزش رایگان طراحی سایت شرکتی با وردپرس ( جدید 1401 )
  • سایت آموزی در آموزش HTML و CSS رایگان ، پروژه محور و کاربردی ( جدید 1401 )
تمامی حقوق برای سایت آموزی محفوظ می باشد.

ورود

18 − هشت =

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت