فیلتر رنگی در CSS

آخرین به‌روزرسانی: ۲۷ تیر ۱۴۰۴

همونطور که می‌دونید یکی از پراپرتی‌های خوب css همین filter هست که اگر بهش مسلط باشید، امکانات جالبی رو در اختیارتون می‌ذاره. خصوصاً اگر بحث کار با تصاویر و حالت hover باشه، می‌تونید افکت‌های جذابی برای تصاویر سایت‌تون ایجاد کنید. یکی از محدودیت‌های filter اینه که شما فیلترهای مشخصی در اختیار دارید و نمی‌تونید با یه فیلتر واحد، مثلاً رنگ تصویر رو تغییر بدید. امروز که دنبال این قضیه بودم به یه سایتی برخورد کردم که به نظرم می‌تونه برای همه طراحان وب مفید باشه.

با استفاده از ابزار css-color-filter-generator، می‌تونید رنگ مدنظر رو انتخاب کنید تا بهتون فیلتر ترکیبی مربوط به اون رنگ رو بده. مثلاً برای کد رنگ #6a2c70 به من این فیلتر رو داد:

filter: brightness(0) saturate(100%) invert(20%) sepia(28%) saturate(2904%) hue-rotate(263deg) brightness(93%) contrast(90%);

برچسب‌ها: -

مشاوره رایگان

علاقمند به یادگیری طراحی سایت یا دنبال مشاوره در این زمینه هستی؟