سیاه و سفید کردن عکس با CSS

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

عکس:

عکس رنگی راجر واترز

کد html:

 <body>
 <img src='http://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Roger_Waters_18_May_2008_London_O2_Arena.jpg/370px-Roger_Waters_18_May_2008_London_O2_Arena.jpg'/>
</body> 

ممکنه شما عکس‌های دیگری اضافه کرده باشید و بخواهید فقط این عکس سیاه و سفید شود، برای اینکار به کد htmlمون یک کلاس اضافه میکنیم:

کد html:

<img src=http://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Roger_Waters_18_May_2008_London_O2_Arena.jpg/370px-Roger_Waters_18_May_2008_London_O2_Arena.jpg alt="Roger Waters full color" title="Roger Waters full color" style="float:left"><img src=http://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Roger_Waters_18_May_2008_London_O2_Arena.jpg/370px-Roger_Waters_18_May_2008_London_O2_Arena.jpg alt="Roger Waters desaturated with CSS" title="Roger Waters desaturated with CSS" class="desaturate">

در اینجا ما از دو عکس استفاده کردیم چون در کنار هم قرار گیرند و تفاوتشان معلوم شود.

در حال حاضر اگر شما این کد را در یک مرورگر به نمایش در بیاورید دو عکس رنگی از راجر واترز مشاهده میکنید! اما قرار بود ما عکس را سیاه و سفید کنیم و برای اینکار کد CSS زیر رو مینویسیم. توجه کنید که این کد در حال حاضر در هیچ مرورگری پشتیبانی نمیشود!

کد CSS:

img.desaturate { filter: grayscale(100%); }

در حال حاضر تمام مرورگر‌ها از کد مخصوص به خودشان برای پشتیبانی از فیلتر در CSS استفاده میکنند (امیدواریم که این مشکل حل بشه) و ما برای اینکه این مشکل در مرورگرهای وب‌کیت (کروم و سافاری) حل شود باید کد CSS رو به صورت زیر گسترش بدهیم:

img.desaturate { -webkit-filter: grayscale(100%);
filter: grayscale(100%);
}

اضافه کردن فیلتر SVG

کد CSS ما تا به اینحا فقط در نسخه ۱۸+ کروم کار میکند. برای اینکه همین نتیجه در فایرفاکس ۴+ هم بدست آوریم باید از یک فیلتر SVG استفاده کنیم که من به عنوان یک سند جدا درستش کردم و کد سند به شرح زیر است:

img.desaturate{
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
}

اگر کد SVG بالا یه خورده وحشتاک به نظر میرسه و محاسبات ماتریکسش براتون سخت هست بهتون توصیه میکنم که فعلا این کد رو در سند CSS تون کپی کنید تا در آموزش‌های بعدی براتون توضیح بدم.

پس از قرار دادن کد SVG در سند CSS، کد CSS به صورت زیر است:

img.desaturate{
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
}

کد HTML نهایی

<!DOCTYPE html>
 <html>
 <head>
 <link href="style.css" rel="stylesheet"/>
 </head>
 <body>
 <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Roger_Waters_18_May_2008_London_O2_Arena.jpg/370px-Roger_Waters_18_May_2008_London_O2_Arena.jpg" title="Roger Waters full color" style="float:left"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Roger_Waters_18_May_2008_London_O2_Arena.jpg/370px-Roger_Waters_18_May_2008_London_O2_Arena.jpg" title="Roger Waters with CSS" class="desaturate">
 </body>
 </html>

کد CSS نهایی

img.desaturate{
-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);
filter: gray; filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
}

See the Pen Convert Images To Black And White With CSS by IdeaWorld (@ideaworld) on CodePen.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *