آموزش طراحی وب

فیلتر گذاری های زیبا برای تصاویر

در css3 این امکان رو شما دارید که بتونید روی تصاویرتون فیلتر های رنگی ایجاد کنید اما همه ی مرورگرها این خصوصیت رو پشتیبانی نمیکنند…

img

فیلتر گذاری برای تصاویر

سلام خدمت همراهان همیشگی ماهنامه طراحی وبو مدرسه مجازی ایرانیان

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

یه تکنیک خیلی ساده رو بهتون معرفی میکنم تا بتونید فیلترهای رنگی زیبایی رو روی تصاویرتون ایجاد کنید تا زیبایی بیشتری به صفحه ی وبتون بدید. از این فیلترها میتونید در حالت hover هم استفاده کنید. به نظرم خیلی میتونه شیک باشه.

خوب اول از همه نمونه ای که درست کردم و میخوام بهتون آموزش بدم رو دانلود کنید و ببینید .

ما این تکنیک رو با دو روش پیاده می کنیم :

  • فیلتر گذاری تصاویر در پس زمینه
  • فیلتر گذاری بر روی تصاویر در حالت Hover

فیلتر گذاری تصاویر در پس زمینه

ابتدا روش اول یعنی فیلترگذاری تصاویر در پس زمینه رو آموزش میدم. خوب پوشه ی background-filter رو باز کنید. در این پوشه شما دو folder و یک فایل index.html میبینید. کدهای مربوط به html رو در index.html قرار میدیم و کدهای مربوط به css رو در پوشه ی asset/css و در فایل style.css قرار میدیم.

اگر دموی پروژه رو دیده باشید، میبینید که تصاویر پس زمینه هر کدوم یک فیلتر رنگی دارند.

21

حالا چطور این فیلترهارو پیاده کنیم؟ خیلی سادست، بیاین قدم به قدم باهم پیش بریم.

اول از همه کد html این قسمت رو ایجاد می کنیم:

۴ تا باکس ایجاد کردیم که قراره برای هر کدوم از این باکس ها یک پس زمینه و یک فیلتر تعریف کنیم. بین همه ی این باکس ها یک سری استایل مشترکه، پس یه کلاس بنام module به همه ی این باکس ها میدیم و استایل زیر رو برای اون در نظر میگیرم:

تمامی خصوصیات مشخص و واضحه پس توضیحی نمیدم، فقط میمونه Background-size که ممکنه براتون آشنا نباشه، از این خصوصیت استفاده کردیم و این مقدار رو بهش دادیم که تصویری که برای پس زمینه در نظر گرفتیم تو هر ابعادی که بود به اندازه ی سایز این باکس دربیاد.

یعنی اگر عرض تصویر ۴۰۰ پیکسل هست و عرض باکس ما ۲۰۰ پیکسل هست، تمامی تصویر با عرض ۲۰۰ پیکسل نمایش داده بشه و چیزی از تصویر برش نخوره. یا به عبارتی تصویر خودش رو با سایز باکس ما سازگار میکنه و وفق میده . برای اطلاعات بیشتر درباره خصوصیت Background-size میتونید این مقاله رو مطالعه کنید.

خوب حالا باید برای هر باکس یه تصویر پس زمینه + فیلتر رنگی تعریف کنیم. برای این کار به هر باکس یه کلاس متفاوت میدیم:

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

به ترتیب برای هر باکس کلاسی رو با نام رنگی که قراره بهشون بدیم در نظر گرفتیم. حالا برای کلاس red استایل زیر رو تعریف میکنیم:

همونطور که ملاحظه می کنید از خصیصه ی background-image استفاده کردیم و با ترکیب مقادیر linear-gradient و url تصویر، به باکسمون هم پس زمینه ی تصویری اختصاص دادیم هم یه فیلتر رنگی : )

برای دریافت رنگ مورد نظرتون با فرمت RGBA میتونید از سایت http://hex2rgba.devoth.com استفاده کنید. کد hex رنگ مورد نظرتون رو بهش میدید و اون هم کد rgba اون رو بهتون میده.

خوب حالا به ترتیب برای همه ی باکس هامون این استایل رو تعریف می کنیم:

اینطوری شد که تونستیم برای پس زمینه هامون فیلتر رنگی تعریف کنیم. خیلی ساده بود نه؟

فیلتر گذاری بر روی تصاویر در حالت Hover

حالا میریم از روش دوم استفاده کنیم، در روش قبلی تصاویر ما به عنوان پس زمینه تعریف شده بودند، اما ممکنه بخوایم به تصاویرمون بصورت مستقیم فیلتر رنگی بدیم. خوب بریم که این کار رو انجام بدیم. پوشه ی image-filter رو باز کنید.

