পাঠ্যে আউটলাইন প্রভাব


329

সিএসএসে কি বিভিন্ন উপায়ে বিভিন্ন রঙের সাথে পাঠ্যকে আউটলাইন দেওয়ার উপায় রয়েছে? আমি আমার লেখার কিছু অংশ এটিকে আরও স্বজ্ঞাগত করতে হাইলাইট করতে চাই - নাম, লিঙ্ক ইত্যাদির মতো, লিঙ্কের রং পরিবর্তন করা আজকাল সাধারণ বিষয়, তাই আমি নতুন কিছু চাই।


17
@ ড্যান বেটার আলাদা বোঝায়। আপনার পরামর্শ সাধারণত ভাল তবে এটি সৃজনশীল পরীক্ষা নিরস্ত করতে পারে। তদতিরিক্ত, এটি সাধারণত "সাধারণ = ভাল" হয় না ... বরং এটি "সাধারণ = সবে যথেষ্ট ভাল" ”
কনরাড রুডলফ

7
@ ড্যান গ্রসম্যান: বিশ্ব নতুন ধারণা থেকে বিকশিত হয়েছে, নতুন কিছু তুচ্ছ নয়।
yoda

7
@ yoda আপনার বাক্য গঠনটি অস্বাভাবিক। / সম্পাদনা এটিকে কিছু মনে করবেন না, আপনাকে অন্য কারও সাথে বিভ্রান্ত করলেন ... ছোট্ট সবুজ বউ
কনরাড রুডলফ

আপনার আরও কী কী প্রয়োজন তা বর্ণনা করতে পারেন। আপনি যখন বলেছিলেন যে আপনি 'বিভিন্ন রঙের সাথে পাঠ্যকে রূপরেখা দিতে চান' তখন আপনি কী বোঝাতে চেয়েছিলেন তা আমি ঠিক নিশ্চিত নই
ইয়ে জিয়াং

উত্তর:


452

text-strokeসিএসএস 3 তে একটি পরীক্ষামূলক ওয়েবকিট সম্পত্তি রয়েছে , আমি এটি কিছু সময়ের জন্য কাজ করার চেষ্টা করছিলাম তবে এখনও অবধি ব্যর্থ হয়েছি।

পরিবর্তে আমি যা করেছি তা ইতিমধ্যে সমর্থিত text-shadowসম্পত্তি ব্যবহৃত হয়েছে (ক্রোম, ফায়ারফক্স, অপেরা এবং আই 9 আমি বিশ্বাস করি)।

একটি স্ট্রোকড পাঠ্য অনুকরণ করতে চারটি ছায়া ব্যবহার করুন:

