شاید این موقعیت برای ما بوجود بیاید که نیاز داشته باشیم در یک لحظه صفحه وب سایت را در حالت سیاه و سفید یا همان خاکستری ببینیم. شاید در نگاه اول این کار بسیار سخت باشد چرا که باید تمام رنگ متن ها، پس زمینه ها و خیلی موارد را تغییر دهیم، تازه تصاویر را باید چکار کنیم!؟
خوشبختانه این روزها سی اس اس روزهای بسیار خوبی را سپری میکند و مرورگرها ویژگی های مختلف آن را بسرعت پیاده سازی می کنند و طراحان وب به راحتی به آنها دسترسی دارند. از جمله این ویژگی ها، فیلترها در CSS هستند که ما بوسیله یکی از این فیلترها به هدفمان که سیاه و سفید کردن صفحه است خواهیم رسید.
برای سیاه و سفید کردن یک عنصر کافی است از تابع grayscale با مقدار 1 استفاده کنیم. حال چون ما میخواهیم این فیلتر به کل صفحه اعمال شود این کار را برای عنصر <body> انجام می دهیم.
body {
filter: grayscale(1);
}
همچنین می توان این کار را از طریق جاوااسکریپت و کنسول مرورگر انجام داد. به این صورت که در کنسول خط زیر را می نویسیم و نتیجه دقیقا همان خواهد بود:
document.body.style.filter = 'grayscale(1)'
فیلترها بسیار قدرت مند هستند و انجام بعضی کارها را برای ما بسیار راحت می کنند. به عنوان مثال در بعضی روزها وقتی قرار است لوگوی سایت را از حالت رنگی خارج کنیم و به حالت خاکستری تبدیل کنیم کافی است تا به لوگو ویژگی فیلتر را اعمال کنیم به این صورت دیگر نیاز نیست تقریبا ده مقدار رنگی را تغییر دهیم و این سرعت و نگهداری کار را بهبود می بخشد.
ممنون آقا مجتبی عزیز. من به دوستان پیشنهاد میکنم از این ویژگی در رابطه با Hover Effect تصاویر استفاده کنند . تاثیر بسیار زیبایی داره.
مرسی آقا احسان عزیز آره فقط مراقب هزینه ها و performance باشن و حتما آزمایش کنند.
سلام آقای سیدی خسته نباشین
من از یک سال پیش سایت شما رو میشناسم و تقریبا یکی از منبع های css من همین سایت شما هستش.
سوالی داشتم خدمتتون
میخواستم بدونم که با css تنها امکان ساخت یک اسلایدر وجود داره؟منظورم بدون کمک جاوا اسکریپت هستش
اگر وجود داره امکانش هست منبعی معرفی کنین و یا خودتون زحمت بکشین مطلبی در این مورد قرار بدین؟
سوال دیگه ای که داشتم این بود که آیا بنده میتونم ایمیلی از شما داشته باشم ؟
سلام. بله این امکان وجود داره ولی توصیه نمیشه این کار.
ولی اگر میخواین جهت فان ببینید چطوری ساخته میشه کافیه توی سایت codepen.io عباراتی مثل pure css slider، pure css slideshow، only css slider رو جستجو کنید. موارد زیادی هستش.
از ایمیل سایت که توی فوتر هستش استفاده کنید.
سلام استاد برای تسلط بیشتر روی مطالب css چی کار کنیم ؟؟؟ خیلی ممنون
تمرین کنید. دموهای مختلف بسازید.
بعد از یادگیری html و css بریم جاوا اسکریپت یا php ??? خیلی ممنون به خاطر آموزش های فوق العاده تون و پاسخگویی به سوالا
js
کد خوب بود
مدیر عزیز بنده توصیه میکنم برای سایت خود یک SSL بخرید یا به صورت رایگان فعال کنید.
با این روش سایت شما معروف تر میشود
با تشکر محمد براتی