আমি কীভাবে আমার <hr> ট্যাগটির পুরুত্ব পরিবর্তন করতে পারি

Question

আমি সিএসএসে আমার অনুভূমিক নিয়মের ( <hr>) বেধ পরিবর্তন করতে চাই । আমি জানি এটি এটিএমএলএমেও করা যেতে পারে -

<hr size="10">

তবে আমি শুনছি যে এখানে এমডিএন- তে উল্লিখিত হিসাবে এটিকে অবজ্ঞা করা হয়েছে । সিএসএসে আমি চেষ্টা করার চেষ্টা করেছি height:1pxতবে এটি পুরুত্ব পরিবর্তন করে না। আমি <hr>লাইন 0.5pxঘন হতে চান ।

আমি উবুন্টুতে ফায়ারফক্স 3.6.11 ব্যবহার করছি

Comments

আমি এটি সত্যিই পাতলা চাই, ব্যবহারকারী নির্দিষ্টভাবে এটির সন্ধান না করা পর্যন্ত সেখানে তা লক্ষ্য করা উচিত নয়। যাইহোক চেষ্টা করে দেখুন ...

— শ্রীকর অপালরাজু

আপনি এটিকে আরও পটভূমির রঙ তৈরি করার চেষ্টা করতে পারেন যাতে এটি মিশ্রিত হয় ...

— JustcallmeDrago

যেহেতু 1 পিএক্স ন্যূনতম, আপনি যদি কম লক্ষণীয় হতে চান তবে আপনার রেখাটি হালকা ধূসর করা উচিত।

— গার্ট গ্রেনান্ডার

@ মুভিওয়দা: মাত্রা উপপিক্সেল যেতে পারে তবে রেন্ডারিংটি নিকটতম পিক্সেলের সাথে গোল করা হবে। এটি একটি পূর্ণসংখ্যার মানটি ১.২৩78৪৪ হতে আশা করার মতো ... অসম্ভব। আপনি এটিকে এই ধরণের মানটিতে সেট করতে পারেন তবে এটি নিকটতম পুরো সংখ্যায় গোল হয়ে যাবে। তাত্ত্বিকভাবে আপনি প্রযুক্তিগত সুনির্দিষ্ট কারণে এলসিডিগুলিতে পিক্সেলটির 1/3 গুন প্রস্থকে রেন্ডার করতে পারেন, তবে আমার সন্দেহ হয় যে ব্রাউজারগুলি আসলে তা করে do বাকি সাবপিক্সেল মাত্রা কোনও রঙের হতে পারে না কারণ এটি কেবলমাত্র আরজিবি ফসফোরগুলির সাথে সম্পর্কিত।

— রবার্ট করিতনিক

অর্ধ পিক্সেল নয়, অর্ধ পিক্সেল। প্রশ্নটি সম্পূর্ণ বোকা নয়। reddit.com/r/shittyprogramming/comments/20zyea/…

— লুক রেহমান

Answer 1

ধারাবাহিকতার জন্য কোনও সীমানা সরান এবং <hr>বেধের জন্য উচ্চতা ব্যবহার করুন । একটি ব্যাকগ্রাউন্ড রঙ যুক্ত করা আপনার <hr>উচ্চতা এবং নির্দিষ্ট রঙের সাথে স্টাইল করবে ।

আপনার স্টাইলশিটে:

hr {
    border: none;
    height: 1px;
    /* Set the hr color */
    color: #333; /* old IE */
    background-color: #333; /* Modern Browsers */
}

অথবা আপনার যেমন আছে তেমন ইনলাইন করুন:

<hr style="height:1px;border:none;color:#333;background-color:#333;" />

এখানে দীর্ঘতর ব্যাখ্যা

Comments

আপনি কেন তৈরি করছেন border:none? যে কোনো কারণে? সীমানাও কি বেধ যুক্ত করে?

— শ্রীকর অপালরাজু

হ্যাঁ, আমরা ধারাবাহিকতার জন্য লাইনটি প্রদর্শনের জন্য পটভূমি রঙটি ব্যবহার করতে চাই। এফএফ <hr> তৈরি করতে সীমানা ব্যবহার করে তবে তা হয় না। এটি তাদের উভয়কে একই করে দেবে।

— গ্রেগ বি

হ্যাঁ, আমি সর্বদা ক্রস-ব্রাউজার <hr> ট্যাগগুলি অসুবিধে করে দেখেছি। তাদের যথাযথ আচরণ করতে পেরে ভালো লাগল।

— গ্রেগ বি

অথবা, যদি আপনার কেবলমাত্র অফ-অফ প্রয়োজন হয়, আপনি এটির সাথে ইনলাইনটি করতে পারেন<hr style="border: none; height:1px; color:#333; background-color:#333;">;

— জেসি চিশলম