.strokeme {
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
<div class="strokeme">
  This text should have a stroke in some browsers
</div>

আমি একটি ডেমো করেছেন এখানে আপনার জন্য

এবং একটি প্রাচীরের উদাহরণ এখানে পাওয়া যায়


জেসন সি মন্তব্যে text-shadowযেমন উল্লেখ করেছেন, সিএসএস সম্পত্তি অপেরা মিনি ব্যতীত এখন সমস্ত বড় ব্রাউজার দ্বারা সমর্থিত। যেখানে এই সমাধানটি পিছনের সামঞ্জস্যের জন্য কাজ করবে (ব্রাউজারগুলির সাথে স্বয়ংক্রিয়ভাবে আপডেট হওয়া সম্পর্কিত কোনও সমস্যা নয়) আমার বিশ্বাস text-strokeসিএসএস ব্যবহার করা উচিত।


12
দুঃখের বিষয়, text-shadowIE10 10 পর্যন্ত IE সমর্থন করে না । অদ্ভুতভাবে যথেষ্ট, IE9 সমর্থন করে box-shadowকিন্তু না text-shadow
ওয়েব_ডিজাইনার

14
ব্রাউজারের সমর্থনেরtext-shadow একটি সংক্ষিপ্তসার এখানে । মনে হচ্ছে বর্তমানে (এই উত্তর পোস্ট হওয়ার 3 বছর পরে) এটি অপেরা মিনি ব্যতীত সমস্ত বড় ব্রাউজার দ্বারা সমর্থিত, যা "আংশিক সমর্থন" দেখায় (এটি উপেক্ষা করে blur-radius)।
জেসন সি

3
এটি আরও পাতলা প্রভাব যুক্ত করে:text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
BeauCielBleu

29
অসাধারণ শ্রেণির নাম
নাগরিক

4
জেসন সি text-shadowসমর্থন দেখায় , না text-stroke। যা কেবলমাত্র এই সময়ে ওয়েবকিট দ্বারা সমর্থিত।
গ্রেগোয়ার ডি

100

সম্পাদনা: text-stroke এখন বেশিরভাগ ব্রাউজারে মোটামুটি পরিপক্ক এবং প্রয়োগ করা হয়েছে । এটি সহজ, তীক্ষ্ণ এবং আরও সুনির্দিষ্ট। যদি আপনার ব্রাউজার শ্রোতারা এটি সমর্থন করতে পারেন তবে আপনার text-strokeপরিবর্তে এখন প্রথমে ব্যবহার করা উচিত text-shadow


আপনি text-shadowকোনও অফসেট ছাড়াই কেবল এফেক্ট দিয়ে এটি করতে এবং করতে পারেন :

.outline {
    color: #fff;
    text-shadow: #000 0px 0px 1px;
    -webkit-font-smoothing: antialiased;
}

কেন? আপনি যখন একাধিক ছায়া প্রভাবগুলি অফসেট করবেন, আপনি কদাচিৎ, দাগযুক্ত কোণগুলি লক্ষ্য করতে শুরু করবেন: ছায়া প্রভাব অফসেটগুলি লক্ষণীয় জাজযুক্ত কোণগুলিতে ফল দেয়।


কেবলমাত্র একটি অবস্থানে টেক্সট-শ্যাডো প্রভাব থাকলে অফসেটগুলি মুছে ফেলা হয়, অর্থাত্ যদি আপনি খুব পাতলা বোধ করেন এবং পরিবর্তে একটি গাer় রূপরেখা পছন্দ করেন তবে আপনি কোনও সমস্যা নেই - আপনি একই প্রভাব (একই অবস্থান এবং অস্পষ্টতা রেখে) কয়েকবার পুনরাবৃত্তি করতে পারে। তাই ভালো:

text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px,
             #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px;

এখানে কেবলমাত্র একটি প্রভাবের (শীর্ষ) একটি নমুনা রয়েছে এবং একই প্রভাবটি 14 বার (নীচে) পুনরাবৃত্তি করা হয়েছে:


পাঠ্য-ছায়া সহ নমুনা পাঠ্য রেন্ডার করা

এছাড়াও দ্রষ্টব্য: লাইনগুলি এত পাতলা হয়ে যাওয়ার কারণে সাব-পিক্সেল উপস্থাপনাটি বন্ধ করে দেওয়া খুব ভাল ধারণা
-webkit-font-smoothing: antialiased


আকর্ষণীয় উত্তর, ধন্যবাদ। যদিও আপনি প্রভাবটি পুনরাবৃত্তি করে বলতে চাইছেন তা আমি সত্যিই বুঝতে পারি না।
এডজিলিয়ন

font-smoothingবিকল্পটির জন্য ধন্যবাদ , এটি ক্রোমের আউটপুটটিকে ব্যাপকভাবে উন্নত করেছে!
মেকি

1
আমি উত্তরে যুক্ত করা মন্তব্যটি নোট করেছি যে পাঠ্য-স্ট্রোক এখন বেশিরভাগ ব্রাউজারে সমর্থিত, তবে ক্যানিয়াস এখনও (আগস্ট ২০১ 2016) এটি আইই এবং এজের সমস্ত সংস্করণে অসমর্থিত হিসাবে দেখায় এবং বিন্যাসের সাথে -বিকিত-পাঠ্য-স্ট্রোকের প্রয়োজন .css.prefixes.webkit পতাকাটি ফায়ারফক্সে সক্ষম করা হয়েছে। এমন সাধারণ পদ্ধতি যা সাধারণ পাবলিক সাইটগুলির পক্ষে পর্যাপ্ত সমর্থন নয়।
নিক রাইস

1
আমি মনে করি যে পাঠ্য-ছায়ার 14 বার পুনরাবৃত্তি করাতে কিছু কার্য সম্পাদনের সমস্যা হতে পারে । বিশেষত মোবাইলে স্ক্রোল করার সময়।
Kaosmos

2
এএফআইএকি text-strokeবাহ্যরেখার মতো নয় text-shadowtext-strokeপাঠ্যটির বাইরে রূপরেখা উপস্থিত হওয়ার কোনও বিকল্প নেই যার অর্থ এই রূপরেখাটি প্রায়শই সত্যই ভয়াবহ আকার ধারণ করে এমন পাঠ্যটির মধ্যে রক্তপাত ঘটে। অন্য কথায় text-stroketext-shadow
রূপরেখার

90

সহজ! উদ্ধার করার জন্য এসভিজি।

এটি একটি সরলিকৃত পদ্ধতি:

svg{
  font: bold 70px Century Gothic, Arial;
  width: 100%;
  height: 120px;
}

text{
  fill: none;
  stroke: black;
  stroke-width:0.5px;
  // stroke-dasharray: 2,2;
  stroke-linejoin: round;
  animation: 2s pulsate infinite;
}

@keyframes pulsate {
  50%{ stroke-width:4px; }
}
<svg viewBox="0 0 450 50">
  <text y="40">Scalable Title</text>
</svg>

এখানে আরও জটিল ডেমো রয়েছে


6
এটি দুর্দান্ত সমাধান এবং পাঠ্য-ছায়ার সাথে সম্পর্কিত কোনও পারফরম্যান্স সমস্যা নেই। এই পদ্ধতির মধ্যে পারফরম্যান্সের পার্থক্য এবং একাধিক পাঠ্য-শ্যাডোগুলি সজ্জিত করার জন্য আমার বিশেষ অ্যাপ্লিকেশনটির জন্য বিশাল (আইডি 10 বড় স্ক্রিনের প্রদর্শনগুলিতে)।
djskinner

3
এটি আমাকে পাঠ্য-ছায়াগুলির চেয়ে আরও ভাল প্রভাব দিয়েছে, কারণ আমার ঘন লাইনের প্রয়োজন। ধন্যবাদ!
Andrea

2
এটা খাঁটি সোনার ছেলে !! খুব পেশাদার এবং দক্ষ পদ্ধতির, প্রশ্নের সঠিক উত্তর! এই সমাধানটি ডাব্লু 3 কাউন্সিল বা গুগলের আগে বা যাই হোক না কেন, অভিনন্দন!
Heitor

এই সমাধানটি আমার পক্ষেও নিখুঁত হত যদি আমি কোনও
টেক্সেরিয়ায়

36

ছায়াগুলি স্ট্রোকের মতো দেখাচ্ছে না হওয়া পর্যন্ত আপনি একাধিক ব্লোরড ছায়াগুলি স্ট্যাক করার চেষ্টা করতে পারেন:

.shadowOutline {
  text-shadow: 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black;
}

এখানে একটি বেহালতা: http://jsfiddle.net/GGUYY/

আমি কারও আগ্রহের ক্ষেত্রে কেবল এটি উল্লেখ করেছি, যদিও আমি এটিকে সমাধান বলব না কারণ এটি বিভিন্নভাবে ব্যর্থ হয়:

  • এটি পুরানো IE তে কাজ করে না
  • এটি প্রতিটি ব্রাউজারে বেশ আলাদাভাবে রেন্ডার করে
  • অনেকগুলি ছায়া প্রয়োগ করা প্রক্রিয়াজাতকরণের জন্য খুব ভারী: এস

1
এটি সত্যিই সহজ এবং উজ্জ্বল ধারণা!

1
ধন্যবাদ,
এটির

1
এটি চমৎকার. শেডিংয়ের অতিরিক্ত স্তরগুলি এর সাথে সত্যিই কিছু গভীরতা যুক্ত করে এবং এটি আইই 11, এফএফ 36, এবং ক্রোম 41 এ কাজ করে
রকিজ ম্যাজিকনম্বার

17

আমি একটি ক্রস-ব্রাউজারের পাঠ্য-স্ট্রোক সমাধানের সন্ধান করছিলাম যা ব্যাকগ্রাউন্ড চিত্রগুলিতে ওভারলাইড করা হলে কাজ করে। ভাবেন আমার কাছে এর জন্য একটি সমাধান রয়েছে যা অতিরিক্ত মার্ক আপ, জেএস এবং আই 7-9-এ কাজ করে না (আমি 6 টি পরীক্ষা করিনি), এবং এলিয়াসিং সমস্যা তৈরি করে না।

এটি CSS3 টেক্সট-শ্যাডো ব্যবহারের সংমিশ্রণ, যার আইই ( http://caniuse.com/#search=text-shadow ) ব্যতীত ভাল সমর্থন রয়েছে , তারপরে IE এর জন্য ফিল্টারগুলির সংমিশ্রণটি ব্যবহার করে। CSS3 পাঠ্য-স্ট্রোক সমর্থন এই মুহুর্তে দরিদ্র।

IE ফিল্টার

গ্লো ফিল্টার ( http://www.impressivewebs.com/css3-text-shadow-ie/ ) দেখতে ভয়ঙ্কর দেখাচ্ছে, তাই আমি এটি ব্যবহার করিনি।

ডেভিড হিউট এর উত্তরে নির্দেশের সংমিশ্রণে ড্রপশো ফিল্টার যুক্ত করা জড়িত। ক্লিয়ারটাইপটি দুর্ভাগ্যক্রমে মুছে ফেলা হয় তাই আমরা খারাপভাবে এলিয়াসযুক্ত পাঠ্য শেষ করি।

আমি তখন প্রস্তাবিত কিছু উপাদান মিলিত useragentman dropshadow ফিল্টার সঙ্গে।

একসাথে রেখে

এই উদাহরণটি একটি সাদা স্ট্রোক সহ কালো পাঠ্য হবে। আইই ( http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-nee// ) লক্ষ্য করার জন্য আমি শর্তাধীন এইচটিএমএল ক্লাস ব্যবহার করছি ।

#myelement {
    color: #000000;
    text-shadow:
    -1px -1px 0 #ffffff,  
    1px -1px 0 #ffffff,
    -1px 1px 0 #ffffff,
    1px 1px 0 #ffffff;
}

html.ie7 #myelement,
html.ie8 #myelement,
html.ie9 #myelement {
    background-color: white;
    filter: progid:DXImageTransform.Microsoft.Chroma(color='white') progid:DXImageTransform.Microsoft.Alpha(opacity=100) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=-1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=-1);
    zoom: 1;
}

এই এছাড়াও পুরোনো ইন্টারনেট কাজ করেfilter: glow(color=white,strength=1);
mch

16

শুধু এই উত্তর যুক্ত। "স্ট্রোকিং" পাঠ্যটি "আউটলাইনিং" এর মতো নয়

রূপরেখা দুর্দান্ত দেখায়। স্ট্রোকিং ভয়াবহ দেখাচ্ছে।

অন্য কোথাও তালিকাভুক্ত এসভিজি সমাধানে একই সমস্যা রয়েছে। আপনি একটি রূপরেখা চান আপনার দুটি বার পাঠ্য লাগানো দরকার। একবার স্ট্রোক করা এবং আবার স্ট্রোক করা হয় না।

স্ট্রোকিং আউটলাইনিং নয়

body {
  font-family: sans-serif;
  margin: 20px;
}

.stroked {
  color: white;
  -webkit-text-stroke: 1px black;
}

.thickStroked {
  color: white;
  -webkit-text-stroke: 10px black;
}

.outlined {
  color: white;
  text-shadow:
    -1px -1px 0 #000,
     0   -1px 0 #000,
     1px -1px 0 #000,
     1px  0   0 #000,
     1px  1px 0 #000,
     0    1px 0 #000,
    -1px  1px 0 #000,
    -1px  0   0 #000;
}

.thickOutlined {
  color: white;
text-shadow: 0.0px 10.0px 0.02px #000, 9.8px 2.1px 0.02px #000, 4.2px -9.1px 0.02px #000, -8.0px -6.0px 0.02px #000, -7.6px 6.5px 0.02px #000, 4.8px 8.8px 0.02px #000, 9.6px -2.8px 0.02px #000, -0.7px -10.0px 0.02px #000, -9.9px -1.5px 0.02px #000, -3.5px 9.4px 0.02px #000, 8.4px 5.4px 0.02px #000, 7.1px -7.0px 0.02px #000, -5.4px -8.4px 0.02px #000, -9.4px 3.5px 0.02px #000, 1.4px 9.9px 0.02px #000, 10.0px 0.8px 0.02px #000, 2.9px -9.6px 0.02px #000, -8.7px -4.8px 0.02px #000, -6.6px 7.5px 0.02px #000, 5.9px 8.0px 0.02px #000, 9.1px -4.1px 0.02px #000, -2.1px -9.8px 0.02px #000, -10.0px -0.1px 0.02px #000, -2.2px 9.8px 0.02px #000, 9.1px 4.2px 0.02px #000, 6.1px -8.0px 0.02px #000, -6.5px -7.6px 0.02px #000, -8.8px 4.7px 0.02px #000, 2.7px 9.6px 0.02px #000, 10.0px -0.6px 0.02px #000, 1.5px -9.9px 0.02px #000, -9.3px -3.6px 0.02px #000, -5.5px 8.4px 0.02px #000, 7.0px 7.2px 0.02px #000, 8.5px -5.3px 0.02px #000, -3.4px -9.4px 0.02px #000, -9.9px 1.3px 0.02px #000, -0.8px 10.0px 0.02px #000, 9.6px 2.9px 0.02px #000, 4.9px -8.7px 0.02px #000, -7.5px -6.7px 0.02px #000, -8.1px 5.9px 0.02px #000, 4.0px 9.2px 0.02px #000, 9.8px -2.0px 0.02px #000, 0.2px -10.0px 0.02px #000, -9.7px -2.3px 0.02px #000, -4.3px 9.0px 0.02px #000, 7.9px 6.1px 0.02px #000
}

svg {
  font-size: 40px;
  font-weight: bold;
  width: 450px;
  height: 70px;
  fill: white;
}

.svgStroke {
  fill: white;
  stroke: black;
  stroke-width: 20px;
  stroke-linejoin: round;
}
<h1 class="stroked">Properly stroked!</h1>
<h1 class="outlined">Properly outlined!</h1>

<h1 class="thickStroked">Thickly stroked!</h1>
<h1 class="thickOutlined">Thickly outlined!</h1>

<svg viewBox="0 0 450 70">
  <text class="svgStroke" x="10" y="45">SVG Thickly Stroked!</text>
</svg>
<svg viewBox="0 0 450 70">
  <text class="svgStroke" x="10" y="45">SVG Thickly Outlined!</text>
  <text class="svgText" x="10" y="45">SVG Thickly Outlined!</text>
</svg>

পিএস: আমি কীভাবে এসভিজিকে যেকোন স্বেচ্ছাসেবী পাঠ্যের সঠিক আকার হতে পারি তা জানতে আগ্রহী। আমার একটা অনুভূতি আছে যে এসভিজি তৈরির সাথে জড়িত হওয়া, জাভাস্ক্রিপ্টের সাহায্যে এটি অনুসন্ধান করে এক্সটেন্টগুলি পাওয়ার পরে ফলাফল প্রয়োগ করা জড়িত। যদি আরও সহজ নন-জেএস উপায় থাকে তবে আমি তা জানতে আগ্রহী।


1
দুর্দান্ত এটি হ'ল স্ট্রোকিং নয়, সঠিক রূপরেখা। সুন্দরভাবে কাজ করে এবং এটি চোখের উপর ঝরঝরে ও সহজ।
MitchellK

7

আমি 6 টি ভিন্ন ছায়া দিয়ে আরও ভাল ফলাফল পেয়েছি:

.strokeThis{
    text-shadow:
    -1px -1px 0 #ff0,
    0px -1px 0 #ff0,
    1px -1px 0 #ff0,
    -1px 1px 0 #ff0,
    0px 1px 0 #ff0,
    1px 1px 0 #ff0;
}

আমি একটি বড় ছায়া চেয়েছিলাম, এবং আরও কয়েকটি অতিরিক্ত লাইন যুক্ত করতে হয়েছিল .... 3px 0px 0 # 343a7e, -3px 0px 0 # 343a7e
জেডেন লসন


6

SASS এর জন্য এই মিশ্রণটি 8-অক্ষ ব্যবহার করে মসৃণ ফলাফল দেয়:

@mixin stroke($size: 1px, $color: #000) {
  text-shadow:
    -#{$size} -#{$size} 0 $color,
     0        -#{$size} 0 $color,
     #{$size} -#{$size} 0 $color,
     #{$size}  0        0 $color,
     #{$size}  #{$size} 0 $color,
     0         #{$size} 0 $color,
    -#{$size}  #{$size} 0 $color,
    -#{$size}  0        0 $color;
}

এবং সাধারণ সিএসএস:

text-shadow:
  -1px -1px 0 #000,
   0   -1px 0 #000,
   1px -1px 0 #000,
   1px  0   0 #000,
   1px  1px 0 #000,
   0    1px 0 #000,
  -1px  1px 0 #000,
  -1px  0   0 #000;

4

ঘন স্ট্রোকের সাথে কাজ করা কিছুটা অগোছালো হয়ে যায়, আপনি যদি সাসের আনন্দ পান তবে এই মিশ্রণটি চেষ্টা করুন, নিখুঁত নয় এবং স্ট্রোকের ওজনের উপর নির্ভর করে এটি ন্যায্য পরিমাণ সিএসএস উত্পন্ন করে।

 @mixin stroke($width, $colour: #000000) {
      $shadow: 0 0 0 $colour; // doesn't do anything but I couldn't work out how to create a blank string and maintain commas
      @for $i from 0 through $width {
          $shadow: $shadow,
          -$i + px -$width + px 0 $colour,
          $i + px -$width + px 0 $colour,
          -$i + px $width + px 0 $colour,
          $i + px $width + px 0 $colour,
          -$width + px -$i + px 0 $colour,
          $width + px -$i + px 0 $colour,
          -$width + px $i + px 0 $colour,
          $width + px $i + px 0 $colour,
      }
      text-shadow: $shadow;
}

1
এই মিশ্রণটি আমার পক্ষে কাজ করে না তবে এটি একটি করেছে: gist.github.com/navggns/2984123
আকির্ক

0

একাধিক পাঠ্য-ছায়া ..
এরকম কিছু:

var steps = 10,
    i,
    R = 0.6,
    x,
    y,
    theStyle = '1vw 1vw 3vw #005dab';
for (i = -steps; i <= steps; i += 1) {
    x = (i / steps) / 2;
    y = Math.sqrt(Math.pow(R, 2) - Math.pow(x, 2));
    theStyle = theStyle + ',' + x.toString() + 'vw ' + y.toString() + 'vw 0 #005dab';
    theStyle = theStyle + ',' + x.toString() + 'vw -' + y.toString() + 'vw 0 #005dab';
    theStyle = theStyle + ',' + y.toString() + 'vw ' + x.toString() + 'vw 0 #005dab';
    theStyle = theStyle + ',-' + y.toString() + 'vw ' + x.toString() + 'vw 0 #005dab';
}
document.getElementsByTagName("H1")[0].setAttribute("style", "text-shadow:" + theStyle);

ডেমো: http://jsfiddle.net/punosound/gv6zs58m/


0

শ্যাডো জেনারেটর পাঠ্য

এখানে দুর্দান্ত উত্তর রয়েছে are এটি প্রদর্শিত হবে পাঠ্য-ছায়া সম্ভবত এটি করার সবচেয়ে নির্ভরযোগ্য উপায়। পাঠ্য-ছায়া দিয়ে কীভাবে এটি করা যায় সে সম্পর্কে আমি বিশদে যাব না কারণ অন্যরা ইতিমধ্যে এটি করে ফেলেছে তবে প্রাথমিক ধারণাটি আপনি পাঠ্যের উপাদানটির চারপাশে একাধিক পাঠ্য ছায়া তৈরি করেছেন। পাঠ্যের বাহ্যরেখা যত বড় হবে তত বেশি পাঠ্যের ছায়া আপনার প্রয়োজন।

জমা দেওয়া সমস্ত উত্তর (এই পোস্টিং হিসাবে) পাঠ্য-ছায়ার জন্য স্থির সমাধান সরবরাহ করে। আমি একটি ভিন্ন পন্থা নিয়েছি এবং এই জেএসফিডেল লিখেছি যা রূপরেখার রঙ, অস্পষ্টতা এবং প্রস্থের মানগুলিকে ইনপুট হিসাবে গ্রহণ করে এবং আপনার উপাদানটির জন্য উপযুক্ত পাঠ্য-ছায়া সম্পত্তি উত্পন্ন করে। খালি শূন্যস্থান পূরণ করুন, পূর্বরূপ দেখুন এবং CSS টি অনুলিপি করতে ক্লিক করুন এবং এটি আপনার স্টাইলশিটে আটকান।


অযথা পরিশিষ্ট

স্পষ্টতই, জেএসফিডেলের একটি লিঙ্ক অন্তর্ভুক্ত উত্তরগুলি পোস্ট করা যাবে না যতক্ষণ না সেগুলিতে কোড থাকে। আপনি চাইলে এই পরিশিষ্টটিকে সম্পূর্ণ উপেক্ষা করতে পারেন can এটি আমার ফিডল থেকে জাভাস্ক্রিপ্ট যা পাঠ্য-ছায়ার বৈশিষ্ট্য উত্পন্ন করে। দয়া করে মনে রাখবেন আপনি কি না আপনার নিজের কাজে এই কোড বাস্তবায়ন করা প্রয়োজন:

function computeStyle() {
    var width = document.querySelector('#outline-width').value;
  width = (width === '') ? 0 : Number.parseFloat(width);
  var blur = document.querySelector('#outline-blur').value;
  blur = (blur === '') ? 0 : Number.parseFloat(blur);
  var color = document.querySelector('#outline-color').value;
  if (width < 1 || color === '') {
    document.querySelector('.css-property').innerText = '';
    return;
  }
    var style = 'text-shadow: ';
  var indent = false;
    for (var i = -1 * width; i <= width; ++i) {
    for (var j = -1 * width; j <= width; ++j) {
        if (! (i === 0 && j === 0 && blur === 0)) {
        var indentation = (indent) ? '\u00a0\u00a0\u00a0\u00a0' : '';
            style += indentation + i + "px " + j + "px " + blur + "px " + color + ',\n';
        indent = true;
      }
    }
  }
  style = style.substring(0, style.length - 2) + '\n;';
  document.querySelector('.css-property').innerText = style;

  var exampleBackground = document.querySelector('#example-bg');
  var exampleText = document.querySelector('#example-text');
  exampleBackground.style.backgroundColor = getOppositeColor(color);
  exampleText.style.color = getOppositeColor(color);
  var textShadow = style.replace(/text-shadow: /, '').replace(/\n/g, '').replace(/.$/, '').replace(/\u00a0\u00a0\u00a0\u00a0/g, '');
  exampleText.style.textShadow = textShadow;
}

-2

আমারও এই সমস্যাটি ছিল, এবং এটি text-shadowবিকল্প নয় কারণ কর্ণগুলি দেখতে খারাপ লাগবে (যদি না আমার অনেকগুলি ছায়া না থাকে), এবং আমি কোনও ঝাপসা চাই না, সুতরাং আমার একমাত্র অন্য বিকল্পটি নিম্নলিখিতটি করা ছিল: 2 ডিভ, এবং ব্যাকগ্রাউন্ড ডিভের জন্য এটি লাগান -webkit-text-stroke, যা আপনার পছন্দমতো আকারের বাহ্যরেখার জন্য অনুমতি দেয়।

div {
  font-size: 200px;
  position: absolute;
  white-space: nowrap;
}

.front {
 color: blue;
}

.outline {
  -webkit-text-stroke: 30px red;
  user-select: none;
}
<div class="outline">
 outline text
</div>

<div class="front">
 outline text
</div>  

এটি ব্যবহার করে, আমি একটি আউট লাইন অর্জন করতে সক্ষম হয়েছি , কারণ stroke-widthপদ্ধতিটি কোনও বিকল্প ছিল না যদি আপনি চান যে আপনার পাঠ্যটি একটি বৃহত আকারের বাহ্যরেখার সাথে সুশৃঙ্খল থাকে (কারণ stroke-widthবাহ্যরেখার সাথে লেটারিংয়ের অভ্যন্তর শুরু হবে যা প্রস্থের পরে এটি অক্ষম করে তোলে অক্ষরের চেয়ে বড় হয়।

দ্রষ্টব্য: আমার এত চর্বিযুক্ত রূপরেখার প্রয়োজনীয়তার কারণটি হ'ল আমি "গুগল ম্যাপস" এ রাস্তার লেবেলগুলি অনুকরণ করছিলাম এবং আমি পাঠ্যের চারপাশে একটি চর্বিযুক্ত সাদা হলো চাই। এই সমাধানটি আমার পক্ষে নিখুঁতভাবে কাজ করেছিল।

এই সমাধানটি দেখায় এমন একটি বেহালতা এখানে

এখানে চিত্র বর্ণনা লিখুন


-15

এখানে সিএসএস ফাইল আশা করি আপনি যা চান তা পাবেন

/* ----- Logo ----- */

#logo a {
    background-image:url('../images/wflogo.png'); 
    min-height:0;
    height:40px;
    }
* html #logo a {/* IE6 png Support */
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/wflogo.png", sizingMethod="crop");
}

