آموزش سیاه سفید کردن عکس رنگی با Css3 – اسکریپت دات کام https://www.xn--mgbguh09aqiwi.com اسکریپت دات کام Wed, 05 Nov 2014 20:01:46 +0000 fa-IR hourly 1 https://wordpress.org/?v=5.6.14 آموزش سیاه سفید کردن عکس رنگی با Css3 https://www.xn--mgbguh09aqiwi.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b3%db%8c%d8%a7%d9%87-%d8%b3%d9%81%db%8c%d8%af-%da%a9%d8%b1%d8%af%d9%86-%d8%b9%da%a9%d8%b3-%d8%a8%d8%a7-css3.html https://www.xn--mgbguh09aqiwi.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b3%db%8c%d8%a7%d9%87-%d8%b3%d9%81%db%8c%d8%af-%da%a9%d8%b1%d8%af%d9%86-%d8%b9%da%a9%d8%b3-%d8%a8%d8%a7-css3.html#comments Thu, 09 Jan 2014 12:38:30 +0000 http://xn--mgbguh09aqiwi.com/?p=921 از این پس قصد دارم بنا به درخواست کاربران عزیز مبنی بر آموزش ها و ترفند های آموزشی طراحی وب , این بخش رو به سایت اضافه کنم تا بتونم بخش کوچکی از محبت های شما عزیزان رو جبران کرده باشم .

امروز قصد دارم یک ترفند از کدنویسی 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″]

با تشکر , امیدوارم مورد پسند شما عزیزان قرار گرفته باشد .

وحید مجیدی – اسکریپت دات کام

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

]]> https://www.xn--mgbguh09aqiwi.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b3%db%8c%d8%a7%d9%87-%d8%b3%d9%81%db%8c%d8%af-%da%a9%d8%b1%d8%af%d9%86-%d8%b9%da%a9%d8%b3-%d8%a8%d8%a7-css3.html/feed 9