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

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 از مقدار 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

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

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

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

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

blur

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

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

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

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

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

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

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

منبع : webnma.ir

خشایار توکلی

وب نما با هدف ایجاد یک مرجع کامل در زمینه آموزش وردپرس ، افزونه وردپرس و قالب وردپرس از سال 1394 پا به عرصه وب گذاشت. ما در وب نما سعی می کنیم همواره به نیاز های شما کاربران عزیز در زمینه وردپرس فارسی پاسخ دهیم.قصد داریم به شما کمک کنیم تا سایتی پر قدرت راه اندازی کنید و تبدیل به مشتری همیشگی ما شوید.

1 دیدگاه

تماس با ما

جهت تماس با مدیر وب سایت با شماره 09307957745 در تماس باشید یا به این ایمیل webnma.com@gmail.com پیام دهید