آموزش Image Effects
در این مقاله می آموزید که چطور با استفاده از CSS و Html جلوه های ( افکت های) بصری به تصاویر اضافه کنید
فیلترهای تصویر
توجه : ویژگی فیلتر در مرورگر IE یا Edge 12 ساپورت نمیشود (قابلیت نمایش داده شدن ندارد)
CSS Filters
ویژگی CSS filter ، به عنصر مورد نظر افکت هایی مانند مات شدن و اشباع رنگ اضافه میکند.
توجه : ویژگی فیلتر در مرورگر IE ، Edge 12 یا Safari 5.1 قابل نمایش نمی باشد.
مثال رنگ خاکستری
رنگ تمامی تصاویر را به سیاه و سفید تغییر دهید ( 100% طوسی )
قدم اول : کد HTML را اضافه کنید.
مثال :
رنگ تصاویر را با سیاه و سفید تغییر دهید
![Pineapple]()
قدم دوم : کد 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 را اضافه کنید.
مثال :
به تمامی تصاویر افکت مات اضافه کنید
![Pineapple]()
قدم دوم : کد 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