/* ----- Backgrounds ----- */
html{
    background-image:none;  background-color:#336699;
}
#logo{
    background-image:none;  background-color:#6699cc;
}
#container, html.embed{
    background-color:#FFFFFF;
}
.safari .wufoo input.file{
    background:none;
    border:none;
}

.wufoo li.focused{
    background-color:#FFF7C0;
}
.wufoo .instruct{
    background-color:#F5F5F5;
}

/* ----- Borders ----- */
#container{
    border:0 solid #cccccc;
}
.wufoo .info, .wufoo .paging-context{
    border-bottom:1px dotted #CCCCCC;
}
.wufoo .section h3, .wufoo .captcha, #payment .paging-context{
    border-top:1px dotted #CCCCCC;
}
.wufoo input.text, .wufoo textarea.textarea{

}
.wufoo .instruct{
    border:1px solid #E6E6E6;
}
.fixed .info{
    border-bottom:none;
}
.wufoo li.section.scrollText{
    border-color:#dedede;
}

/* ----- Typography ----- */
.wufoo .info h2{
    font-size:160%;
    font-family:inherit;
    font-style:normal;
    font-weight:normal;
    color:#000000;
}
.wufoo .info div{
    font-size:95%;
    font-family:inherit;
    font-style:normal;
    font-weight:normal;
    color:#444444;
}
.wufoo .section h3{
    font-size:110%;
    font-family:inherit;
    font-style:normal;
    font-weight:normal;
    color:#000000;
}
.wufoo .section div{
    font-size:85%;
    font-family:inherit;
    font-style:normal;
    font-weight:normal;
    color:#444444;
}

