ایجاد افکت و فیلتر در تصاویر تنها با استفاده از CSS3 - خدمات وردپرس وب نما | خدمات وردپرس وب نما

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

بازگشت

به جایی که از آن میآیید
Want create site? Find Free WordPress Themes and plugins.

back-1024x682

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

blur

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

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

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

CSS3

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

CSS3

blur

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

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

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

CSS3

CSS3

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

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

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

blur

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

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

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

blur

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

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

blur

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

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

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

Did you find apk for android? You can find new Free Android Games and apps.

با عضویت در کانال تلگرامی وب نما از آخرین مطالب آموزشی محصولات اطلاعیه ها . تخفیف ها و ... مطلع شوید

همین حالا عضو میشم

ما در اینستاگرام ...

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

  1. mohamadi گفت:

    bahal va bedard bokhor bod

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *