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

با سلام خدمت شما دوستان عزیز
با اولین آموزش از سری آموزش های 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

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

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

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

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

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

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

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

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

این فیلتر از 0 تا 100 درصد تغییر می کند

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

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

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

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

به زودی در این مکان تب زیبا برای لینک های دانلود قرار میگیرد

دانلود افزونه با لینک مستقیم

منبع : webnma.ir