.wufoo label.desc, .wufoo legend.desc{
    font-size:95%;
    font-family:inherit;
    font-style:normal;
    font-weight:bold;
    color:#444444;
}

.wufoo label.choice{
    font-size:100%;
    font-family:inherit;
    font-style:normal;
    font-weight:normal;
    color:#444444;
}
.wufoo input.text, .wufoo textarea.textarea, .wufoo input.file, .wufoo select.select{
    font-style:normal;
    font-weight:normal;
    color:#333333;
    font-size:100%;
}
{* Custom Fonts Break Dropdown Selection in IE *}
.wufoo input.text, .wufoo textarea.textarea, .wufoo input.file{ 
    font-family:inherit;
}


.wufoo li div, .wufoo li span, .wufoo li div label, .wufoo li span label{
    font-family:inherit;
    color:#444444;
}
.safari .wufoo input.file{ /* Webkit */
    font-size:100%;
    font-family:inherit;
    color:#444444;
}
.wufoo .instruct small{
    font-size:80%;
    font-family:inherit;
    font-style:normal;
    font-weight:normal;
    color:#444444;
}

.altInstruct small, li.leftHalf small, li.rightHalf small,
li.leftThird small, li.middleThird small, li.rightThird small,
.iphone small{
    color:#444444 !important;
}

