مشخصات مقاله
-
451
-
0.0
-
1355
-
0
-
0
آموزش Image Effects
آموزش Image Effects
در این مقاله می آموزید که چطور با استفاده از CSS و Html جلوه های ( افکت های) بصری به تصاویر اضافه کنید
فیلترهای تصویر
توجه : ویژگی فیلتر در مرورگر IE یا Edge 12 ساپورت نمیشود (قابلیت نمایش داده شدن ندارد)
CSS Filters
ویژگی CSS filter ، به عنصر مورد نظر افکت هایی مانند مات شدن و اشباع رنگ اضافه میکند.
توجه : ویژگی فیلتر در مرورگر IE ، Edge 12 یا Safari 5.1 قابل نمایش نمی باشد.
مثال رنگ خاکستری
رنگ تمامی تصاویر را به سیاه و سفید تغییر دهید ( 100% طوسی )
قدم اول : کد HTML را اضافه کنید.
مثال :
1 2 3 4 5 | <p>رنگ تصاویر را با سیاه و سفید تغییر دهید </p><img alt="Pineapple" width="300" height="300" data-src="http://articles.tahlildadeh.com/image.axd?picture=pineapple.jpg"> <button></button> |
قدم دوم : کد CSS را اضافه کنید.
مثال :
1 2 3 4 5 | img { -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%);} <button></button> |
نمونه مثال رنگ خاکستری :
1 2 3 4 5 | <p><br><p>رنگ تصاویر را با سیاه و سفید تغییر دهید </p></p><p><img src="http://articles.tahlildadeh.com/image.axd?picture=nature_4.jpg" alt="Pineapple" width="300" height="300"></p><button></button> |
خروجی Grayscale
مثال رنگ مات
به تمامی تصاویر افکت مات اضافه کنید:
قدم اول : کد HTML را اضافه کنید.
مثال :
1 2 3 4 5 | <p>به تمامی تصاویر افکت مات اضافه کنید</p><img alt="Pineapple" width="300" height="300" data-src="http://articles.tahlildadeh.com/image.axd?picture=pineapple.jpg"> <button></button> |
قدم دوم : کد CSS را اضافه کنید.
مثال :
1 2 3 4 5 | img { -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */ filter: blur(5px);} <button></button> |
نمونه مثال افکت مات:
1 2 3 4 | <p><p>به تمامی تصاویر افکت مات اضافه کنید</p></p><p><img src="http://articles.tahlildadeh.com/image.axd?picture=nature_4.jpg" alt="Pineapple" width="300" height="300"></p><button></button> |
خروجی Blur
