ওয়েবকিটে সিএসএস ফিল্টার ইফেক্ট ল্যান্ডিং, ওয়েবকিটে সিএসএস ফিল্টার ইফেক্ট ল্যান্ডিং, ওয়েবকিটে সিএসএস ফিল্টার ইফেক্ট ল্যান্ডিং

পটভূমি

ফিল্টার প্রভাব কিছুক্ষণের জন্য আছে কিন্তু SVG-তে কাজ করার জন্য ডিজাইন করা হয়েছে। এগুলি নথিতে সংমিশ্রিত এবং রেন্ডার হওয়ার আগে রঙের তীব্রতা, ঝাঁকুনি বা একটি চিত্রকে ঝাপসা করার মতো প্রভাব প্রয়োগে দুর্দান্তভাবে শক্তিশালী।

ঠিক আছে, 2009 সালে মোজিলা বলেছিল SVG যথেষ্ট নয়! তারা ফিল্টারগুলিকে আরও এক ধাপ এগিয়ে নিয়ে যায় এবং Firefox 3.5-এ HTML সামগ্রীতে তাদের অনুমতি দেয় । পল আইরিশের SVG ফিল্টারের নিরন্তর ডেমো <video> তে দেখুন। আবার, শুধুমাত্র ফায়ারফক্সে কাজ করে কিন্তু তবুও মৌমাছি হাঁটু গেড়ে বসে।

আজ

2011 সালের শেষের দিকে ফ্ল্যাশ ফরোয়ার্ড এবং Adobe (আরও অন্যান্য) এই আশ্চর্যজনক প্রযুক্তিটি CSS-এ নিয়ে আসার জন্য কঠোর পরিশ্রম করেছে। বিশেষ করে, আমি CSS ফিল্টার ইফেক্টস 1.0 উল্লেখ করছি, যা ওয়েবকিট প্রয়োগ করতে শুরু করেছে।

CSS-এ সরাসরি ফিল্টার সক্রিয় করার অর্থ হল প্রায় যেকোনো DOM উপাদান তাদের সুবিধা নিতে পারে! ছবি, <video> , <canvas> , আপনি এটির নাম দিন।

CSS ফিল্টার প্রভাব ডেমো.

ভবিষ্যৎ

স্পেকটি CSS শেডারকেও সংজ্ঞায়িত করে, যা শেষ পর্যন্ত CSS-এ OpenGL shader প্রযুক্তি নিয়ে আসবে। এটা খুব খুব উত্তেজনাপূর্ণ! যাইহোক, যে কোন সময় আপনি একটি সিস্টেমের GPU খুললে নিরাপত্তার বিষয়গুলি রয়েছে৷ এই কারণে, WebKit-এ আপাতত শুধুমাত্র CSS ফিল্টার ফাংশন প্রয়োগ করা হয়েছে।

সমর্থন

Chrome 18.0.976.0 (বর্তমানে ক্যানারি), ওয়েবকিট রাতের জন্য

ওয়েবকিট নাইটলিসে, ফিল্টারগুলি হার্ডওয়্যার ত্বরিত সামগ্রীতে প্রয়োগ করা যেতে পারে ( যেমন img { -webkit-transform: translateZ(0); } )। ক্রোমে, ত্বরিত বিষয়বস্তুর ফিল্টারগুলি এখনও কাজ চলছে ( --enable-accelerated-filters পতাকা ব্যবহার করুন)। এর মধ্যে রয়েছে <video> , যা ডিফল্টরূপে ত্বরান্বিত হয়।