/* ----- Button Styles ----- */

.wufoo input.btTxt{

}

/* ----- Highlight Styles ----- */

.wufoo li.focused label.desc, .wufoo li.focused legend.desc,
.wufoo li.focused div, .wufoo li.focused span, .wufoo li.focused div label, .wufoo li.focused span label,
.safari .wufoo li.focused input.file{ 
    color:#000000;
}

/* ----- Confirmation ----- */

.confirm h2{
    font-family:inherit;
    color:#444444;
}
a.powertiny b, a.powertiny em{
    color:#1a1a1a !important;
}
.embed a.powertiny b, .embed a.powertiny em{
    color:#1a1a1a !important;
}

/* ----- Pagination ----- */

.pgStyle1 var, .pgStyle2 var, .pgStyle2 em, .page1 .pgStyle2 var, .pgStyle1 b, .wufoo .buttons .marker{
    font-family:inherit;
    color:#444444;
}
.pgStyle1 var, .pgStyle2 td{
    border:1px solid #cccccc;
}
.pgStyle1 .done var{
    background:#cccccc;
}

.pgStyle1 .selected var, .pgStyle2 var, .pgStyle2 var em{
    background:#FFF7C0;
    color:#000000;
}
.pgStyle1 .selected var{
    border:1px solid #e6dead;
}


