آموزش سیاه سفید کردن عکس رنگی با Css3
از این پس قصد دارم بنا به درخواست کاربران عزیز مبنی بر آموزش ها و ترفند های آموزشی طراحی وب , این بخش رو به سایت اضافه کنم تا بتونم بخش کوچکی از محبت های شما عزیزان رو جبران کرده باشم .
امروز قصد دارم یک ترفند از کدنویسی Css3 رو بهتون آموزش بدم تا بتونید به راحتی عکس های رنگی رو تبدیل به عکس های سیاه سفید بکنید و به همین وسیله افکت های بسیار جذابی رو خلق کنید .
برای این کار شما نیاز به یک تکه کد Css3 و یک تگ عکس دارید …
ابتدا در قسمت html و در داخل تگ <body> باید با استفاده از تگ <img> یک عکس رو در بخشی دلخواه از سایت خودتون درج کنید.
<img src="test.jpg" class="vahid"/>
همین طور که میبینید , من کلاسی هم به نام وحید ( به صورت دلخواه ) به این تگ دادم . به زبان ساده, دادان یک کلاس به یک تگ به این معنی میباشد که ما اسمی رو برای این تگ انتخاب میکنیم تا بعدا در داخل کدنویسی Css صداش بزنیم تا باهم هماهنگ بشن .
حال نوبت نوشتن کد Css می باشد . ما به 3 شیوه و در 3 مکان میتونیم کد Css رو بنویسم که من اینجا از روش داخلی استفاده میکنم .
برای انتخاب روش داخلی , شما باید در داخل فایل html , در بین دو تگ <head> و <head/> , دو تگی به نام <style> و <style/> بنویسید.
ما تمامی دستورات Css رو باید داخل این دو تگ استایل بنویسیم .
حال میریم سراغ نوشتن کد Css :
قبلا برای تگ img اسمی به نام vahid انتخاب کردیم . حال نوبت این هست که اینجا همون اسم رو صدا بزنیم و کدهای مربوط به سیاه سفید کردن رو بنویسیم
img.vahid{
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");
filter: gray;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
نکته : این کد ها برای ورژن های کروم , سافاری , فایرفاکس بالاتر از 10 و اکسپلورر 6 تا 9 میباشد . ( تقریبا همه مرورگرها )
نمونه فایل به صورت آماده :
[sdm-download id=”932″ fancy=”0″]
با تشکر , امیدوارم مورد پسند شما عزیزان قرار گرفته باشد .
وحید مجیدی – اسکریپت دات کام
ضمنا شما عزیزان میتونید با درج کامنت زیر همین پست , درخواست آموزشی خودتون رو در ضمینه های طراحی وب بیان کنید تا در صورت درخواست بالا , آموزش مورد نظر در سایت قرار گیرد .
خیلی دنبال این آموزش گشتم
متشکرم داداش
اگه کدی رو که برای حامد ارسال کردی برای منم بفرستی خیلی ممنون میشم
یه دونه باشی همیشه باشی:)
ممنون داداش گلم . ایمیل بزن و موضوع رو بگو تا برات بفرستم
وحید جان من که ادامه مطلبش رو ندیدم
برای ادامه مطلبش باید عضو بشم
اگه آموزش رو لطف کنی و برام میلش کنی ممنون میشم.
با سپاس فراروان از سایت بسیار جالب و پر محتوات
خیر دوست عزیز , یه مشکل کوچک داشت که حل شد …
ممنون
سلام
آموزش جالب و جدیدی بود،خیلی ممنون.
ممنون عزیز…. دمت گرم… 1 دونه باشی
سلام وحید جان اگر امکان داره کدی که عکس ها پیش فرض سیاه سفید هستند و وقتی ماوس میره روش رنگی میشه رو هم بزار واسمون. مرسی
آقا حامد گل , کدی رو که میخوای ایمیل شد بهت
با تشکر