তত পরিমাণে সিএসএস এবং এইচটিএমএল আপনাকে আঁকতে এবং ডিজাইনের কাজ করতে দেয়, যদিও এগুলি কিছু অসুবিধা উপস্থাপন করে কারণ এগুলি এই নির্দিষ্ট উদ্দেশ্যে তৈরি ভাষা নয়। CSS হল একটি সংক্ষিপ্ত রূপ যা ইংরেজি, Cascading Style Sheets বা Cascading Style Sheets থেকে এসেছে এবং একটি ওয়েব পৃষ্ঠার কাঠামো এবং স্টাইল দেওয়ার জন্য HTML কোডে লেখা হয়।
পাড়া CSS দিয়ে আঁকা শিখুন এবং HTML কোডের মাধ্যমে, এই ভাষা কীভাবে কাজ করে, এর সীমাবদ্ধতা এবং পরিধি সম্পর্কে কিছু ধারণা থাকা গুরুত্বপূর্ণ। মজাদার কাজগুলো করলে CSS অনুশীলন করা অনেক বেশি উপভোগ্য হয়, এবং কোডিং ভাষা ব্যবহার করে ছবি আঁকা এবং আকর্ষণীয় আকার তৈরি করার চেয়ে মজাদার আর কিছু জিনিসই নেই।
CSS দিয়ে HTML এ কিভাবে আঁকবেন?
CSS ব্যবহার করে HTML-এ অঙ্কন অনুশীলন শুরু করতে, প্রথমেই একটি ছবি নির্বাচন করতে হবে যার প্রতিলিপি তৈরি করা হবে। সহজ জ্যামিতিক ধারণা থাকতে হবে। এইভাবে আপনি CSS এর মাধ্যমেও আপনার নকশাগুলিকে আকৃতি দিতে বৃত্ত এবং বর্গক্ষেত্র ব্যবহার করতে পারেন।
The এইচটিএমএল ট্যাগ তারা পুরো জাল জুড়ে বাক্সের একটি সেট তৈরি করে। এজন্যই আপনাকে একটি প্রধান ধারক দিয়ে শুরু করতে হবে এবং সেখান থেকে আপনার সৃষ্টিকে আলাদা করতে হবে। তুমি কী ডিজাইন করতে চাও? সবচেয়ে বিস্তৃত উদাহরণগুলির মধ্যে একটিতে, এটি বর্গক্ষেত্র এবং বৃত্ত ব্যবহার করে একটি সুন্দর এবং মজার ভালুক আঁকতে শেখায়। অন্তত শুরুতে, তারপর এটি আরও জটিল হয়ে ওঠে।
আপনি যদি যাচ্ছেন ভালুকের নকশাউদাহরণস্বরূপ, ৫০০ পিক্সেলের একটি বড় বর্গাকার বাক্স দিয়ে শুরু করুন এবং আকৃতির ভেতরে, আপনি অঙ্কনটি তৈরি করবেন। বক্সটি একটি HTML ট্যাগ ব্যবহার করে তৈরি করা হয়েছে যা div নামে পরিচিত।
অঙ্কনটি দেখা শুরু করুন, এবং বিশ্লেষণ করুন যে আপনার কতগুলি বাক্স তৈরি করতে হবে। কোন বাক্সগুলি কোন বাক্সের ভিতরে যায় তা বিবেচনা করাও গুরুত্বপূর্ণ। আঁকার পদ্ধতি বিবেচনা করার সময় এই প্রক্রিয়াটি কিছুটা অদ্ভুত মনে হতে পারে, তবে এটি আরও সুশৃঙ্খল এবং পরিষ্কারভাবে কাজ করার পথ তৈরি করতে সাহায্য করে। বাক্সের বিন্যাস সম্পূর্ণ হওয়া উচিত যাতে আপনার কতগুলি বাক্সের প্রয়োজন হতে পারে তার সম্পূর্ণ ধারণা থাকতে পারে।
CSS এবং HTML-এ অঙ্কনের জন্য আগে থেকেই রঙ নির্ধারণ করুন
সন্তোষজনক সিএসএস অঙ্কন ফলাফল অর্জনের জন্য সবচেয়ে গুরুত্বপূর্ণ পদক্ষেপগুলির মধ্যে একটি হল রঙ নির্বাচন করা। এই ভাষায়, রঙগুলিকে কোড দিয়ে চিহ্নিত করা হয়। অতএব, আপনাকে সেগুলি ইতিমধ্যেই নির্ধারণ করতে হবে এবং দ্রুত সঠিক কোড নির্বাচন করার জন্য সনাক্তকরণ ভেরিয়েবল ব্যবহার করতে হবে। এইভাবে আপনি আরও সহজেই প্রতিটি রঙ এবং কোন বাক্সে সেগুলি অবস্থিত তা ট্র্যাক করতে পারবেন।
HTML-এ CSS দিয়ে তৈরি এবং অঙ্কন শুরু করুন
সাথে চালিয়ে যাচ্ছি একটি ভালুকের অঙ্কনের উদাহরণ, আমরা প্রথম প্রধান পাত্রটি তৈরি করব। মূল চিত্র অনুসারে, এটি একটি বৃত্তাকার ধারক হতে হবে। আমরা এর আকার নির্ধারণের জন্য সীমানা-ব্যাসার্ধ 50% প্যারামিটারটি নির্বাচন করি। যদি আপনি চান যে ভালুকের মুখটি কেন্দ্রীভূত হোক, তাহলে উল্লম্ব এবং অনুভূমিক অক্ষগুলির জন্য ফ্লেক্স কমান্ড এবং কেন্দ্র সারিবদ্ধকরণ ব্যবহার করুন।
La মাথাটি একটি ডিম্বাকৃতির অংশ যেখানে সমস্ত উপাদান রাখা হবে। এই ডিভের ভেতরে আমরা সমস্ত উপাদানগুলিকে ক্লাস সহ রাখব যা স্পষ্টভাবে অংশগুলি বর্ণনা করে: চোখ, নাক, কান, মুখ। এই শ্রেণীর পার্থক্য প্রতিটি অংশে নির্দিষ্ট শৈলী নির্ধারণ করা সহজ করে তোলে।
কিছু উপাদান পুনরাবৃত্তি শৈলী, উদাহরণস্বরূপ চোখ এবং কান। তাই আপনাকে সুনির্দিষ্টভাবে বলতে হবে এবং নির্দেশ করতে হবে যে এটি বাম চোখ (চোখ-বাম) নাকি ডান চোখ (চোখ-ডান)। প্রতিটি উপাদানের সাথে এই পার্থক্য তৈরি করুন যা একটি শৈলীর পুনরাবৃত্তি করে। সিএসএস ভাষায়, উপাদানগুলিকে সঠিকভাবে অবস্থান এবং সনাক্ত করতে আপনাকে অবস্থান: আপেক্ষিক এবং অবস্থান: পরম পরামিতি ব্যবহার করতে হবে। আমরা CSS-এর প্রতিটি উপাদানের সাথে এই পতাকাগুলি ব্যবহার করতে পারি, যাতে স্ক্রিনের অবস্থান সর্বদা সঠিক এবং সুনির্দিষ্ট হয়। দূরত্বগুলি সঠিক হওয়ার জন্য আমাদের উভয় পরামিতির জন্য একই দূরত্ব পরিমাপ ব্যবহার করতে হবে।
CSS এবং HTML দিয়ে অঙ্কন করা সহজ নয়।
অনেক ওয়েব ডিজাইনাররা CSS দিয়ে আঁকার ক্ষমতা ব্যবহার করে পৃষ্ঠাটিকে একটি শৈল্পিক ক্যানভাসে পরিণত করার উপায় হিসেবে। কিন্তু সত্য হল প্রস্তাবটি বেশ জটিল এবং ফলাফলগুলি সর্বোত্তম থেকে অনেক দূরে। নির্দিষ্ট পরিস্থিতিতে এটি একটি বিকল্প হতে পারে, তবে এর জন্য উন্নত স্তরের জ্ঞানের প্রয়োজন হয় এবং শেষ পর্যন্ত এটি অবাস্তব হয়ে ওঠে।
উদাহরণস্বরূপ, শুধু একটি বর্গক্ষেত্র তৈরি করুন। যেখানে অঙ্কনের জন্য ডিজাইন করা প্রোগ্রাম এবং ভাষা আপনাকে কয়েক সেকেন্ডের মধ্যে চিত্র তৈরি করতে দেয়। সিএসএস-এ আপনাকে ভাষা থেকে প্রতিটি প্যারামিটার তৈরি করতে হবে। সুতরাং, আপনাকে স্টাইল সেট করতে হবে, আকৃতি দিতে হবে, প্রস্থ এবং দৈর্ঘ্য, গভীরতা এবং রঙ তৈরি করতে হবে। এই সবই শব্দ এবং পরামিতিগুলির মাধ্যমে, যা নিখুঁত না হলেও, আপনার পৃষ্ঠায় একটি ভুল ফলাফল তৈরি করবে।
কিন্তু সমালোচনা এবং অসুবিধা সত্ত্বেও, এমন কিছু লোক আছেন যারা তারা তাদের ওয়েব পৃষ্ঠাগুলিতে কিছু গ্রাফিক্স তৈরি করার জন্য এটি বেছে নেয়. তবে আপনার কিছু ভিন্ন CSS বৈশিষ্ট্য এবং ফাংশন জানা প্রয়োজন, তাই দুর্দান্ত শিল্পকর্ম তৈরি করতে কিছুটা শেখার জন্য প্রস্তুত থাকুন।
HTML-এ CSS দিয়ে কেন আঁকবেন?
এর পেছনের আসল উদ্দেশ্য সিএসএস অঙ্কন চ্যালেঞ্জ চেষ্টা চালিয়ে যাওয়ার পিছনে কারণ হতে পারে। যদিও এই ধরণের ভাষা অঙ্কনকে সহজতর করার উদ্দেশ্যে নয়, তবুও এর ক্ষমতা রয়েছে এবং এটি কার্যকর। সিএসএস সম্পর্কে খুব জ্ঞানী হ্যাকার এবং প্রোগ্রামাররা প্রায়শই এই পদ্ধতিটি ব্যবহার করে শিল্পকর্ম আঁকতে এবং তৈরি করতে পছন্দ করেন কারণ এটির চ্যালেঞ্জ রয়েছে।
ইন্টারনেটে, আপনি CSS ব্যবহার করে তৈরি করা সব ধরণের অঙ্কন গ্যালারি খুঁজে পাবেন। আপনি যদি এই ধাপগুলি আবার চেষ্টা করে দেখতে চান, অথবা যদি আপনি কেবল মজা করতে এবং সেগুলি সম্পর্কে জানতে চান, তাহলে আপনি এই নিবন্ধটি এবং ফোরাম এবং সোশ্যাল মিডিয়া স্পেসগুলিতে অন্যান্য পরামর্শগুলি দেখতে পারেন।
সিএসএস ব্যবহার করে অঙ্কন করার সময় প্রধান বিবেচ্য বিষয়গুলি হল:
- আপনার কোনও বিধিনিষেধ নেই, কারণ কোড ব্যবহার করে অঙ্কনের কোনও নিয়ম নেই।
- যতটা সম্ভব কম কোড ব্যবহার করে আপনার অঙ্কন তৈরি করার চেষ্টা করুন। এইভাবে, আপনি আপনার ওয়েবসাইটের জন্য সর্বোত্তম ফলাফল পাবেন।
- তোমার অঙ্কনটি কেবল একটি ডিভের মধ্যে রাখার চেষ্টা করো।
- আরও জটিলতার দিকে এগিয়ে যেতে, কোনও div না রেখে কেবল একটি বডি রাখার চেষ্টা করুন।