/* Likert Backgrounds */

.likert table{
    background-color:#FFFFFF;
}
.likert thead td, .likert thead th{
    background-color:#e6e6e6;
}
.likert tbody tr.alt td, .likert tbody tr.alt th{
    background-color:#f5f5f5;
}

/* Likert Borders */

.likert table, .likert th, .likert td{
    border-color:#dedede;
}
.likert td{
    border-left:1px solid #cccccc;
}

/* Likert Typography */

.likert caption, .likert thead td, .likert tbody th label{
    color:#444444;
    font-family:inherit;
}
.likert tbody td label{
    color:#575757;
    font-family:inherit;
}
.likert caption, .likert tbody th label{
    font-size:95%;
}

/* Likert Hover */

.likert tbody tr:hover td, .likert tbody tr:hover th, .likert tbody tr:hover label{
    background-color:#FFF7C0;
    color:#000000;
}
.likert tbody tr:hover td{
    border-left:1px solid #ccc69a;
}

/* ----- Running Total ----- */

.wufoo #lola{
    background:#e6e6e6;
}
.wufoo #lola tbody td{
    border-bottom:1px solid #cccccc;
}
.wufoo #lola{
    font-family:inherit;
    color:#444444;
}
.wufoo #lola tfoot th{
    color:#696969;
}

