অনেক লোক পাঠ্য সামঞ্জস্য করতে, ফন্ট, রঙ, আকার এবং আরো পরিবর্তন করতে সিএসএস ব্যবহার করে। কিন্তু এক জিনিস যা অনেক লোক প্রায়ই ভুলে যায় তা হল যে আপনি CSS এর সাথে ছবিগুলি ব্যবহার করতে পারেন।
ইমেজ পরিবর্তন নিজেই
সিএসএস পেজে ইমেজ প্রদর্শন কিভাবে আপনি সামঞ্জস্য করতে পারবেন। এই আপনার পেজ সামঞ্জস্যপূর্ণ রাখার জন্য সত্যিই দরকারী হতে পারে। সমস্ত ছবিতে শৈলী নির্ধারণ করে, আপনি আপনার ছবির জন্য একটি আদর্শ চেহারা তৈরি। কিছু জিনিস আপনি করতে পারেন:
- ছবির চারপাশে একটি সীমানা বা সীমারেখা যোগ করুন
- লিঙ্ক ইমেজ কাছাকাছি রঙ্গিন সীমানা সরান
- ইমেজ প্রস্থ এবং / বা উচ্চতা সামঞ্জস্য
- একটি ড্রপ ছায়া যোগ করুন
- ছবি ঘোরান
- ইমেজ hovered যখন শৈলী পরিবর্তন করুন
আপনার ছবি একটি সীমানা প্রদান শুরু করার জন্য একটি মহান জায়গা। তবে আপনাকে সীমান্তের চেয়ে বেশি বিবেচনা করা উচিত - আপনার চিত্রের সমগ্র প্রান্ত সম্পর্কে চিন্তা করুন এবং মার্জিন এবং প্যাডিংটিও সামঞ্জস্য করুন। একটি পাতলা কালো সীমানা সহ একটি চিত্র সুন্দর দেখাচ্ছে, তবে সীমানা এবং চিত্রের মধ্যে কিছু প্যাডিং যোগ করা আরও ভাল লাগতে পারে।
img { সীমানা: 1px কঠিন কালো; প্যাডিং: 5px;}
যখন সম্ভব হয় তখন অ-সজ্জাসংক্রান্ত চিত্রগুলি সর্বদা লিঙ্ক করা একটি ভাল ধারণা। কিন্তু যখন আপনি করবেন, মনে রাখবেন বেশিরভাগ ব্রাউজার চিত্রের চারপাশে একটি রঙ্গিন সীমানা যুক্ত করে। সীমানা পরিবর্তন করার জন্য উপরের কোডটি ব্যবহার করলেও, লিঙ্কটি সীমাহীনভাবে সরাতে বা পরিবর্তন না করা পর্যন্ত এটি ওভাররাইড করবে। এটি করার জন্য আপনাকে লিঙ্কযুক্ত চিত্রগুলির সীমানা অপসারণ বা পরিবর্তন করতে একটি CSS শিশু নিয়ম ব্যবহার করতে হবে:
img> একটি { সীমানা: কেউ নেই;}
আপনি আপনার ছবির উচ্চতা এবং প্রস্থ পরিবর্তন বা সেট করতে CSS ব্যবহার করতে পারেন। ডাউনলোডের গতির কারণে ইমেজ মাপগুলি সামঞ্জস্য করতে ব্রাউজারটি ব্যবহার করার জন্য এটি দুর্দান্ত ধারণা না হলেও, তারা চিত্রগুলি আকারে আরও ভাল করে তুলছে যাতে তারা এখনও ভাল দেখাচ্ছে। এবং সিএসএস দিয়ে আপনি আপনার ছবিগুলিকে একটি আদর্শ প্রস্থ বা উচ্চতা হিসাবে সেট করতে পারেন বা এমনকি ধারকটিকে আপেক্ষিক রাখার জন্য সেটিকে সেট করতে পারেন।
মনে রাখবেন, যখন আপনি ছবিগুলির আকার পরিবর্তন করেন, সেরা ফলাফলের জন্য, আপনাকে কেবলমাত্র একটি মাত্রা - উচ্চতা বা প্রস্থের আকার পরিবর্তন করতে হবে। এই ইমেজ তার দৃষ্টিপাত অনুপাত রাখে যে enusre হবে, এবং তাই অদ্ভুত লাগছে না। অন্যান্য মান সেট করুন স্বয়ংক্রিয় বা দৃষ্টিপাত অনুপাত সামঞ্জস্য রাখা ব্রাউজার বলতে এটি ছেড়ে।
img { প্রস্থ: 50%; উচ্চতা: স্বয়ংক্রিয়;}
CSS3 নতুন বৈশিষ্ট্যগুলির সাথে এই সমস্যার সমাধান প্রদান করে অবজেক্ট হইয়া এবং অবজেক্ট অবস্থান। এই বৈশিষ্ট্যগুলির সাথে আপনি সঠিক চিত্রের উচ্চতা এবং প্রস্থ এবং কীভাবে অনুপাত অনুপাতটি পরিচালনা করা উচিত তা নির্ধারণ করতে সক্ষম হবেন। এটি আপনার চিত্রগুলির চারপাশে লেটারবক্সিং প্রভাব তৈরি করতে পারে বা প্রয়োজনীয় মাপে চিত্রটি পেতে ফসল কাটাতে পারে।
যখন CSS3 অবজেক্ট হইয়া এবং অবজেক্ট অবস্থান বৈশিষ্ট্যগুলি এখনও ব্যাপকভাবে সমর্থিত নয়, অন্যান্য CSS3 বৈশিষ্ট্য রয়েছে যা বেশিরভাগ আধুনিক ব্রাউজারগুলিতে সমর্থিত যা আপনি আপনার ছবিগুলি সংশোধন করতে ব্যবহার করতে পারেন। ড্রপ ছায়া, গোলাকার কোণ, এবং রূপান্তরগুলি, আপনার ছবিগুলিকে ঘোরাতে, স্কু, বা সরানোর মতো জিনিসগুলি এখন বেশিরভাগ আধুনিক ব্রাউজারে কাজ করে। আপনি সিএসএস সংক্রমণগুলি ব্যবহার করতে পারেন যখন ছবিগুলি পরিবর্তন করা হয়, বা ক্লিক করা হয়, বা কিছু সময়ের পরে।
ব্যাকগ্রাউন্ড হিসাবে ইমেজ ব্যবহার করে
সিএসএস আপনার ইমেজ সঙ্গে অভিনব ব্যাকগ্রাউন্ড তৈরি করা সহজ করে তোলে। আপনি পুরো পৃষ্ঠায় বা শুধুমাত্র একটি নির্দিষ্ট উপাদান ব্যাকগ্রাউন্ড যোগ করতে পারেন। পৃষ্ঠায় একটি ব্যাকগ্রাউন্ড ইমেজ তৈরি করা সহজ পটভূমি চিত্র সম্পত্তি:
শরীর { ব্যাকগ্রাউন্ড-ইমেজ: ইউআরএল (background.jpg);}
পরিবর্তন শরীর পৃষ্ঠায় একটি নির্দিষ্ট উপাদান নির্বাচনী শুধুমাত্র একটি উপাদান ব্যাকগ্রাউন্ড করা।
আপনি ছবিগুলির সাথে অন্য একটি মজার জিনিস তৈরি করতে পারেন এমন একটি ব্যাকগ্রাউন্ড চিত্র তৈরি করুন যা বাকি পৃষ্ঠার সাথে স্ক্রল করে না - যেমন ওয়াটারমার্ক। আপনি শুধু শৈলী ব্যবহার করুন ব্যাকগ্রাউন্ড-সংযুক্তি: সংশোধন করা হয়েছে; আপনার পটভূমি ইমেজ বরাবর। আপনার পটভূমির জন্য অন্যান্য বিকল্পগুলি ব্যবহার করে শুধু অনুভূমিকভাবে বা উল্লম্বভাবে টাইল তৈরি করে পটভূমি পুনরাবৃত্তি সম্পত্তি। লেখা ব্যাকগ্রাউন্ড-পুনরাবৃত্তি: পুনরাবৃত্তি-এক্স; অনুভূমিকভাবে এবং ছবি টালি করতে ব্যাকগ্রাউন্ড-পুনরাবৃত্তি: পুনরাবৃত্তি-Y; উল্লম্বভাবে টালি করতে। এবং আপনি আপনার ব্যাকগ্রাউন্ড ইমেজ সঙ্গে অবস্থান করতে পারেন পটভূমি অবস্থানে রয়েছে এমন সম্পত্তি।
এবং CSS3 আপনার ব্যাকগ্রাউন্ডগুলির জন্য আরও শৈলী যোগ করে। আপনি কোনও আকারের পটভূমিতে মাপসই করতে আপনার চিত্রগুলি প্রসারিত করতে পারেন বা পটভূমির চিত্রটিকে উইন্ডো আকারের আকারে সেট করতে পারেন। আপনি অবস্থান পরিবর্তন এবং তারপর ব্যাকগ্রাউন্ড ইমেজ ক্লিপ করতে পারেন। কিন্তু CSS3 সম্পর্কে সেরা জিনিসগুলির একটি হল যে আপনি এখন আরো জটিল প্রভাব তৈরি করতে একাধিক ব্যাকগ্রাউন্ড চিত্রগুলি স্তর করতে পারেন।
HTML5 স্টাইল ইমেজ সাহায্য করে
দ্য চিত্র HTML5 এ উপাদানটি যেকোনো চিত্রের চারপাশে স্থাপন করা উচিত যা নথির মধ্যে একা থাকতে পারে। এটি সম্পর্কে চিন্তা করার একটি উপায় যদি চিত্রটি একটি পরিশিষ্টের মধ্যে উপস্থিত হতে পারে তবে এটি ভিতরে থাকা উচিত চিত্র উপাদান। তারপর আপনি যে উপাদান এবং ব্যবহার করতে পারেন FIGCAPTION উপাদান আপনার ইমেজ শৈলী যোগ করুন।
