CSS ব্যবহার করে পাঠ্য সীমানা (পাঠ্যের চারপাশে সীমানা)

Question

নীচের চিত্রের মতো পাঠ্যের চারপাশে কোনও সীমানা সংহত করার কোনও উপায় আছে?

Answer 1

একাধিক পাঠ্য ছায়া ব্যবহার করুন:

text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;

body {
  font-family: sans-serif;
  background: #222;
  color: darkred;
  }
h1 {
  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}

<h1>test</h1>

বিকল্পভাবে, আপনি পাঠ্য স্ট্রোক ব্যবহার করতে পারেন, যা কেবল ওয়েবকিটে কাজ করে:

-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;

body {
  font-family: sans-serif;
  background: #222;
  color: darkred;
  }
h1 {
  -webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;
}

<h1>test</h1>

এছাড়াও আরও পড়তে সিএসএস-ট্রিকস হিসাবে।

Comments

উত্তর লক্ষণীয়: দয়া করে এই পদ্ধতিগুলির ক্রস ব্রাউজারের ক্ষমতা পরীক্ষা করুন ... আইই-তে কমপক্ষে 9 টি ক্লায়েন্টদের সাথে আমার গুরুতর সমস্যা হচ্ছে ... পিএনজি পথে যাওয়ার চিন্তাভাবনা করছি।

— এরিকবেস্ট

@ এরিকবেস্ট দ্বিতীয় লিঙ্কে আইই 9 সমস্যাগুলি উল্লেখ করা হয়েছে। যদিও এই পৃষ্ঠাটি গুগল caniuse.com/css-textshadow

— অনানানফায়

স্বচ্ছতার সাথে পাঠ্যের জন্য খারাপ প্রদর্শনের কারণ (rgba ব্যবহার করে)।

— আলেজান্দ্রো নাভা 21

Answer 2

অবশ্যই। আপনি CSS3 ব্যবহার করতে পারেন text-shadow:

text-shadow: 0 0 2px #fff;

তবে এটি এখনই সমস্ত ব্রাউজারে প্রদর্শন করবে না। মডার্নিজারের মতো স্ক্রিপ্ট লাইব্রেরি ব্যবহার করা যদিও এটি বেশিরভাগ ব্রাউজারে সঠিকভাবে পেতে সহায়তা করবে।

Comments

আমি স্যার এরই মধ্যে চেষ্টা করেছিলাম তবে আমার যা দরকার তা টেক্সটের চারপাশে শক্ত সাদা।

— jho1086

Answer 3

আমি পাঠ্য-ছায়াগুলির গুণগত মানের উপর ভিত্তি করে এতগুলি সমাধান পছন্দ করি না, এটি সত্যিই নমনীয় নয়, এটি 2 পিক্সেলের স্ট্রোকের জন্য কাজ করতে পারে যেখানে যোগ করার দিকনির্দেশগুলি 8 হয়, তবে মাত্র 3 পিক্সেলের স্ট্রোকের দিকনির্দেশ 16 হয়ে গেছে এবং আরও অনেক কিছু .. । পরিচালনার জন্য সত্যই ধাঁধা।

সঠিক সরঞ্জামটি বিদ্যমান, এটি এসভিজি <text> ব্রাউজারগুলির 'সাফল্যের সমস্যাটি কোনও ক্ষেত্রে মূল্যহীন নয়,' কারণ টেক্সট-ছায়ার ব্যবহারের নিজস্ব সমর্থন সমস্যাও রয়েছে, filter: progid:DXImageTransformব্যবহার করা যেতে পারে বা আইআই <10 তবে প্রায়শই প্রত্যাশার মতো কাজ করে না।

আমার কাছে সেরা সমাধানটি পুরানো ব্রাউজারের জন্য স্ট্রোকড নয় পাঠ্য ফালব্যাকের সাথে রয়ে গেছে:

এই ধরণের অ্যাপ্রোচটি ক্রোম এবং ফায়ারফক্স, সাফারি সংস্করণ 3.04, অপেরা 8, আইই 9 এর সমস্ত সংস্করণগুলিতে অবিচ্ছিন্নভাবে কাজ করে

text-shadowযার সমর্থনগুলির তুলনায় : ক্রোম ৪.০, এফএফ 3.5, আইই 10, সাফারি 4.0, অপেরা 9, এর ফলাফল আরও বেশি সামঞ্জস্যপূর্ণ।

.stroke {
  margin: 0;
  font-family: arial;
  font-size:70px;
  font-weight: bold;
  }
  
  svg {
    display: block;
  }
  
  text {
    fill: black;
    stroke: red;
    stroke-width: 3;
  }

<p class="stroke">
  <svg xmlns="http://www.w3.org/2000/svg" width="700" height="72" viewBox="0 0 700 72">
    <text x="0" y="70">Stroked text</text>
  </svg>
</p>

Comments

আপনার সমাধান ভাগ করে নেওয়ার জন্য আপনাকে ধন্যবাদ। আমি মনে করি আপনার অধিকার এটি আরও নমনীয়। তবে বেশিরভাগ সময় সিএসএস ব্যবহার করা আরও দক্ষ। আমি পরে এসভিজি ব্যবহার করার চেষ্টা করব।

— jho1086

Answer 4

text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

Comments

আপনি একটি ব্যাখ্যা যোগ করতে পারেন?

— রবার্ট

Answer 5

নীচে সমস্ত ব্রাউজারের মূল্য আবরণযোগ্য হবে:

text-shadow: 0 0 2px #fff; /* Firefox 3.5+, Opera 9+, Safari 1+, Chrome, IE10 */
filter: progid:DXImageTransform.Microsoft.Glow(Color=#ffffff,Strength=1); /* IE<10 */