/* ----- Report Styles ----- */

.wufoo .wfo_graph h3{
    font-size:95%;
    font-family:inherit;
    color:#444444;
}
.wfo_txt, .wfo_graph h4{
    color:#444444;
}
.wufoo .footer h4{
    color:#000000;
}
.wufoo .footer span{
    color:#444444;
}

/* ----- Number Widget ----- */

.wfo_number{
    background-color:#f5f5f5;
    border-color:#dedede;
}
.wfo_number strong, .wfo_number em{
    color:#000000;
}

/* ----- Chart Widget Border and Background Colors ----- */

#widget, #widget body{
    background:#FFFFFF;
}
.fcNav a.show{
    background-color:#FFFFFF;
    border-color:#cccccc;
}
.fc table{
    border-left:1px solid #dedede;  
}
.fc thead th, .fc .more th{
    background-color:#dedede !important;
    border-right:1px solid #cccccc !important;
}
.fc tbody td, .fc tbody th, .fc tfoot th, .fc tfoot td{
    background-color:#FFFFFF;
    border-right:1px solid #cccccc;
    border-bottom:1px solid #dedede;
}
.fc tbody tr.alt td, .fc tbody tr.alt th, .fc tbody td.alt{
    background-color:#f5f5f5;
}

/* ----- Chart Widget Typography Colors ----- */

