کتابخانه های و ابزارهای فیلتر تصویری سی اس اس (CSS Image Filter Libraries & Tools)

فیلترهای تصویری CSS روشی ساده و سبک برای اضافه کردن برخی از تصاویر منحصر به فرد به تصاویر سایتتان است. افکت هایی که زمانی تنها قلمرو ویرایشگرهای تصویر مانند Photoshop بود، اکنون از طریق CSS قابل دستیابی است. در این مقاله برخی از کتابخانه ها وابزارهای تصویری سی اس اس را خدمت شما عزیزان معرفی می کنیم.

نویسنده سید علی اندرزگو

کتابخانه های و ابزارهای فیلتر تصویری سی اس اس (CSS Image Filter Libraries & Tools)

فیلترهای تصویری CSS روشی ساده و سبک برای اضافه کردن برخی از تصاویر منحصر به فرد به تصاویر سایتتان است. افکت هایی که زمانی تنها قلمرو ویرایشگرهای تصویر مانند Photoshop بود، اکنون از طریق CSS قابل دستیابی است. در این مقاله برخی از کتابخانه ها وابزارهای تصویری سی اس اس را خدمت شما عزیزان معرفی می کنیم.

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

کتابخانه های فیلتر تصویری سی اس اس

۱ . CSSGram By Una Kravets

CSSGram فیلترهای محبوب اینستاگرام را در وب ایجاد می کند. می توانید به سادگی کتابخانه را در سایت خود بارگذاری کرده و از نام های کلاس ویژه از طریق CSS یا SASS استفاده کنید.

۲ . colofilter.css By Lucas Bonomi

برخی از جلوه های رنگارنگ DuoTone را با colofilter.css به سایت خود اضافه کنید. این جلوه ها زیبا هستند اما هنوز با مرورگرهای مایکروسافت سازگار نیستند.

۳ . CSSCO By Lauren Waller

CSSCO کتابخانه ای از فیلترهای جذاب عکاسی است که شما به راحتی می توانید آن را به سایتتان اضافه کنید. مرورگرهای ام اس و سافاری تا حدودی از ان پشتیبانی می کنند.

ژنراتورهای مبتنی بر وب

۱ . cssFilters.co By Indrashish Ghosh

cssFilters.co به شما امکان بارگذاری تصاویر را می دهد، فیلترهای مختلف و کد CSS خروجی را با استفاده از یک رابط زیبا نمایش می دهد.

۲ . Filter Blend By Ilya Shubin

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

۳ . CSSReflex Filter Effects By Naeem Noor

CSSReflex Filter Effects به شما این امکان را می دهد تا فقط آنچه را که فیلتر CSS می تواند انجام دهد مشاهده کنید. می توانید از اسلایدرهای تحت هر اثر استفاده کرده و نتایج را مشاهده کنید.

۴ . CSS Filter By Jordano Aragão

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

فیلترهای تصویر CSS و jQuery

۱ . tiltShift.js By Noel Tock

tiltShift.js با استفاده از فیلترهای jQuery و CSS 3 اثر تغییر انحراف عمومی را تقلید می کند.

۲ . Philter By Liudas Dzisevicius

Philter از صفات HTML برای فعال کردن فیلترهای CSS، از جمله hover effects استفاده می کند.

۳ . Image Editor with CSS Filters and jQuery By SitePoint

الحاق در یک پیوند تصویر و فیلتر کردن با Image Editor with CSS Filters and jQuery.

ابزارهای اضافی

۱ . Postcss Instagram By Azat S.

به معنای استفاده با PostCSS ،Postcss Instagram افزونه ای است که فیلترهای اینستاگرام مانند را به تصاویر اضافه می کند.

۲ . SassyFilters By Pascal Duez

با استفاده از SASS ،SassyFilters مجموعه ای از CSS-SVG filters قابل تنظیم بر روی مرورگر است.

۳ . CSS Filters DevTools Extension توسط Jaume Sanchez

اگر از Chrome DevTools استفاده می کنید، CSS Filters DevTools Extension نوار کناری را به پنل عناصر اضافه می کند که به شما امکان می دهد فیلترها را به راحتی ویرایش کنید.

نتیجه گیری

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

منبع

۱۰ فیلم رایگان برای یادگیری طراحی در فتوشاپ
طراحی سایت مقالات

۱۰ فیلم رایگان برای یادگیری طراحی در فتوشاپ

نویسنده سید علی اندرزگو

پاسخی بگذارید

ایمیل شما منتشر نشده و نزد ما محفوظ است.