آموزش سیاه و سفید کردن تصاویر با CSS

سلامی دوباره خدمت کاربران یک لرن ، این بار با آموزش سیاه و سفید کردن تصاویر با CSS ، که بدون شک مورد توجه علاقه مندان به طراحی حرفه ای صفحات وب می باشد ، در خدمت شما هستیم .

در ادام مطلب همراه شما هستیم …

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

امروز و در این پست قصد داریم تنها با CSS و به کار گیری یک فیلتر یک تصویر را سیاه و سفید کنیم و در هنگام هاور ( رفتن موس روی شی مورد نظر که در اینجا تصویر است ) به حالت رنگی آن برگردانیم ( یا بر عکس ) و عملا به جای استفاده از دو تصویر ، یک تصویر استفاده کنیم .

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

پیش نمایش

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

<img class="pic" src="http://dl.1learn.ir/authors/pictures/wp.jpg">

در این قسمت ما کلاس pic را به تگ img خود دادیم و از یک تصویر دلخواه نیز استفاده کردیم.

حالا استایل نویسی خود را برای حالت عادی تصویر شروع میکنیم و میخواهیم در حالت پیش فرض ( حالتی که موس روی آن نرفته ) تصویر را سیاه و سفید کنیم .

img.pic{
    filter: grayscale(100%); /* اعمال فیلتر خاکستری*/
    -webkit-filter: grayscale(100%); /* webkit برای مرورگر های */
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><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>#grayscale"); /* برای سازگاری با فایرفاکس در ویندوز و اندروید */
}

در خط دوم از فیلتر grayscale ( یعنی میزان خاکستری بودن ) استفاده میکنیم و ابتدا به آن درصد 100 را میدهیم یعنی در حالت عادی تصویر سیاه و سفید باشد .
در خط سوم نیز برای مرورگرهای webkit ( مانند گوگل کروم ) پیشوند لازم را اضافه میکنیم.
در خط چهارم نیز برای تطبیق این استایل با فایرفاکس از SVG استفاده می کنیم .
در مجموع تا اینجا فیلتر را اضافه کرده ایم و با مرورگر های مختلف آن را سازگار کرده ایم .

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

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

img.pic:hover{
     filter: grayscale(0%);
     -webkit-filter: grayscale(0%);
     filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

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

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

اما حالا قصد داریم یک استایل transition نیز برای زیبایی کار اضافه کنیم . تفاوتی ندارد که این استایل را در کدام حالت به کار ببرید ما در قسمت اول این کد ، استایل transition را وارد میکنیم تا هنگام رفتن موس روی تصویر 0.6 ثانیه طول بکشد تا تصویر رنگی شود و بلافاصله پس از هاور این اتفاق نیفتد که بدون شک جلوه خوبی را به تصویر ما میدهید .

-webkit-transition: all .6s ease; /* برای مرورگر کروم و سافاری */

شما میتوانید به قسمت دوم کد نیز transition را اضافه کنید .
این هم یک نمونه کد کامل :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1learn.ir</title>
<style>
    img.pic{
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%); 
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'>        <filter id=\'grayscale\'><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>#grayscale");
        -webkit-transition: all .6s ease;
        }

    img.pic:hover{
        filter: grayscale(0%);
        -webkit-filter: grayscale(0%);
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'>        <filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0        1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
        }
</style>

</head>
<body>
<img class="pic" src="http://dl.1learn.ir/authors/pictures/wp.jpg">
</body>
</html>

warning از این روش برای اعمال استایل برای یک تصویر خاص استفاده کردیم اگر میخواهید برای تمام تصاویر وبتان از این استایل استفاده کنید باید کلاس خاصی را در نظر نگیرید و استایل مربوطه را به تگ img اختصاص دهید تا تمام تصاویر وبتان این استایل را در بر گیرد .

warning کد های ارائه شده در این آموزش با نسخه های قدیمی مرورگر اینترنت اکسپلورر سازگار نمیباشد ، با مرورگر فایرفاکس سازگاری نسبی و با مروگر کروم کاملا سازگار میباشد.

امیدواریم از این آموزش نیز لذت برده باشید . منتظر آموزش های کوتاه و کاربردی بعدی باشید .

فرادرس

برچسب ها : ، ، ،