- ۰ تومان
- هیچ محصولی در سبد خرید نیست.
با سلام خدمت شما دوستان عزیز
با اولین آموزش از سری آموزش های CSS3 در خدمتتون هستم. انشالله که مفید باشه. خیلی خوشحال میشم نظرات خودتون رو برام بنویسید تا در آموزش های بعدی ازشون بهره بگیرم.
در این آموزش کوتاه قصد داریم بخشی از این افکت ها رو با استفاده از 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);
filter: blur(5px); -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px);
مقدار روشنایی تصویر با استفاده از فیلتر 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);
این افکت با فیلتر saturate() قابل اعمال است و درصد هم قبول میکند.
filter: saturate(50%); -webkit-filter: saturate(50%); -moz-filter: saturate(50%); -o-filter: saturate(50%); -ms-filter: saturate(50%);
این افکت با درصد تغییر می کند، به طوری که مقدار ۱۰۰ درصد تصویر به طور پیش فرض بوده و در مقدار ۰ تصویر کاملا تاریک می شود و در مقادیر بالاتر از ۱۰۰ درصد مقدار کنتراست افزایش می یابد.
filter: contrast(150%); -webkit-filter: contrast(150%); -moz-filter: contrast(150%); -o-filter: contrast(150%); -ms-filter: contrast(150%);
این فیلتر از ۰ تا ۱۰۰ درصد تغییر می کند
filter: invert(100%); -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%);
filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); -ms-filter: grayscale(100%);
به هر میزانی که تمایل دارید تصویر به رنگ قرمز و قهوه ای متمایل شود مقدار فیلتر سپیا را از ۰ تا ۱۰۰ درصد تغییر دهید.
filter: sepia(100%); -webkit-filter: sepia(100%); -moz-filter: sepia(100%); -o-filter: sepia(100%); -ms-filter: sepia(100%);
اکثر این فیلتر ها در تمامی مرورگر ها قابل پشتیبانی هستند.
امیدوارم این آموزش براتون مفید بوده باشه
خوشحال می شم نظر خودتون رو بنویسید و برای ادامه راه به من انگیزه بدید.
موفق باشید.
این پست یک دیدگاه دارد.
bahal va bedard bokhor bod