.fc caption, .fcNav, .fcNav a{
    color:#444444;
}
.fc tfoot, 
.fc thead th,
.fc tbody th div, 
.fc tbody td.count, .fc .cards tbody td a, .fc td.percent var,
.fc .timestamp span{
    color:#000000;
}
.fc .indent .count{
    color:#4b4b4b;
}
.fc .cards tbody td a span{
    color:#7d7d7d;
}

/* ----- Chart Widget Hover Colors ----- */

.fc tbody tr:hover td, .fc tbody tr:hover th,
.fc tfoot tr:hover td, .fc tfoot tr:hover th{
    background-color:#FFF7C0;
}
.fc tbody tr:hover th div, .fc tbody tr:hover td, .fc tbody tr:hover var,
.fc tfoot tr:hover th div, .fc tfoot tr:hover td, .fc tfoot tr:hover var{
    color:#000000;
}

/* ----- Payment Summary ----- */

.invoice thead th, 
.invoice tbody th, .invoice tbody td,
.invoice tfoot th,
.invoice .total,
.invoice tfoot .last th, .invoice tfoot .last td,
.invoice tfoot th, .invoice tfoot td{
    border-color:#dedede;
}
.invoice thead th, .wufoo .checkNotice{
    background:#f5f5f5;
}
.invoice th, .invoice td{
    color:#000000;
}
#ppSection, #ccSection{
    border-bottom:1px dotted #CCCCCC;
}
#shipSection, #invoiceSection{
    border-top:1px dotted #CCCCCC;
}

/* Drop Shadows */

/* - - - Local Fonts - - - */

/* - - - Responsive - - - */

@media only screen and (max-width: 480px) {
    html{
        background-color:#FFFFFF;
    }
    a.powertiny b, a.powertin em{
        color:#1a1a1a !important;
    }
}

/* - - - Custom Theme - - - */

9
দয়া করে আপনার সমাধানটি বিস্তারিতভাবে বর্ণনা করুন। এটি যদি কাজ করেও, কীভাবে এটি ব্যবহার করব তা আমাদের কাছে কোনও ক্লু নেই।
প্যাট্রিক হফম্যান

3
আমি আশা করি সঠিক সমাধানগুলিতে 200 লাইনের CSS ব্যবহার করতে হবে না।
দারদব

2
এই উত্তরটি আক্ষরিক অর্থে কোনও ধারণা রাখে না।
সুপারলুমিনারি
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.