এইচআর ট্যাগগুলি সহ ওয়েব পেজগুলিতে আকর্ষণীয় আকর্ষণীয় লাইন তৈরি করা
আপনার ওয়েবসাইটগুলিতে অনুভূমিক, বিভাজক-শৈলী লাইন যোগ করার প্রয়োজন হলে আপনার কয়েকটি বিকল্প রয়েছে। আপনি আপনার পৃষ্ঠায় সেইগুলিগুলির প্রকৃত চিত্র ফাইলগুলি যুক্ত করতে পারেন, তবে এটি আপনার ব্রাউজারটি পুনরুদ্ধার ও লোড করতে হবে যাগুলি সাইটে কার্যকারিতার উপর নেতিবাচক প্রভাব ফেলতে পারে।
আপনি সিএসএস সীমান্তের সম্পত্তি ব্যবহার করতে পারেন সীমানাগুলি যোগ করতে যা লাইন হিসাবে উপরের দিকে বা নীচের অংশে কাজ করে, কার্যকরভাবে আপনার বিভাজক রেখাটি তৈরি করে।
অবশেষে, আপনি অনুভূমিক নিয়ম জন্য এইচটিএমএল উপাদান ব্যবহার করতে পারেন -
অনুভূমিক নিয়ম উপাদান
আপনি যদি কখনও একটি ওয়েব পৃষ্ঠায় একটি উপাদান করা আছে, আপনি সম্ভবত আবিষ্কৃত যে এই লাইন প্রদর্শিত ডিফল্ট উপায় আদর্শ নয়। এর মানে হল যে আপনি আপনার সাইটটি কেমন দেখতে চান তার সাথে এই উপাদানের দৃশ্যমান চেহারা সমন্বয় করতে সিএসএস চালু করতে হবে।
ব্রাউজার এটি প্রদর্শন করতে চায় এমন একটি মৌলিক এইচআর ট্যাগ দেখানো হয়। আধুনিক ব্রাউজারগুলি সাধারণত 100% প্রস্থ, 2px এর উচ্চতা, এবং লাইনটি তৈরি করার জন্য কালোতে একটি 3D সীমানা সহ অপ্রয়োজনীয় এইচআর ট্যাগ প্রদর্শন করে।
এখানে একটি আদর্শ এইচআর উপাদান উদাহরণস্বরূপ আপনি এই ছবিতে দেখতে পারেন কিভাবে একটি অস্থায়ী এইচআর আধুনিক ব্রাউজারে দেখায়।
প্রস্থ এবং উচ্চতা ক্রমাগত ব্রাউজার মধ্যে ক্রমাগত হয়
ওয়েব ব্রাউজার জুড়ে সামঞ্জস্যপূর্ণ যে শুধুমাত্র শৈলী প্রস্থ এবং শৈলী হয়। এই লাইন কত বড় হবে তা নির্ধারণ করে। যদি আপনি প্রস্থ এবং উচ্চতা নির্ধারণ না করেন তবে ডিফল্ট প্রস্থ 100% এবং ডিফল্ট উচ্চতা 2px।
এই উদাহরণে প্যাটার্ন উপাদানটির 50% প্রস্থ হয় (সবগুলি নীচের এই উদাহরণগুলিতে উল্লেখ্য করুন ইনলাইন স্টাইলগুলি অন্তর্ভুক্ত করা হয়। একটি উত্পাদন সেটিংয়ে, এই শৈলীটি আপনার সমস্ত পৃষ্ঠায় ব্যবস্থাপনা সহজতর করার জন্য বাহ্যিক স্টাইল শীটে লেখা হবে):
শৈলী = "প্রস্থ: 50%;">
এবং এই উদাহরণে উচ্চতা 2em হয়:
শৈলী = "উচ্চতা: 2em;">
সীমান্ত পরিবর্তন চ্যালেঞ্জ হতে পারে
আধুনিক ব্রাউজারে, ব্রাউজার সীমানা সমন্বয় করে লাইন নির্মাণ করে। তাই আপনি স্টাইল সম্পত্তি সঙ্গে সীমানা সরিয়ে যদি, লাইন পৃষ্ঠা নেভিগেশন অদৃশ্য হয়ে যাবে। যেমন আপনি দেখতে পারেন (ভাল, আপনি কিছু দেখতে পাবেন না, যেমন লাইন অদৃশ্য হবে) এই উদাহরণে:
শৈলী = "সীমানা: কেউ;">
সীমানা আকার, রঙ এবং শৈলীটি সামঞ্জস্য করে লাইনটি আলাদা আলাদা করে দেখাবে এবং এটি সব আধুনিক ব্রাউজারগুলিতে একই প্রভাব ফেলে। উদাহরণস্বরূপ, এই বিক্ষোভের মধ্যে সীমারেখা লাল, ড্যাশ এবং 1 পক্স প্রশস্ত:
শৈলী = "সীমানা: 1px ড্যাশ # 000;">
কিন্তু আপনি সীমানা এবং উচ্চতা পরিবর্তন করলে, শৈলীগুলি আধুনিক ব্রাউজারগুলির তুলনায় খুব পুরনো ব্রাউজারগুলিতে সামান্য ভিন্নতা দেখায়। আপনি এই উদাহরণে দেখতে পারেন, যদি আপনি এটি IE7 এবং নীচের (একটি ব্রাউজার যা waifully পুরানো এবং আর মাইক্রোসফ্ট দ্বারা আর সমর্থিত হয় না) একটি বেল্লিখিত অভ্যন্তরীণ লাইন যে অন্যান্য ব্রাউজার (IE8 এবং আপ সহ) প্রদর্শন করা হয় না দেখতে পারেন। :
শৈলী = "উচ্চতা: 1.5 মি, প্রস্থ: ২5 সেঃঃ সীমানা: 1 পিএক্স কঠিন # 000;">
যারা প্রাচীন ব্রাউজার সত্যিই আজ ওয়েব ডিজাইনার একটি উদ্বেগের অনেক সত্যিই না, তারা মূলত আরো আধুনিক বিকল্প সঙ্গে প্রতিস্থাপিত হয়েছে, যেহেতু।
একটি ব্যাকগ্রাউন্ড ইমেজ সঙ্গে একটি আলংকারিক লাইন করুন
একটি রঙের পরিবর্তে, আপনি আপনার এইচআর জন্য একটি পটভূমি চিত্র সংজ্ঞায়িত করতে পারেন যাতে আপনি এটি চান ঠিক যেমন দেখতে, কিন্তু এখনও আপনার মার্কআপে semantically প্রদর্শন।
এই উদাহরণে আমরা তিনটি লবঙ্গ লাইনের একটি চিত্র ব্যবহার করেছি। এটি পুনরাবৃত্তি না দিয়ে ব্যাকগ্রাউন্ড ইমেজ হিসাবে সেট করে, এটি এমন সামগ্রীতে একটি বিরতি তৈরি করে যা আপনি বইগুলিতে দেখতে প্রায় কাছাকাছি দেখেন:
শৈলী = "উচ্চতা: ২0px; পটভূমি: #fff url (aa010307.gif) কোনও-পুনরাবৃত্ত স্ক্রল কেন্দ্র; সীমানা: কেউ;">
এইচআর উপাদানগুলি রূপান্তর
CSS3 সহ, আপনি আপনার লাইনগুলি আরও আকর্ষণীয় করতে পারেন এইচআর এলিমেন্টটি ঐতিহ্যগতভাবে একটি অনুভূমিক রেখা, কিন্তু সিএসএস রূপান্তর বৈশিষ্ট্য দিয়ে, আপনি কিভাবে তা দেখেন তা পরিবর্তন করতে পারেন। এইচআর এলিমেন্টের একটি প্রিয় রূপান্তর ঘূর্ণন পরিবর্তন করা হয়।
আপনি আপনার এইচআর এলিমেন্টটি ঘুরিয়ে দিতে পারেন যাতে এটি শুধু সামান্য তির্যক হয়:
ঘন্টা {
-মোজ-রূপান্তর: ঘূর্ণন (10deg);
-ওয়েবকিট-ট্রান্সফর্ম: ঘূর্ণন (10deg);
-o- রুপান্তর: ঘূর্ণন (10deg);
-এমএস-রূপান্তর: ঘূর্ণন (10deg);
রূপান্তর: ঘূর্ণন (10deg);
}
অথবা আপনি এটি ঘোরাতে পারেন যাতে এটি সম্পূর্ণ উল্লম্ব হয়:
ঘন্টা {
-মোজ-রূপান্তর: ঘূর্ণন (90deg);
-ওয়েবকিট-ট্রান্সফর্ম: ঘূর্ণন (90 ডিগ্রী);
-o- রূপান্তর: ঘূর্ণন (90deg);
-এমএস-রূপান্তর: ঘূর্ণন (90deg);
রূপান্তর: ঘূর্ণন (90deg);
}
মনে রাখবেন যে এই ডকুমেন্টে তার বর্তমান অবস্থানের উপর ভিত্তি করে এইচআরটি ঘুরছে, তাই আপনি যেখানে এটি চান সেখানে পেতে পজিশনিংটি সামঞ্জস্য করতে হবে। এটি একটি নকশা উল্লম্ব লাইন যোগ করার জন্য এটি ব্যবহার করার সুপারিশ করা হয় না, কিন্তু এটি একটি আকর্ষণীয় প্রভাব পেতে একটি উপায়।
আপনার পৃষ্ঠাগুলিতে লাইন পেতে আরেকটি উপায়
এইচআর এলিমেন্ট ব্যবহার করার পরিবর্তে কিছু মানুষ অন্য একটি জিনিসের সীমানায় নির্ভর করে। কিন্তু কখনও কখনও একটি এইচআর সীমানা সেট আপ করার চেষ্টা করার চেয়ে অনেক বেশি সুবিধাজনক এবং ব্যবহার করা সহজ। কিছু ব্রাউজারের বাক্স মডেল সমস্যা একটি সীমানা সেট এমনকি trickier করতে পারেন