فیلترهای کاربردی عکس در CSS

در طراحی با CSS فیلترهای جذابی وجود دارند که می‌توانید جهت ایجاد افکت خاص روی تصاویر از آنها استفاده کنید . همواره در CSS شما می‌توانید اکثر فرآیندهای طراحی را به وسیله کد انجام دهید و نیازی به کار روی تصاویر بصورت مجزا در برنامه‌هایی همچون فتوشاپ و … نیست . در این مقاله چند فیلتر جذاب از CSS را خدمتتان معرفی خواهیم کرد تا در طراحی قالب‌های خود از این پس کمی متفاوت عمل کنید .

تعداد فیلترهای CSS چندان زیاد نیست اما برخی از همین فیلترها وجه بسیار جذابی در قالب شما ایجاد خواهند کرد . فیلترهای سی اس اس در نسخه سوم ، که اکثرا تاثیر مستقیم بروی وضعیت رنگ تصویر دارند و به شکل زیر نامگذاری شده‌اند :

blur(1px)
brightness(0.5)
contrast(0.5)
drop-shadow(2px 4px 6px black)
grayscale(1)
hue-rotate(45deg)
invert(1)
opacity(0.5)
saturate(0.5)
sepia(1)

توجه داشته باشید که این دستورات به نوعی تابع هستند که مقداری را در قالب اعداد که معمولا بین 0 و 1 است (بجر فیلتر blur ) دریافت کرده و متناسب با آن ، بروی تصویر ، خروجی خاصی را اعمال می‌کنند . یکی از فیلترهای مناسب در بخش طراحی فیلتر blur است .

فیلتر blur با CSS

برای هر فیلتر یک نمونه مثال در ادامه هربخش خدمتتان ارائه شده است تا دقیقا با عملکرد هر فیلتر آشنا شوید . تصویر اصلی که قصد داریم فیلترهای مختلف را روی آن تست کنیم بصورت زیر است :

اما اکنون قصد داریم تا روی این تصویر دستور زیر را اعمال کنیم :

.img_class {
	filter:blur(3px);
}

اکنون به خروجی دقت کنید :

مشاهده می‌کنید که با اعمال یک عدد با واحد px یا همان پیکسل ، میزان شفافیت عکس به سمت blur بیشتر خواهد شد .

فیلتر brightness

این فیلتر درکل برای روشنایی تصویر است اما نباید آن را با فیلتر opacity اشتباه بگیرید . در این فیلتر تنها روشنایی عکس تحت تاثیر قرار خواهد گرفت . دستور به شکل زیر است :

.img_class {
	filter: brightness(0.5);
}

اکنون خروجی این دستور بصورت زیر نمایان می‌شود :

مشاهده می ‌کنید که روشنایی کلی عکس به نصف رسیده است .

فیلتر contrast

یکی دیگر از فیلترهای سی اس اس ، فیلتر contrast است . در این فیلتر شما بروی ویژگی کنتراست کار خواهید کرد . اگر درمورد فیلتر contrast اطلاعاتی ندارید می‌توانید یا یک مثال عملی این ویژگی را بررسی کنید . از تنظیمات منوی نمایشگر خودتان و مانیتوری که با آن کار می‌کنید ، ویژگی contrast را کم و زیاد کنید ( البته حتما یک صفحه وب سایت را که متشکل از رنگ‌های سفید و طوسی است را نیز باز کنید .

با کم و زیاد شدن contrast مشاهده خواهید کرد که وضوح رنگ‌ها در حال کاهش است و رنگ‌های طوسی به مرور در رنگ سفید ترکیب شده و سایر رنگ‌ها نیز به یکدیگر نزدیک می‌شوند . این ویژگی برای طراحان گرافیک بسیار مهم است .اکنون به دستور زیر دقت کنید :

.img_class { 
	filter: contrast(0.8); 
}

خروجی تصویر ما با این فیلتر بصورت زیر خواهد بود :

همانطور که مشاهده می‌کنید ترکیب رنگ این تصویر با مقدار 0.8 در contrast بصورت بالا دچار تغییر می‌شود .

فیلتر drop-shadow

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

.img_class { 
	filter: drop-shadow(2px 4px 6px black); 
}

اکنون به تصویر زیر دقت کنید :

همانطور که مشاهده می‌کنید در حاشیه تصویر یک سایه ایجاد شده است که می‌توانید با هر مقدار دلخواه آن را تغییر دهید .

فیلتر grayscale یکی از پرطرفدارترین فیلترها

این فیلتر یکی از کاربردی‌ترین فیلترها در CSS است . به کمک این فیلتر شما قادر هستید تا تصاویر رنگی خود را سیاه و سفید کنید . دستور به شکل زیر است :

.img_class { 
	filter: grayscale(1); 
}

اکنون به خروجی دقت کنید :

این فیلتر بسیار کارایی زیادی داشته و در سایت‌های عکاسی و طراحی با افکت hover و برعکس کردن فیلتر بسیار وجه جذابی ایجاد می‌کند . هر اندازه که عدد داخل تابع grayscale به سمت 0 نزدیکتر شود ، میزان سیاه و سفید بودن تصویر نیز کمتر می‌شود و عدد 1 مقدار نهایی آن است .

فیلتر invert

یکی دیگر از فیلترهایی که ممکن است در طراحی شما و البته برای تصاویر خاص مسبب نمایشی جذاب شود ، فیلتر invert است . این فیلتر به نوعی رنگ‌های شما را در وضعیت معکوسی قرار می‌دهد . به نمونه کد زیر دقت کنید :

.img_class { 
	filter: invert(1); 
}

اکنون به تصویری که این فیلتر روی آن اعمال شده است توجه کنید :

همانطور که مشاهده می‌کنید در این مثال رنگ تصویر به شکل کاملا متفاوتی در حال نمایش است .

فیلتر opacity با CSS

یکی دیگر از فیلترهای جذاب در CSS فیلتر opacity است . این فیلتر از جهت شفافیت عکس شما تاثیرگذار خواهد بود و شما با کاهش میزان opacity به سمت عدد صفر قادر خواهید بود تا پشت عکس خود را نیز مشاهده کنید . اگر تصویر شما بروی المان خاصی قرار گرفته است می‌توانید با کاهش میزان opacity ، المان‌های پشت عکس را نیز مشاهده کنید . دستور بصورت زیر است :

.img_class { 
	filter: opacity(0.5); 
}

اکنون به خروحی این دستور دقت کنید :

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

فیلتر sepia

فیلتر sepia نیز یکی دیگر از فیلترهای جذاب برای تصویر است که البته بسته به محل استفاده از آن می‌تواند نمای کار طراحی را تا حد زیادی متفاوت کند .  دستور این فیلتر بصورت زیر است :

.img_class { 
	filter: sepia(1); 
}

اکنون به تصویر زیر توجه کنید :

این فیلتر نیز عملکردی متفاوت را بروی نمایش عکس و طیف رنگ آن دارد و می‌توانید بصورت هوشمندانه از آن استفاده کنید . این چندین مورد ازجمله اصلی‌ترین فیلترهایی هستند که استفاده از آنها در پروژه‌های طراحی سایت توسط شما محتمل است اما مجدد تاکید می‌کنیم که باید باتوجه به محل استفاده تصویر ، از فیلترهای موردنیاز استفاده کنید . امیدواریم این مقاله کوتاه و کاربردی برای شما مفید بوده باشد . موفق باشید دوستان من .