ফলব্যাকের জন্য আইইয়ের বয়স কত color?

— ট্রাইসিস

Answer 2

ব্রাউজারগুলিতে উপ-পিক্সেল রেন্ডারিং

সাব-পিক্সেল রেন্ডারিং জটিল। আপনি আসলে কোনও মনিটর পিক্সেল পাতলা রেখার চেয়ে কম রেন্ডার আশা করতে পারবেন না। তবে সাব-পিক্সেল মাত্রা সরবরাহ করা সম্ভব। ব্রাউজারের উপর নির্ভর করে তারা এগুলি আলাদাভাবে উপস্থাপন করে। এটি সম্পর্কে জন রেসিগের ব্লগ পোস্টটি দেখুন ।

মূলত যদি আপনার মনিটরটি এলসিডি হয় এবং আপনি উল্লম্ব লাইনগুলি আঁকেন তবে আপনি সহজেই একটি 1/3 পিক্সেল লাইন আঁকতে পারেন। যদি আপনার ব্যাকগ্রাউন্ড সাদা হয় তবে আপনার লাইনের রঙ দিন #f0f। চোখে এই লাইন পিক্সেল প্রশস্ত 1/3 হবে। যদিও এটি কিছু রঙের হবে, আপনি যদি মনিটরকে বাড়িয়ে তুলেন তবে আপনি দেখতে পাবেন যে পুরো পিক্সেলের (আরজিবি সমন্বিত) কেবলমাত্র একটি বিভাগ অন্ধকার হয়ে যাবে। এটি বেশ বেশি কৌশল যা সূক্ষ্ম প্রকারের ইঙ্গিত হিসাবে ক্লিয়ারটাইপের জন্য ব্যবহৃত হয় ।

তবে অনুভূমিক রেখাগুলি কেবল একটি পূর্ণ পিক্সেল উচ্চ হতে পারে। এটি এলসিডি মনিটরের প্রযুক্তি সীমাবদ্ধতা। সিআরটিগুলি তাদের ত্রিভুজাকার ফসফোরগুলির সাথে আরও জটিল ছিল (যদি না তারা অ্যাপারচার গ্রিল টাইপ অর্থাৎ সনি ট্রিনিট্রন না থাকে) তবে এটি ভিন্ন গল্প।

মূলত একটি উপ-পিক্সেল মাত্রা সরবরাহ করা এবং এটি সেভাবে রেন্ডার করা আশা করা একটি সংখ্যার 1.2034759349 সংরক্ষণ করার জন্য একটি পূর্ণসংখ্যের ভেরিয়েবলের প্রত্যাশা সমান same যদি আপনি বুঝতে পারছেন এটি অসম্ভব, তবে আপনার বুঝতে হবে যে মনিটররা সাব-পিক্সেল মাত্রা সরবরাহ করতে সক্ষম নয়।

ক্রস ব্রাউজার নিরাপদ শৈলী