در این پوشه هم فایل index.html و فولدر assetرو میبینید. در این روش هم دو حالت تعریف می کنیم:

  • فیلتر رنگی ساده
  • فیلتر رنگی Gradient دار

برای این روش ما برای باکس هامون سه المان در نظر میگیریم. لایه اصلی یا مادر + تصویر + لایه ی فیلتردار

اصلا میخوایم چیکار کنیم؟ یه لایه به عنوان لایه ی اصلی یا مادر قرار میدیم که تصویر و لایه ی فیلتردار هم تو این لایه قرار میگیرند؛ تصویر ما زیر لایه ی فیلتردار رنگی قرار میگیره و شما با قرار دادن موس روی لایه ی مادر، لایه ی فیلتر دار رو پنهان می کنید و تصویر رو با رنگ بندی اصلیش نمایان میکنید. اگر دمورو مشاهده کنید کاملا متوجه منظورم میشید.

خوب پس برای هر دو حالت یک باکس قرار میدیم (یه باکس برای فیلتر رنگی ساده و یه باکس برای فیلتر رنگی Gradient دار) .

ابتدا کد html این دو باکس رو پیاده می کنیم:

باکس اول برای حالت اول :

 

خوب بهتره برای استایل دهی به این دو باکس براشون کلاس در نظر بگیریم. چون هر دو باکس استایل مشترک دارند پس یه کلاس به هر دو میدیم:

حالا به کلاس Box استایل زیر رو میدیم:

تمامی خصوصیات مشخص و واضحه، فقط دلیل نوشتن position:relative رو خدمتتون میگم.

قرار بر این شد که یه باکس مادر و اصلی داشته باشیم و دو عنصر تصویر و فیلتر در این باکس قرار بگیرند، حالا ما میخوام با خصیصه ی position:absolute دو عنصر تصویر و فیلتر رو روی هم قرار بدیم پس باید به عنصر والد و اصلی position:relative بدیم.

برای اطلاعات بیشتر راجع به position ها میتونید این مقاله رو مطالعه کنید.

حالا به تصاویرمون استایل میدیم:

همونطور که گفتم قراره به تصاویر و فیلترها position:absolute بدیم. حالا برای اینکه تصویر زیر فیلتر قرار بگیره با z-index اینکار و انجام میدیم. هرچی z-index کمتر باشه زیر لایه ای قرار میگیره که z-index بیشتری داشته باشه.

خوب حالا میخواستیم دو حالت رو پیاده کنیم، پس برای باکس اول به لایه ی فیلتر کلاس layer رو میدیم و به لایه ی فیلتر باکس دوم کلاس layer-gradient رو میدیم. چون استایل مجزا دارند باید کلاس مجزا هم داشته باشن.

حالا برای کلاس layer استایل زیر رو در نظر میگیریم:

مقدار z-index رو بیشتر از تصویر قرار دادیم تا لایه ی فیلتر رنگی روی تصویر قرار بگیره، با خصیصه ی background یه رنگ پس زمینه به لایه دادیم و با مقدار ۰.۴ شفافیت لایه رو کم کردیم تا تصویرمون از زیر فیلتر نمایان باشه. اینطوری انگار تصویرتون رنگیه : ) با transition هم که افکت به لایه ی فیلتر میدیم.

 

برای لایه ی فیلتر باکس دوم هم استایل زیر رو در نظر میگیریم:

همه چیز شبیه به فیلتر باکس اوله فقط چون قراره پس زمینه این فیلتر گرادیانت دار باشه از linear-gradient استفاده کردیم.

برای دریافت کد گرادیانت های دلخواهتون میتونید ترکیب رنگیتون رو مشخص کنید و کد rgba اون رو دربیارید و با ” , ” کنار هم قرار بدید.

خوب حالا میخوایم بگیم وقتی موس روی باکس ها میره فیلتر ها پنهان بشن و تصاویر بطور کامل نمایان بشن:

در این استایل ها گفتیم زمانی که عمل hover روی باکس ها صورت گرفت کلاس های layer و layer-gradientرو پنهان کن که این کار رو با opacity انجام دادیم. زمانی که مقدار این خصیصه صفر باشه عنصر شما کاملا پنهان میشه.

 

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

اگر این مقاله براتون مفید بوده عدد ۳۰۰ و اگر مفید نبود عدد ۳۰۳ رو به شماره ۳۰۰۰۱۲۲۰۳۳ ارسال کنید.

موفق و پاینده باشید

منتشر شده در ماهنامه طراحی وب و تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۲

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین