آموزش Image Effects

در این مقاله می آموزید که چطور با استفاده از CSS و Html جلوه های ( افکت های) بصری به تصاویر اضافه کنید

فیلترهای تصویر

توجه :  ویژگی فیلتر در مرورگر IE یا Edge 12 ساپورت نمیشود (قابلیت نمایش داده شدن ندارد)

CSS Filters

ویژگی CSS filter ، به عنصر مورد نظر افکت هایی مانند مات شدن و اشباع رنگ اضافه میکند.

توجه :  ویژگی فیلتر در مرورگر IE ، Edge 12 یا Safari 5.1 قابل نمایش نمی باشد.

مثال رنگ خاکستری

رنگ تمامی تصاویر را به سیاه و سفید تغییر دهید ( 100% طوسی )

قدم اول : کد HTML را اضافه کنید.
مثال :

رنگ تصاویر را با سیاه و سفید تغییر دهید 



                

قدم دوم :   کد CSS را اضافه کنید.
مثال :

img {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}
                

<p>رنگ تصاویر را با سیاه و سفید تغییر دهید </p>

<img src="http://articles.tahlildadeh.com/image.axd?picture=nature_4.jpg" alt="Pineapple" width="300" height="300">

خروجی Grayscale  

مثال رنگ مات

به تمامی تصاویر افکت مات اضافه کنید:

قدم اول : کد HTML را اضافه کنید.
مثال :

به تمامی تصاویر افکت مات اضافه کنید



                

قدم دوم :   کد CSS را اضافه کنید.
مثال :

img {
  -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
  filter: blur(5px);
}
                

<p>به تمامی تصاویر افکت مات اضافه کنید</p>

<img src="http://articles.tahlildadeh.com/image.axd?picture=nature_4.jpg" alt="Pineapple" width="300" height="300">

خروجی Blur