তবে যেভাবে অনুভূমিক নিয়মগুলি মিশ্রিত হয় সেগুলি সাধারণত রঙ ব্যবহার করে করা হয়। সুতরাং আপনার পটভূমি যদি উদাহরণস্বরূপ সাদা হয় ( #fff) তবে আপনি সর্বদা আপনার HR খুব হালকা করতে পারেন । লাইক #eee।

খুব হালকা অনুভূমিক নিয়মের জন্য ক্রস ব্রাউজার নিরাপদ শৈলীটি হ'ল:

hr
{
    background-color: #eee;
    border: 0 none;
    color: #eee;
    height: 1px;
}

এবং ইন-লাইন শৈলীর পরিবর্তে একটি সিএসএস ফাইল ব্যবহার করুন। তারা কেবলমাত্র একটি নির্দিষ্ট উপাদান নয় পুরো সাইটের জন্য একটি কেন্দ্রীয় সংজ্ঞা প্রদান করে। এটি রক্ষণাবেক্ষণকে আরও অনেক ভাল করে তোলে।

Answer 3

1px লাইনটি আঁকতে আমি সবচেয়ে সংক্ষিপ্ততর উপায় খুঁজছিলাম, কারণ পৃথক সিএসএসের সম্পূর্ণ বোঝা দ্রুত বা সংক্ষিপ্ততম সমাধান নয়।

এইচটিএমএল 5 অবধি, WP 1px hr: <hr noshade> এর জন্য একটি ছোট উপায় ছিল কিন্তু <hr> এর নোশাদ বৈশিষ্ট্য এইচটিএমএল 5 সমর্থন করে না। পরিবর্তে সিএসএস ব্যবহার করুন। ( আকার, প্রস্থ, প্রান্তিককরণ হিসাবে পূর্বে ব্যবহৃত অন্যান্য অ্যাটটিবুটগুলি নয় ) ...

---

এখন, এটি বেশ কৃপণ, তবে সবচেয়ে সাধারণ 1px ঘন্টা প্রয়োজন হলে এটি ভালভাবে কাজ করে:

পরিবর্তন 1, ব্ল্যাক ঘন্টা: (কালো জন্য সেরা সমাধান)

<hr style="border-bottom: 0px">

আউটপুট: এফএফ, অপেরা - কালো / সাফারি - গা dark় ধূসর

---

প্রকরণ 2, গ্রে আওয়ার (সংক্ষিপ্ততম):

<hr style="border-top: 0px">

আউটপুট: অপেরা - গা dark় ধূসর / এফএফ - ধূসর / সাফারি - হালকা ধূসর

---

প্রকরণ 3, রঙ পছন্দসই:

<hr style="border: none; border-bottom: 1px solid red;">

আউটপুট: অপেরা / এফএফ / সাফারি: 1 পিক্স লাল।

Comments

আমি সন্তুষ্ট হব, দয়া করে যদি কেউ এটি Chrome এবং IE এর জন্য পরীক্ষা করে দেখেন। প্রথম দুটি বৈচিত্রগুলি বেশ কৌতুকপূর্ণ, esp। ২ য় প্রকরণ, যা প্রথম ব্ল্যাক 1 পিক্সের দৃশ্যমান।

— মাস্কারিয়া

আমি এই সমাধানটি পছন্দ করি কারণ এটি কোনও রঙের তথ্য হার্ড-কোড করে না, যা ডার্ক-মোডের সাথে সামঞ্জস্য করার জন্য দরকারী। Chrome এ ঠিক আছে।

— tresf

Answer 4

আমি HRনিজেই নিজেকে 0pxউচ্চ হতে সেট করার পরামর্শ দিচ্ছি এবং এর পরিবর্তে দৃশ্যমান হওয়ার জন্য এর সীমানাটি ব্যবহার করব। আমি লক্ষ করেছি যে আপনি যখন জুম ইন এবং আউট করেন (সিটিআরএল + মাউস হুইল) তখন নিজের পুরুত্ব HRপরিবর্তন হয়, যখন আপনি সীমানা সেট করেন তখন সর্বদা একই থাকে:

hr {
    height: 0px;
    border: none;
    border-top: 1px solid black;
}

Comments

আমি দেখতে পাচ্ছি যে সর্বশেষতম ক্রোমে এটি পৃষ্ঠাটির বাকী অংশের সাথে বেধে পরিবর্তিত হচ্ছে। সবচেয়ে খারাপ, আপনি যদি জুম আউট করেন তবে এটি অদৃশ্য হয়ে যেতে পারে :(

— পাভেল আলেক্সিভ

Answer 5

উচ্চতার বৈশিষ্ট্যটি এইচটিএমএল 5 এ অবচয় করা হয়েছে। আমি কী করব তা হল ঘন্টাটির চারপাশে একটি সীমানা তৈরি করা এবং সীমানার পুরুত্ব বাড়ানো যেমন: ঘন্টা স্টাইল = "বর্ডার: শক্ত 2px কালো;"

Answer 6

আমি লাইনে অস্বচ্ছতা যুক্ত করেছি, সুতরাং এটি আরও পাতলা বলে মনে হচ্ছে:

<hr style="opacity: 0.25">

Answer 7

আমি বিশ্বাস করি স্টাইলিং <hr>ট্যাগের জন্য সেরা অর্জনটি নিম্নরূপ :

hr {
color:#ddd;
background-color:
#ddd; height:1px;
border:none;
max-width:100%;
}

এবং HTML কোডের জন্য মাত্র যোগ করুন: <hr>।

Answer 8

সীমানা বা মার্জিন ছাড়াই 1 পিক্সেল কালো লাইনের জন্য এখানে একটি সমাধান

hr {background-color:black; border:none; height:1px; margin:0px;}

• গুগল ক্রোমে পরীক্ষিত

আমি এই অ্যাড কারণ অন্যান্য উত্তর অন্তর্ভুক্ত করা হয়নি চিন্তা: margin:0px;।

• ডেমো

hr {background-color:black; border:none; height:1px; margin:0px;}

<div style="border: 1px solid black; text-align:center;">
<div style="background-color:lightblue;"> ↑ container ↑ <br> <br> <br> ↓ hr ↓ </div>
<hr>
<div style="background-color:lightgreen;"> ↑ hr ↑ <br> <br> <br> ↓ container ↓ </div>
</div>

Answer 9

আমি মত নির্মাণ ব্যবহার করার পরামর্শ দিই

<style>
  .hr { height:0; border-top:1px solid _anycolor_; }
  .hr hr { display:none }
</style>

<div class="hr"><hr /></div>

Comments

হেহেহেহ :) :) এর আগে আর কখনও দেখেনি :)

— প্রকাশ রমন