CSS এবং ব্রাউজার লেআউট থেকে টুলগুলিকে ব্যবহার করা ওয়েব কন্টেন্টের জন্য অত্যাশ্চর্য ভিজ্যুয়ালাইজেশন সক্ষম করতে পারে। CSS ফিল্টার, WebGL, HTML5 ভিডিও, SVG, ক্যানভাস এবং CSS অঞ্চল, CSS শেপস এবং CSS কাস্টম ফিল্টারগুলির মতো বিকশিত ভবিষ্যত প্রযুক্তির মতো ওয়েব বৈশিষ্ট্যগুলি ব্যবহার করা একটি বিশাল প্রসারিত সৃজনশীল ল্যান্ডস্কেপের প্রতিশ্রুতি দেয়। Adobe-এর কন্টেন্ট স্রষ্টাদের সাথে কাজ করার দীর্ঘ ইতিহাস রয়েছে যারা লেআউট এবং ডিজাইন সম্পর্কে উত্সাহী, এবং তাই অনেক বিকশিত ওয়েব স্ট্যান্ডার্ডে অবদান রেখে এই জ্ঞানটি ওয়েবে প্রয়োগ করতে সক্রিয় রয়েছে।
ন্যাশনাল জিওগ্রাফিকের সাহায্যে, আমরা তাদের 'ফরেস্ট জায়ান্ট' শিরোনামের বৈশিষ্ট্য থেকে বিষয়বস্তু ব্যবহার করে একটি প্রোটোটাইপ তৈরি করেছি যাতে এই বৈশিষ্ট্যগুলি কীভাবে সমৃদ্ধ ওয়েব লেআউট এবং প্রতিক্রিয়াশীল কৌশলগুলিকে সক্ষম করতে পারে। এই নিবন্ধটি দেখাবে কিভাবে আমরা সাইটের কিছু বিশেষ আকর্ষণীয় বৈশিষ্ট্য তৈরি করেছি। একটি সংক্ষিপ্ত ওভারভিউয়ের জন্য নীচের এই ভিডিওটি দেখা মূল্যবান যেখানে ক্রিশ্চিয়ান ক্যানট্রেল আপনাকে সাইটের বিভিন্ন বৈশিষ্ট্যের মাধ্যমে নিয়ে যাচ্ছেন।
বিন্যাসের সূক্ষ্মতা
কি চমৎকার লেআউট গঠন করে এবং এর পিছনের বৈশিষ্ট্যগুলি সূক্ষ্ম হতে পারে, তাই আমরা একটি "সম্পাদকের ওভারলে" তৈরি করেছি যা আরও উল্লেখযোগ্য বৈশিষ্ট্যগুলিকে হাইলাইট করে৷ সম্পাদকের চিহ্ন সক্রিয় করতে, নিবন্ধের নীচের বারে ক্লিক করুন।
লেআউট স্বাধীন
আজ ওয়েবে, লেআউটটি প্রায়শই আমাদের বিষয়বস্তু দ্বারা নির্দেশিত হয় যাতে টেক্সট ফিট করার জন্য উল্লম্বভাবে বড় করা হয়। জটিল লেআউট তৈরি করার সময়, অনুলিপি বা অন্যান্য বিষয়বস্তুর পরিবর্তন সামগ্রিক বিন্যাসে একটি অবাঞ্ছিত প্রভাব ফেলতে পারে, যার ফলে অপ্রত্যাশিত পরিবর্তনের উপর ভিত্তি করে বিষয়বস্তু পুনরায় ডিজাইন করার প্রয়োজন হয়। অঞ্চলগুলির সাথে, আমরা আমাদের বিষয়বস্তু হিসাবে একটি উপাদানকে সংজ্ঞায়িত করে লেআউট থেকে আমাদের সামগ্রীকে সত্যিকার অর্থে আলাদা করতে পারি, এবং তারপর সেই লেআউটের অংশগুলি নির্দিষ্ট করে যা আমরা সেই সামগ্রীটি প্রবাহিত করতে চাই৷
'ফরেস্ট জায়ান্ট'-এর উদাহরণে আমাদের গল্পটি একটি একক উপাদানের মধ্যে রয়েছে। তারপর, পুরো পৃষ্ঠা জুড়ে, আমাদের লেআউট স্ক্যাফোল্ডিং আছে, ফটো এবং টেক্সট এলাকা নিয়ে গঠিত। CSS-এর সাহায্যে, আমরা কন্টেন্টের মাধ্যমে প্রবাহিত করতে চাই এমন উপাদানগুলিকে সংজ্ঞায়িত করি। যখন অনুলিপি একটি উপাদানের শেষে পৌঁছায়, তখন এটি DOM ক্রমানুসারে পরেরটিতে চলতে থাকে। এটি আমাদের কলামগুলির সাথে সত্যই সৃজনশীল হতে দেয়, সেগুলিকে অফসেট করে এবং নকশার উপর ভিত্তি করে তাদের উচ্চতা মানিয়ে নিতে, পাঠ্যটি উপাদানটির উচ্চতার সাথে মানানসই বা অতিক্রম করবে কিনা তা নিয়ে চিন্তা না করে৷ এটি আমাদের লেআউটের মধ্যে উপাদান থাকতে দেয়, যেমন পূর্ণ প্রস্থের চিত্র, যখন গল্পটি এটির মাধ্যমে প্রবাহিত হতে থাকে।
#storyContent {
flow-into: story;
}
.story {
flow-from: story;
}
উপরের CSS-এ, আমরা "গল্প" নামে একটি নামযুক্ত প্রবাহ তৈরি করছি। এই নামের প্রবাহের বিষয়বস্তু হল "storyContent" এর আইডি সহ উপাদান। এটি তারপর "গল্প" শ্রেণীর নাম সহ সমস্ত উপাদানের মধ্য দিয়ে প্রবাহিত হয়। CSS অঞ্চলগুলি প্রতিক্রিয়াশীল ডিজাইনের জন্য একটি দুর্দান্ত সরঞ্জাম যা ছোট স্ক্রিনে একক কলাম বিন্যাসের সাথে সামঞ্জস্য করার সময় বড় স্ক্রিনে সমৃদ্ধ লেআউটের জন্য মাল্টি-কলাম এবং অফসেট কলামের মতো বৈশিষ্ট্যগুলিকে অনুমতি দেয়৷ অঞ্চলগুলির সাথে আপনি vw বা vh এর মতো প্রতিক্রিয়াশীল ইউনিটগুলির সাথে আপনার অঞ্চলের আকারও সেট করতে পারেন। কলামগুলি আপনার লেআউটে ভিউপোর্টের উচ্চতা অতিক্রম না করে তা নিশ্চিত করতে ব্যবহার করা যেতে পারে, বিষয়বস্তু কেটে যাওয়ার বিষয়ে চিন্তা না করে, কারণ এটি স্বাভাবিকভাবেই অঞ্চল চেইনের পরবর্তী উপাদানে প্রবাহিত হবে।
ড্রপ ক্যাপস
CSS এক্সক্লুশন আমাদেরকে পাঠ্যকে চারপাশে বা অনিয়মিত আকারের মধ্যে মোড়ানোর অনুমতি দেয়। এটি ড্রপ ক্যাপের মতো ডিজাইনের উন্নতির জন্য উপযোগী হতে পারে। ড্রপ ক্যাপগুলি একটি সাধারণ নকশা অনুশীলন, যেখানে গল্প বা অধ্যায়ের প্রথম অক্ষরটি বড় করা হয়, যা বাকি পাঠ্যগুলি চরিত্রের কনট্যুরের চারপাশে মোড়ানোর অনুমতি দেয়। এই প্রভাবটি কীভাবে ইনলাইন বিষয়বস্তু ফ্লোটের চারপাশে মোড়ানো হয় তার অনুরূপ, তবে বর্জনের সাথে, আমরা আর আয়তক্ষেত্রাকার বাক্সে সীমাবদ্ধ নই। ফ্লোটে আকৃতি-বাইরে ব্যবহার করে, আমরা জ্যামিতিকে সংজ্ঞায়িত করতে পারি যা আমাদের বিষয়বস্তুকে আমাদের চরিত্রের আকৃতির চারপাশে শক্তভাবে মোড়ানোর অনুমতি দেয়।
.drop-caps {
height: 100px;
width: 100px;
float: left;
shape-outside: ellipse(50%, 50%, 50%, 50%);
}
এটি একটি উপবৃত্ত তৈরি করবে যা কন্টেন্টকে বৃত্তাকার আকৃতির চারপাশে মোড়ানোর অনুমতি দেবে। এছাড়াও, যেহেতু আমরা আকৃতির জন্য আপেক্ষিক একক ব্যবহার করছি, উপাদানটির আকার পরিবর্তন করা আকৃতির আকারে প্রতিফলিত হবে।
আকার
ড্রপ ক্যাপগুলির পাশাপাশি, বর্জনগুলি শেপ-ইনসাইড ব্যবহার করে আকারের মধ্যে পাঠ্য মোড়ানোর ক্ষমতা নিয়ে আসে। আমরা এই বৈশিষ্ট্যটি পুরো সাইটে ব্যবহার করি, বিশেষ করে বড় ছবির ক্যাপশনের সাথে, পাঠ্য ফ্রেম করার জন্য ফটোর নেতিবাচক স্থান ব্যবহার করে। এটি আমাদেরকে অন্যান্য ইমেজ এবং গ্রাফিক্সের অনুকরণীয় লেআউটগুলির কনট্যুর বরাবর পাঠ্য মোড়ানোর অনুমতি দেয় যা আগে ওয়েবে অর্জন করা খুব কঠিন ছিল।
আকৃতি আপনার আকৃতি নির্ধারণ করতে আপেক্ষিক ইউনিট ব্যবহার করে প্রতিক্রিয়াশীল লেআউটের সাথেও কাজ করতে পারে। এইভাবে আমরা কন্টেইনার বা ভিউপোর্টের উপর ভিত্তি করে প্রসারিত আকারগুলি তৈরি করতে পারি এবং এমনকি মিডিয়া কোয়েরিগুলিকে সম্পূর্ণরূপে পরিবর্তন করতে বা এটি সরাতে ব্যবহার করতে পারি কারণ এটি সমস্ত সিএসএস-এ সংজ্ঞায়িত করা হয়েছে। নিচে একটি বহুভুজ আকৃতির একটি উদাহরণ দেওয়া হল যা সাইটের মধ্যে পয়েন্টগুলিকে সংজ্ঞায়িত করার মানগুলির সাথে ব্যবহার করা হচ্ছে:
.shape {
shape-inside: polygon(0 50%, 50% 0, 100% 0, 100% 100%, 0 100%);
}
ভারসাম্যপূর্ণ পাঠ্য
ব্যালেন্সড টেক্সট হল এমন একটি বৈশিষ্ট্য যা একটি উপাদানের মধ্যে টেক্সটের পুরো ব্লকের দিকে তাকায় যখন লাইন মোড়ানোর সময়, শব্দে শব্দে মোড়ানো না করে। এটি এমন পরিস্থিতিতে এড়িয়ে যায় যেখানে একটি উপাদানের মধ্যে সমান আকারের লাইনগুলি অর্জনের জন্য পাঠ্যের লাইনগুলি ভেঙে আমাদের একক লাইনে এক বা দুটি শব্দ থাকে। নিয়ন্ত্রণের এই স্তরটি আমাদের সহজেই পাঠ্যের নান্দনিকভাবে আনন্দদায়ক ব্লক তৈরি করতে দেয়, বিশেষ করে পুল কোট বা সাবটাইটেলের মতো ছোট রানের জন্য।
এখানেই আমরা নিবন্ধের মধ্যে ব্যালেন্সড টেক্সট ব্যবহার করছি। যেহেতু এই বৈশিষ্ট্যটি একটি আদর্শ যা Adobe প্রস্তাব করছে, আমরা একই ফলাফল অর্জনের জন্য Randy Edmunds দ্বারা তৈরি একটি পলিফিল ব্যবহার করছি৷ এই বৈশিষ্ট্যটি প্রতিক্রিয়াশীল ক্ষেত্রে সবচেয়ে ভাল দেখা যায়। ব্রাউজারটির আকার পরিবর্তন করার সময়, আপনি লক্ষ্য করবেন যে ব্লকটি পাঠ্যের ভারসাম্য বজায় রাখে যার ফলে প্রায় একই প্রস্থের লাইন তৈরি হয়। ব্যালেন্সড টেক্সট পলিফিল ব্যবহার করা সহজ, কারণ এটি একটি jQuery প্লাগইন, লেআউট পরিবর্তিত হলে আমাদের শুধু 'balanceText()' প্রয়োগ করতে হবে এবং আমরা সুন্দরভাবে সুষম টেক্সট পাব, যা দেখতে এইরকম:
$('.balance').balanceText();
ফিল্টার ট্রানজিশন
ট্রানজিশন হল ব্যবহারকারীর দৃষ্টি আকর্ষণ করার এবং আপনার সাইটের অবস্থার সাথে যোগাযোগ করার একটি গুরুত্বপূর্ণ উপায়। অস্বচ্ছতার সাথে -- এবং আরও সম্প্রতি, 3D রূপান্তর -- আমরা দেখেছি যে ব্যবহারকারীরা আপনার সাইটের কিছু অংশের সাথে স্ক্রোল বা ইন্টারঅ্যাক্ট করার সময় এইগুলিকে সুন্দর রূপান্তর এবং অ্যানিমেশন তৈরি করতে ব্যবহার করা হচ্ছে৷ আমাদের কাছে এখন ফিল্টার রয়েছে যা একই উদ্দেশ্যে ব্যবহার করা যেতে পারে।
'ফরেস্ট জায়ান্ট'-এ, আমরা ফিল্টার ব্যবহার করি গ্রেস্কেল থেকে রঙে বিবর্ণ হওয়ার জন্য কিছু ছবি দেখায়। জটিল ইমেজিং প্রভাব এবং রূপান্তর তৈরি করতে এই ফিল্টারগুলি অস্বচ্ছতা বা অন্যান্য ফিল্টারের সাথে একত্রিত করা যেতে পারে। আমরা আরও বেশি নাটকীয় প্রভাব যুক্ত করতে কাস্টম ফিল্টারের শক্তি ব্যবহার করতে পারি।
কাস্টম ফিল্টারগুলি GLSL ব্যবহার করে লেখা হয়, WebGL এর মতো একই ছায়াময় ভাষা। তারা আপনাকে এই শেডারগুলিকে CSS এর মাধ্যমে DOM উপাদানগুলিতে প্রয়োগ করার অনুমতি দেয়, জটিল মিশ্রণ প্রভাব এবং 3D বিকৃতি সক্ষম করে৷ সাইটের নীচে, যখন আপনি 'প্রেসিডেন্ট ট্রি এক্সপ্লোর করুন'-এ ক্লিক করবেন, আপনি নীচের অন্য একটি বিভাগ প্রকাশ করতে পৃষ্ঠাটি কার্ল দেখতে পাবেন। কাস্টম ফিল্টারগুলি কীভাবে সামগ্রীর মধ্যে সমৃদ্ধ রূপান্তরকে অনুমতি দিতে পারে তার এটি একটি উদাহরণ। অ্যানিমেশন CSS ট্রানজিশন ব্যবহার করে অর্জন করা যেতে পারে। যাইহোক, আপনি যদি ট্রানজিশনের অনুমতি দেওয়ার চেয়ে আরও শক্তিশালী অ্যানিমেশন বা ইন্টারঅ্যাকশন ব্যবহার করতে চান তবে আপনি জাভাস্ক্রিপ্টের সাথে স্টাইল সেট করে আপনার শেডারে মানগুলি পাস করতে পারেন যেমনটি নীচে দেখা যাবে। এটি আপনাকে সহজ করার উপর আরও দানাদার নিয়ন্ত্রণের অনুমতি দিতে পারে বা এমনকি ব্যবহারকারীর ইনপুট পদ্ধতিগুলিকে শেডার ম্যানিপুলেট করার অনুমতি দেয়৷
function applyCurl(value) {
$("#map").css("webkitFilter",
"custom(url(page-curl.vs) mix(url(page-curl.fs) normal source-atop),"
+ " 50 50, transform perspective(1000) scale(1.0) rotateX(0deg) "
+ " rotateY(0deg) rotateZ(0deg), curlPosition "
+ value + " 0, curlDirection 104, curlRadius 0.2, bleedThrough 1.0)");
}
আমাদের ফিল্টার প্রভাব প্রয়োগ করার জন্য GPU-তে টেক্সচার হিসাবে বিষয়বস্তুকে রাস্টারাইজ করছে। এই কারণে, এটি শেষ হয়ে গেলে আমাদের এটিকে সরিয়ে ফেলার বিষয়ে নিশ্চিত হতে হবে, অন্যথায় আমাদের বিষয়বস্তু অস্পষ্ট দেখা যেতে পারে।
$("#map").css("webkitFilter", "none");
CSS কাস্টম ফিল্টারগুলি পৃষ্ঠা মোড়ানোর মতো আকর্ষণীয় প্রভাবগুলি সক্ষম করে যা একটি বাস্তব বইতে একটি পৃষ্ঠা উল্টানোর মতো দেখায়৷ তারা একটি ওয়েব ডেভেলপারকে GLSL নামক একটি ভাষায় জটিল প্রভাব প্রোগ্রাম করতে এবং ওয়েব সামগ্রীতে প্রয়োগ করতে সক্ষম করে। কাস্টম ফিল্টারগুলির বিশদ বিবরণ, সেই সমস্ত প্যারামিটার এবং কীভাবে সেগুলি ব্যবহার করতে হয় সে সম্পর্কে আরও তথ্যের জন্য, এই দুর্দান্ত টিউটোরিয়ালটি দেখুন।
WebGL-এ প্রি-রেন্ডার টেক্সচার
এই নিবন্ধের রত্নটি ছিল 'দ্য প্রেসিডেন্ট'-এর প্রথম সম্পূর্ণ চিত্র, যা আয়তনে বিশ্বের দ্বিতীয় বৃহত্তম গাছ বলে বিশ্বাস করা হয়। একটি সম্পূর্ণ ছবি তৈরি করতে গাছের শত শত ফটো ফটো-সেলাই করে এই ছবিটি তৈরি করা হয়েছে। আমরা এই প্রক্রিয়াটিকে অনুকরণ করতে চেয়েছিলাম ছবিটিকে ছোট ছোট ফটোগুলির একটি গুচ্ছে ভেঙে দিয়ে যা সম্পূর্ণ ছবি তৈরি করতে জায়গায় উড়ে যায়। WebGL ব্যবহার করে এটি অর্জন করা হয়েছে, বিশেষ করে Three.js লাইব্রেরির সাথে, যা WebGL এর চারপাশে একটি উচ্চ স্তরের API র্যাপার।
বৃহৎ সংখ্যক টেক্সচার রেন্ডার করার ফলে প্রতিবার নতুন টেক্সচার স্ক্রিনে আঁকার চেষ্টা করার সময় দ্রুত কার্যক্ষমতার সমস্যা হতে পারে, অতিরিক্ত নেটওয়ার্ক অনুরোধের কথা উল্লেখ না করে। এটি কমাতে, আমরা আমাদের টেক্সচারগুলিকে যতটা সম্ভব বড় করেছি এবং প্রতিটি টাইলের জন্য সেগুলি অফসেট করেছি। এই কৌশলটিকে প্রায়ই স্প্রাইট ম্যাপিং হিসাবে উল্লেখ করা হয় এবং এটি গেমের বিকাশে সাধারণ। এর ফলে পুরো গাছের জন্য তিনটি বড় টেক্সচার হয়েছে। পারফরম্যান্স হিট থেকে পরিত্রাণ পেতে প্রতিবার যখন একটি টেক্সচার প্রথম পর্দায় দৃশ্যমান হয়, আমরা অ্যানিমেশন শুরু হওয়ার আগে প্রতিটি টেক্সচারের সাথে 1px স্কোয়ার রেন্ডার করি, কর্মক্ষমতা হিটটিকে শুরুতে নিয়ে যাই। এটি আমাদেরকে উড়তে এবং গাছের সম্পূর্ণ উচ্চতাকে মসৃণভাবে অ্যানিমেট করতে দেয়, এমনকি একটি ট্যাবলেটেও।
টেক্সচার অফসেট করতে, আমরা জ্যামিতিতে টেক্সচার ম্যাপ করার জন্য UV-এর পরিবর্তন করছি। Three.js-এ এটি এইরকম দেখায়:
geometry.faceVertexUvs[0][0] = [
new THREE.Vector2(xOffset, yOffset + 1),
new THREE.Vector2(xOffset, yOffset),
new THREE.Vector2(xOffset + 1, yOffset),
new THREE.Vector2(xOffset + 1, yOffset + 1)
];
এখানে আপনি দেখতে পাচ্ছেন যে আমরা টেক্সচারের x এবং y অফসেটের জন্য একটি ভেরিয়েবল ব্যবহার করছি। একই প্রভাব একটি কাস্টম GLSL শেডার উপাদান দিয়ে অর্জন করা যেতে পারে যা জ্যামিতির উপর আঁকা স্থানাঙ্কগুলিকে অফসেট করে।
পরীক্ষামূলক বৈশিষ্ট্য
যেহেতু ডেমো ব্যবহার করে এমন কিছু বৈশিষ্ট্য এখনও পরীক্ষামূলক, নিবন্ধটি Chrome Canary- এ দেখতে হবে এবং এই ওয়েবসাইটে Chrome Canary-এর জন্য উল্লিখিত সমস্ত পতাকা সক্ষম করতে হবে।
একবার আপনার ক্রোম ক্যানারি ইনস্টল এবং সঠিকভাবে কনফিগার হয়ে গেলে, ডেমোটি দেখুন । (উল্লেখ্য যে পুরো প্রকল্পটি ওপেন সোর্স এবং GitHub-এ উপলব্ধ ।)
উপসংহার
আমরা ই-বুকের মতো আরও বেশি করে মোবাইল অ্যাপ্লিকেশন প্রসঙ্গে কীভাবে এই বৈশিষ্ট্যগুলি ব্যবহার করা যেতে পারে তাও আমরা অন্বেষণ করেছি। আপনি এই প্রোটোটাইপটি প্রগতিতে দেখতে পারেন এবং কীভাবে আমরা ট্যাবলেটে এই বৈশিষ্ট্যগুলি প্রদর্শন করতে বিভিন্ন মিথস্ক্রিয়া এবং স্পর্শ দৃষ্টান্ত ব্যবহার করছি।
ওয়েব ব্রাউজার লেআউট ক্রমাগত বিকশিত হওয়ার সাথে সাথে, আমরা উৎপাদন মূল্য এবং লেআউটের গুণমানকে চালিয়ে যাওয়ার আকাঙ্ক্ষা দেখতে পাচ্ছি যা আমরা অতীতে লিগ্যাসি পড়ার বিষয়বস্তুর সাথে অভ্যস্ত হয়েছি। CSS অঞ্চল, বর্জন, ব্যালেন্সড টেক্সট, কাস্টম ফিল্টার এবং WebGL-এর মতো বৈশিষ্ট্য সহ, সামগ্রী নির্মাতাদের আর নাগাল এবং ডিজাইনের গুণমানের মধ্যে বেছে নিতে হবে না। 'ফরেস্ট জায়ান্ট' একটি স্পষ্ট লক্ষণ যে ভবিষ্যতের ওয়েব উভয়কেই অনুমতি দেবে।