با سلام خدمت شما دوستان عزیز
با اولین آموزش از سری آموزش های CSS3 در خدمتتون هستم. انشالله که مفید باشه. خیلی خوشحال میشم نظرات خودتون رو برام بنویسید تا در آموزش های بعدی ازشون بهره بگیرم.

تا حالا شده به ذهنتون برسه با استفاده از CSS بروی تصاویر و المان های HTML افکت های بلور ( تار شدگی )، افزایش Brightness یا خیلی افکت ها دیگر رو اعمال کنید؟

در این آموزش کوتاه قصد داریم بخشی از این افکت ها رو با استفاده از CSS3 بروی یک تصویر اعمال کنیم.

خاصیتی که برای کل این افکت ها به کار گرفته می شود خاصیت فیلتر در CSS3  است ( CSS3 Filter ).

filter: filter(value);

که البته در مرورگر های مختلف یک پارامتر به آن اضافه می شود. به طور مثال در مرورگر کروم -webkit- به آن اضافه می شود.

-webkit-filter: filter(value);
-moz-filter: filter(value);
-o-filter: filter(value);
-ms-filter: filter(value);

حالا آماده اید که با خاصیت فیلتر به تصاویر افکت بدیم ؟

اگر بخواهیم چند افکت رو با هم به کار ببریم با یک Space اون ها رو از هم جدا می کنیم.
به طور مثال دو افکت بلور و Brightness با هم در کد زیر به کار رفته است.

filter: blur(5px) brightness(0.5);

افکت بلور و تارشدگی با استفاده از CSS3 :

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

filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);

افزایش و کاهش روشنایی تصویر با استفاده از CSS3

CSS3

CSS3

مقدار روشنایی تصویر با استفاده از فیلتر Brightness از مقدار ۰ تا ۱ مشخصی می شود.

filter: brightness(0.2);
-webkit-filter: brightness(0.2);
-moz-filter: brightness(0.2);
-o-filter: brightness(0.2);
-ms-filter: brightness(0.2);

تغییر مقدار غلظت رنگ (Saturation) با CSS3

CSS3

این افکت با فیلتر saturate() قابل اعمال است و درصد هم قبول میکند.

filter: saturate(50%);
-webkit-filter: saturate(50%);
-moz-filter: saturate(50%);
-o-filter: saturate(50%);
-ms-filter: saturate(50%);

کنترل کنتراست تصویر با استفاده از CSS3

CSS3

این افکت با درصد تغییر می کند، به طوری که مقدار ۱۰۰ درصد تصویر به طور پیش فرض بوده و در مقدار ۰ تصویر کاملا تاریک می شود و در مقادیر بالاتر از ۱۰۰ درصد مقدار کنتراست افزایش می یابد.

filter: contrast(150%);
-webkit-filter: contrast(150%);
-moz-filter: contrast(150%);
-o-filter: contrast(150%);
-ms-filter: contrast(150%);

اینورت کردن تصویر با استفاده از CSS3

این فیلتر از ۰ تا ۱۰۰ درصد تغییر می کند

filter: invert(100%);
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: invert(100%);

تغییر رنگ تصویر به خاکستری با استفاده از CSS3

filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);

قدیمی کردن تصویر ( Sepia ) با استفاده از CSS3

به هر میزانی که تمایل دارید تصویر به رنگ قرمز و قهوه ای متمایل شود مقدار فیلتر سپیا را از ۰ تا ۱۰۰ درصد تغییر دهید.

filter: sepia(100%);
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
-o-filter: sepia(100%);
-ms-filter: sepia(100%);

اکثر این فیلتر ها در تمامی مرورگر ها قابل پشتیبانی هستند.
امیدوارم این آموزش براتون مفید بوده باشه
خوشحال می شم نظر خودتون رو بنویسید و برای ادامه راه به من انگیزه بدید.
موفق باشید.