اطلاعات مطلب

نویسنده : Mehrdad Mohammadi
تاریخ ارسال : 19 ژوئن 2015 در 1:38 ب.ظ
تعداد دیدگاه : بدون ديدگاه
دسته بندی
آمار بازدید
  • 847
  • 3,398
  • 565,174
  • 670
  • 89
  • 186
  • 73
  • 0
  • ژانویه 21, 2017
چه کسی آنلاین هست ؟

هیچ کسدر حال حاضر آنلاین نیست

دکووب را دنبال کنید

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

فیلتر گذاری برای تصاویرReviewed by مهرداد محمدی on Jun 19Rating:
[تعداد: 0    میانگین: 0/5]

img

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

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

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

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

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

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

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

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

21

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

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

<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>

 

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

module {
margin: 10px;
width: 200px;
height: 150px;
background-size: cover;
}

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

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

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

<div class="module red"></div>
<div class="module yellow"></div>
<div class="module blue"></div>
<div class="module green"></div>

 

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

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

.red {
 
background-image:
 
   linear-gradient(
 
     rgba(255, 0, 0, 0.5),
 
     rgba(255, 0, 0, 0.5)
 
   ),
 
   url(../../images/img.jpg);
 
}

 

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

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

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

.red {

background-image:

   linear-gradient(

     rgba(255, 0, 0, 0.5),

     rgba(255, 0, 0, 0.5)

   ),

   url(../../images/img.jpg);

}

.yellow {

background-image:

   linear-gradient(

     rgba(255, 215, 15, 0.5),

     rgba(255, 215, 15, 0.5)

   ),

   url(../../images/img.jpg);

}

.blue {

background-image:

   linear-gradient(

     rgba(0, 15, 200, 0.5),

     rgba(0, 15, 200, 0.5)

   ),

   url(../../images/img.jpg);

}

.green {

background-image:

   linear-gradient(

     rgba(0, 215, 15, 0.5),

    rgba(0, 215, 15, 0.5)

   ),

   url(../../images/img.jpg);

}

 

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

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

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

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

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

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

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

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

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

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

<div>
 
            <img src="images/img.jpg">
 
            <div></div>
 
</div>
 
باکس دوم برای حالت دوم :
 
<div>
 
            <img src="images/img.jpg">
 
            <div></div>
 
</div>

 

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

<div class="Box">
 
            <img src="images/img.jpg">
 
            <div></div>
 
</div>
 
<div class="Box">
 
            <img src="images/img.jpg">
 
            <div></div>
 
</div>

 

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

.Box{
 
            width:200px;
 
            height:150px;
 
            position:relative;
 
            margin-bottom:20px;
 
}

 

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

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

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

img{
 
            width:200px;
 
            height:150px;
 
            position:absolute;
 
            z-index:10
 
}

 

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

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

<div class="Box">
 
            <img src="images/img.jpg">
 
            <div class="layer"></div>
 
</div>
 
<div class="Box">
 
            <img src="images/img.jpg">
 
            <div class="layer-gradient"></div>
 
</div>

 

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

.layer{
 
            width:200px;
 
            height:150px;
 
            position:absolute;
 
            z-index:100;
 
            background: rgba(245, 253, 3, 0.4);
 
            -webkit-transition : all 0.2s linear 0s;
 
            -moz-transition : all 0.2s linear 0s;
 
            transition : all 0.2s linear 0s;
 
}

 

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

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

.layer-gradient{
 
            width:200px;
 
            height:150px;
 
            position:absolute;
 
            z-index:100;
 
            background-image: linear-gradient(rgba(0, 142, 244, 0.5), rgba(16, 235, 0, 0.5));
 
            -webkit-transition : all 0.2s linear 0s;
 
            -moz-transition : all 0.2s linear 0s;
 
            transition : all 0.2s linear 0s;
 
}

 

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

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

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

.Box:hover .layer{
 
            opacity:0
 
}
 
.Box:hover .layer-gradient{
 
            opacity:0
 
}

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

نظر خود را به اشتراک بگذارید