সিএসএস সহ অভ্যন্তরীণ পাঠ্য ছায়া

Question

আমি বর্তমানে সিএসএস 3 এর সাথে ঘুরে বেড়াচ্ছি এবং এর মতো একটি কালো প্রভাব অর্জন করার চেষ্টা করছি (কালো ঝাপসা করে অভ্যন্তরীণ ছায়া):

তবে আমি পাঠ্যের অভ্যন্তরে পাঠ্য ছায়া তৈরির উপায় খুঁজে পাচ্ছি না । আমি এখনও আশ্চর্য হয়েছি কিনা এটি এখনও সম্ভব কারণ বাক্স-ছায়া উপাদান এইভাবে ভিতরে ছায়া সরবরাহ করতে সক্ষম:

box-shadow: inset 0px -5px 10px 0px rgba(0, 0, 0, 0.5);

কোন ধারনা?

Comments

আপনি যদি কিছু অপটিক্যাল বিভ্রমের জন্য প্রস্তুত না হন তবে এর জন্য কোনও উত্তর নেই ...

— আরিয়া কার্টার-ওয়েয়ার

Answer 1

একটি ছোট্ট কৌতুক আমি ব্যবহার আবিষ্কৃত এর :beforeএবং :afterসিউডো-উপাদানের:

.depth {
    color: black;
    position: relative;
}
.depth:before, .depth:after {
    content: attr(title);
    color: rgba(255,255,255,.1);
    position: absolute;
}
.depth:before { top: 1px; left: 1px }
.depth:after  { top: 2px; left: 2px }

শিরোনামের বৈশিষ্ট্যটি সামগ্রীর মতো হওয়া দরকার। ডেমো: http://dabblet.com/gist/1609945

Comments

নিস! ক্রিয়েটিভ :) তবুও ফটোশপ-এস্কু হিসাবে আমি এটির মতো চাই না। অফসেটে 5px অভ্যন্তরীণ ছায়া অর্জনের জন্য আপনি উপরের / বাম মানগুলিকে প্রতিটি 5px এ সেট করতে পারেন তবে চিঠিটি অন্য প্রান্তে ফাঁস হয়ে যায় - যা 1px এবং 2px জন্য দুর্দান্ত দেখায় তবে উচ্চতর মানের জন্য অদ্ভুত।

— এরিকটিউবার্ট

হ্যাঁ, এটি কেবল নীচে সাদা কিছুটা ইঙ্গিত সহ ভাল দেখাচ্ছে good 2px এর বেশি যেকোন চেহারা চেহারাটিকে ধ্বংস করে।

— ওয়েব_ডিজাইনার

অসাধারণ! আপনি এটি সাদা বর্ণের জন্যও অস্বচ্ছটিকে .9 এ পাম্প করে, বা .1 এ अस्पष्टতা বজায় রেখে রঙগুলি বিপরীত করে বেভেল এজগুলি তৈরি করতে ব্যবহার করতে পারেন। (+1)

— জনবি

দুর্দান্ত সমাধান। তবে, ফে টেক্সট গ্রেডিয়েন্টগুলির সাথে একত্রিত হতে ব্যর্থ হয়; খুব খারাপ ধারণা great দুর্দান্ত পাঠ্যের প্রভাবের জন্য আমাদের কয়েক বছর বা তার জন্য সিএসএস 4 অপেক্ষা করতে হবে

— মাইকেল ট্রাউ

ক্রোমে এটি দুর্দান্ত, কোন চিন্তা. পিএস লেথার এফেক্ট বিজি-তে সুন্দরভাবে কাজ করে, দেখতে ব্র্যান্ডিং স্ট্যাম্পের মতো লাগে।

— হ্যানকক

Answer 2

আপনি পাঠ্য-ছায়া ব্যবহার করে এটি করতে সক্ষম হবেন, এরকম কিছু সংক্ষেপ:

.inner_text_shadow
{
    text-shadow: 1px 1px white, -1px -1px #444;
}

এখানে একটি উদাহরণ: http://jsfiddle.net/ekDNq/

Comments

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

— মায়াজান

মনে রাখবেন আপনি এটি করে ফন্টকে আরও মোটা করে তুলছেন। ছোট এবং মাঝারি আকারের ফন্টগুলির জন্য, এটি আপনি চান নাও হতে পারে।

— জোনাটান লিট্কে

Answer 3

এখানে আমার সেরা চেষ্টা:

    .inner_shadow {
    color:transparent;
    background-color:white;
    text-shadow: 0 0 20px rgba(198,28,39,0.8), 0 0 0 black;
    font-family:'ProclamateHeavy';  // Or whatever floats your boat
    font-size:150px;
    }

   
    <span class="inner_shadow">Inner Shadow</span>
   

সমস্যাটি কীভাবে প্রান্তের চারপাশে রক্তাক্ত ছায়া ক্লিপ করবেন !!! আমি ব্যাকগ্রাউন্ড-ক্লিপ: টেক্সট ব্যবহার করে ওয়েবকিটটিতে চেষ্টা করেছি তবে ওয়েবকিটটি ব্যাকগ্রাউন্ডের ওপরে ছায়াকে রেন্ডার করে যাতে এটি কাজ করে না।

সিএসএস দিয়ে একটি পাঠ্য মুখোশ তৈরি করছেন?

শীর্ষ মাস্ক স্তর ব্যতীত পাঠ্যে সত্যিকারের অভ্যন্তরীণ ছায়া তৈরি করা অসম্ভব।

সম্ভবত কারও পরামর্শ দেওয়া উচিত যে ডাব্লু 3 সি ব্যাকগ্রাউন্ড-ক্লিপ যুক্ত করুন: বিপরীত পাঠ্য , এটি পাঠ্যের অভ্যন্তরে ব্যাকগ্রাউন্ড কাটার পরিবর্তে ব্যাকগ্রাউন্ডের মধ্য দিয়ে একটি মুখোশ কাটবে।

হয় বা তা পাঠ্য-ছায়াকে ব্যাকগ্রাউন্ডের অংশ হিসাবে রেন্ডার করুন এবং এটি ব্যাকগ্রাউন্ড-ক্লিপ: পাঠ্য সহ ক্লিপ করুন।

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

আমি পাঠ্য-স্ট্রোকটি ব্যবহার করার চেষ্টা করেছি: 20px সাদা; এই উপাদান এবং এটির উপরে একটি উভয় ক্ষেত্রে, তবে পাঠ্য স্ট্রোকটি পাশাপাশি যায়।

বিকল্প পদ্ধতি

যেহেতু বর্তমানে সিএসএসে ইনভার্টেড-টেক্সট মাস্ক করার কোনও উপায় নেই, আপনি এসভিজি বা ক্যানভাসে ফিরে যেতে পারেন এবং আপনার প্রভাব পেতে তিনটি স্তর সহ একটি পাঠ্য প্রতিস্থাপন চিত্র তৈরি করতে পারেন।

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

ক্যানভাসের মাধ্যমে এটি অর্জন করা আরও শক্ত হবে কারণ এসভিজির মতো স্তরগুলির সাথে এটির ডোম নেই।

আপনি সার্ভার-সাইড, বা ব্রাউজারে জাভাস্ক্রিপ্ট টেক্সট-রিপ্লেসমেন্ট পদ্ধতি হিসাবে এসভিজি উত্পাদন করতে পারেন।

আরও পড়া:

এসভিজি বনাম ক্যানভাস:

http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/

ক্লিপিং এবং এসভিজি পাঠ্য সহ মাস্কিং:

http://www.w3.org/TR/SVG/text.html#TextElement

Comments

আমি আপনার সর্বোত্তম চেষ্টা সম্পর্কে একটি বিস্তারিত ব্যাখ্যা পোস্ট করেছি , উদাহরণ সহ। এটা দেখ!

— আলবা মেন্ডেজ

এর উদাহরণটি অত্যন্ত চরমভাবে নেওয়া হয়েছে ।

— আলবা মেন্ডিজ

আপনার উদাহরণে একটি বাহ্যিক ছায়া রয়েছে

— এলেক্সখ

Answer 4

^{Kendo451 এর উত্তরে সিএসএসের আরও সুনির্দিষ্ট ব্যাখ্যা ।}

অভিনব-হ্যাকি অভ্যন্তরীণ ছায়া মায়া পাওয়ার আরও একটি উপায় আছে,
যা আমি তিনটি সহজ পদক্ষেপে ব্যাখ্যা করব। বলুন আমাদের এই HTML আছে:

<h1>Get this</h1>

এবং এই সিএসএস:

h1 {
  color: black;
  background-color: #cc8100;
}

ধাপ 1

আসুন পাঠ্যটি স্বচ্ছ করে শুরু করুন:

h1 {
  color: transparent;
  background-color: #cc8100;
}

ধাপ ২

এখন, আমরা সেই ব্যাকগ্রাউন্ডটিকে পাঠ্যের আকারে ক্রপ করব :

h1 {
  color: transparent;
  background-color: #cc8100;
  background-clip: text;
}

ধাপ 3

এখন, যাদু: আমরা একটি অস্পষ্টতা text-shadowরাখব, যা পটভূমির সামনে থাকবে , এইভাবে একটি অভ্যন্তরীণ ছায়ার ছাপ দেবে!

h1 {
  color: transparent;
  background-color: #cc8100;
  background-clip: text;
  text-shadow: 0px 2px 5px #f9c800;
}

দেখুন চূড়ান্ত ফলাফল ।

Downsides?

• কেবল ওয়েবকিটে কাজ করে ( background-clipহতে পারে না)text )।
• একাধিক ছায়া? এমনকি ভাবেন না।
• আপনিও বাইরের আভা পাবেন low

Comments

"একাধিক ছায়া? এমনকি ভাববেন না?" কি হবে text-shadow: 1px 1px 1px #000, 3px 3px 5px blue;?

— মরফিয়াস

@ মরফিয়াস এই পদ্ধতির অন্যতম উত্সাহ হ'ল আপনি পাঠ্যের একাধিক ছায়া প্রয়োগ করতে পারবেন না।

— আলবা মেন্ডিজ 14

এই উদাহরণের আকার এবং উজ্জ্বলতা অন্যকে দেখতে অসুবিধা করছে। আপনি সম্ভবত কোড স্নিপেটে এগুলি স্থানান্তর করতে পারেন? ধন্যবাদ!

— জোশ হাবদাস

Answer 5

মার্কআপে অবস্থিত মোড়কের মোড়ক বা সদৃশ সামগ্রীর প্রয়োজন ছাড়াই একটি দুর্দান্ত উদাহরণ :

:root {
  background: #f2f2f2;
}
h1 {
  background-color: #565656;
  font: bold 48px 'Futura';
  color: transparent;
  text-shadow: 0px 2px 3px rgba(255, 255, 255, 0.8);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
}

<center>
  <h1>Text With Inner Shadow</h1>
</center>

অন্ধকার ব্যাকগ্রাউন্ডেও দেখতে দুর্দান্ত দেখাচ্ছে:

:root {
  --gunmetal-gray: #2a3439;
  background: var(--gunmetal-gray);
}

h1[itemprop="headline"] {
  font-family: 'Futura';
  font-size: 48px;
  padding-bottom: 0.35rem;
  font-variant-caps: all-small-caps;
  background-color: var(--gunmetal-gray);
  color: transparent;
  text-shadow: 0px 2px 3px rgba(255, 255, 255, 0.1);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  filter: brightness(3);
}

<center>
  <h1 itemprop="headline">Text With Inner Shadow</h1>
</center>

এবং আমার লিঙ্ক এবং এমই 2 লিঙ্ক

Comments

সহজ এবং মার্কআপে কোনও সমন্বয় প্রয়োজন হয় না। মহান কাজ!

— জোশ হাবদাস

Answer 6

আপনি এই ধরনের করতে পারেন। দুর্ভাগ্যক্রমে পাঠ্য-ছায়ায় কোনও ইনসেট ব্যবহার করার কোনও উপায় নেই তবে আপনি রঙ এবং অবস্থানের সাথে এটি জাল করতে পারেন। ডানদিকে নীচের দিকে ঝাপসা নিন এবং উপরের ডানদিকে ছায়ার ব্যবস্থা করুন। এর মতো কিছু কৌশলটি করতে পারে:

background-color:#D7CFBA;
color:#38373D;
font-weight:bold;
text-shadow:1px 1px 0 #FFFFFF;

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

Comments

আমি যা খুঁজছি তা আসলে নয়। আপনার প্রস্তাবের প্রভাব আকর্ষণীয় তবে আমি পোস্ট করা উদাহরণ থেকে অনেক দূরে।

— এরিকটিউবার্ট

তারপরে সে ক্ষেত্রে কোনও উত্তর নেই, CSS3 এর সাথে নয়। দুঃখিত আমি সাহায্য করতে পারি না।

— হলস্ক

এই উত্তরেbackground-clip প্রদর্শিত হিসাবে ইনসেট ছায়া গো ব্যবহার করা সম্ভব ।

— জোশ হাবদাস

Answer 7

একাধিক ছায়া বা এর মতো অভিনব কোনও কিছুর প্রয়োজন নেই, আপনাকে কেবল নেতিবাচক y- অক্ষের মধ্যে আপনার ছায়াটি অফসেট করতে হবে।

হালকা পটভূমিতে গা dark় পাঠ্যের জন্য:

text-shadow: 0px -1px 0px rgba(0, 0, 0, .75);

যদি আপনার গা dark় ব্যাকগ্রাউন্ড থাকে তবে আপনি রঙ এবং ওয়াই-পজিশনটি সহজেই উল্টাতে পারেন:

text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75);

প্রভাবটি ঠিকমতো পেতে rgba মান, অস্বচ্ছতা এবং অস্পষ্টতা নিয়ে ঘুরে দেখুন। এটি আপনার রঙিন ফন্ট এবং পটভূমির উপর নির্ভর করবে এবং ফন্টটি তত বেশি হবে the

Comments

এখনও কেবল একটি অপটিক্যাল মায়া, কোন আসল অভ্যন্তরীণ ছায়া।

— এরিকটিউবার্ট

... সব ছায়া একটি অপটিক্যাল মায়া হয় না?

— চার্লি শ্লিয়েসার

আপনি কৃপিত @ ইটিউবার্ট ... সত্যিকার অর্থে

— জ্যামি হাবার

Answer 8

একটি পরিবর্তনের এই ছোট রত্ন চেষ্টা করুন:

text-shadow:0 1px 1px rgba(255, 255, 255, 0.5);

আমি সাধারণত একটি চ্যালেঞ্জ হিসাবে "উত্তর নেই" নিতে

Comments

এটি ফন্টের নীচে একটি সাদা রূপরেখা তৈরি করে তবে আমি কালো ঝাপসা করে অভ্যন্তরীণ ছায়া খুঁজছিলাম ।

— এরিকটিউবার্ট

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

— কোরি শায়ার্স

Answer 9

আমি প্রস্তাবিত অনেক সমাধান দেখেছি, তবে আমি যেটা প্রত্যাশা করছিলাম তা তেমন কিছুই ছিল না।

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

(বিটিডব্লিউ, টেক্সট এবং স্টাইলিং একটি ডুপ থ্রেডের ওপির উপর ভিত্তি করে )

Answer 10

আমার কয়েকটি উদাহরণ রয়েছে যেখানে আমার পাঠ্যের অভ্যন্তরীণ ছায়াগুলি দরকার ছিল এবং নিম্নলিখিতগুলি আমার পক্ষে ভালভাবে কাজ করেছে:

.inner {
    color: rgba(252, 195, 67, 0.8);
    font-size: 48px;
    text-shadow: 1px 2px 3px #fff, 0 0 0 #000;
}

এটি পাঠ্যের অস্বচ্ছতাটিকে 80% এ সেট করে এবং তারপরে দুটি ছায়া তৈরি করে:

• প্রথমটি হ'ল একটি সাদা ছায়া (মনে করে পাঠ্যটি একটি সাদা পটভূমিতে রয়েছে) অফসেটটি বাম দিক থেকে 1px এবং উপরে থেকে 2px, অস্পষ্ট 3px।
• দ্বিতীয়টি একটি কালো ছায়া যা which০% অস্বচ্ছ লেখার মাধ্যমে দৃশ্যমান তবে প্রথম ছায়ার মাধ্যমে নয়, যার অর্থ এটি কেবল পাঠ্য অক্ষরের ভিতরে দৃশ্যমান যেখানে প্রথম ছায়াটি স্থানচ্যুত করা হয়েছে (বাম দিক থেকে 1px এবং উপরে থেকে 2px)। এই দৃশ্যমান ছায়ার অস্পষ্টতা পরিবর্তন করতে, প্রথম স্তর ছায়ার জন্য অস্পষ্ট প্যারামিটারটি সংশোধন করুন।

আদেশ সহকারে

• এটি কেবল তখনই কাজ করবে যদি পাঠ্যের পছন্দসই রঙটি 100% অস্বচ্ছতা ছাড়াই অর্জন করা যায়।
• এটি কেবল তখনই কাজ করবে যদি পটভূমির রঙটি শক্ত হয় (সুতরাং, এটি প্রশ্নকারীর নির্দিষ্ট উদাহরণের জন্য কাজ করবে না যেখানে পাঠ্যটি কোনও টেক্সচারযুক্ত ব্যাকগ্রাউন্ডে বসে)।

Answer 11

এটি কীভাবে করবেন সে সম্পর্কে এখানে একটি লিঙ্ক কথা বলা হচ্ছে, এটি আপনি যা খুঁজছেন তা হওয়া উচিত:

http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/

Answer 12

দেখে মনে হচ্ছে এটি কাজ করছে: http://tips4php.net/2010/08/nice-css-text-shadow-effects/

তিনি এখানে বর্ণিত হিসাবে প্রভাবটি অর্জন করতে একাধিক ছায়া ব্যবহার করছেন: http://www.w3.org/Style/Example/007/text-shadow# একাধিক

Answer 13

দেখে মনে হচ্ছে সবাই এর উত্তর পেয়েছে। আমি @ ওয়েব_ডিজাইনারের কাছ থেকে সমাধানটি পছন্দ করি। তবে এটি এর মতো জটিল হওয়ার দরকার নেই এবং আপনি এখনও যে ঘোলাটে অভ্যন্তরীন ছায়া সন্ধান করছেন তা পেতে পারেন।

http://dabblet.com/gist/3877605

.depth {
    display: block;
    padding: 50px;
    color: black;
    font: bold 7em Arial, sans-serif;
    position: relative;
 }

.depth:before {
    content: attr(title);
    color: transparent;
    position: absolute;
    text-shadow: 2px 2px 4px rgba(255,255,255,0.3);
}

Answer 14

এটি সহজেই আমি দেখেছি সেরা উদাহরণ। http://lab.simurai.com/carveme/

উত্সটি গিথুব https://github.com/simurai/lab/tree/gh-pages/carveme এ রয়েছে

Comments

আপনার লিঙ্কগুলি মারা গেছে

— 10 টি উত্তর

Answer 15

উপর নির্মাণের :before :afterweb_designer দ্বারা কৌশল, এখানে এমন কিছু বিষয় যা আপনার চেহারা কাছাকাছি আসে:

প্রথমে আপনার পাঠ্যটিকে অভ্যন্তরীণ ছায়ার রঙ করুন (ওপির ক্ষেত্রে কালো-ইশ)।

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

http://dabblet.com/gist/2499892

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

Answer 16

ব্যাকগ্রাউন্ড-ক্লিপ CSS3 বৈশিষ্ট্য ব্যবহার করে সত্য ইনসেট পাঠ্য ছায়ার জন্য দুর্দান্ত সমাধান এখানে রয়েছে:

.insetText {
    background-color: #666666;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}

Comments

সেই লিঙ্কটি এখন ভেঙে গেছে বলে মনে হচ্ছে।

— নিক হোয়াইট

ওয়েবকিটে দেখতে দেখতে দুর্দান্ত, তবে ফায়ারফক্স 18-এ এখনও যেতে হবে না

— gmeben

এটির সীমিত সমর্থন থাকতে পারে তবে সত্যই এটি ইনসেট হিসাবে আমি এটিকে ভালবাসি।

— জুলিয়ান কে

Answer 17

এখানের কিছু ধারণাগুলি দেখার পরে আমি এখানে কী নিয়ে এসেছি। মূল ধারণাটি হ'ল পাঠ্যের রঙটি উভয় ছায়ায় মিশ্রিত হয়েছে এবং নোট করুন যে এটি ধূসর পটভূমিতে ব্যবহৃত হচ্ছে (অন্যথায় সাদাটি ভাল দেখাবে না)।

.inset {
    color: rgba(0,0,0, 0.6);
    text-shadow: 1px 1px 1px #fff, 0 0 1px rgba(0,0,0,0.6);
}

Answer 18

ইনসেট পাঠ্য ছায়ার জন্য এই উদাহরণটি ব্যবহার করে দেখুন। এইচটিএমএল এখানে

<h1 class="inset-text-shadow">Inset text shadow trick</h1>

এবং সিএসএস

body {
    background: #f8f8f8;
}
h1 {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 6em;
    line-height: 1em;
}
.inset-text-shadow {
    /* Shadows are visible under slightly transparent text color */
    color: rgba(0,0,0,0.6);
    text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);

}

Demo on Jsfiddle

Answer 19

text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);

বক্স ছায়ার জন্য:

-webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    7px 7px 5px rgba(50, 50, 50, 0.75);
box-shadow:         7px 7px 5px rgba(50, 50, 50, 0.75);

আপনি অনলাইন পাঠ্য এবং বাক্সের ছায়া দেখতে পারেন: অনলাইন পাঠ্য এবং বাক্সের ছায়া

আরও উদাহরণের জন্য আপনি এই ঠিকানায় যেতে পারেন: আরও উদাহরণ কোড ফ্রেইক্লাপ

Answer 20

এটি অর্জনের জন্য আরও অনেক সহজ উপায় রয়েছে

.inner{color: red; text-shadow: 0 -1px 0 #666;} // #666 is the color of the inner shadow

ভিওলা

Answer 21

ছোট-ইশ বোতামগুলিতে সাধারণ আকারের পাঠ্যের জন্য

ছোট টেক্সট লেটারিংয়ের সাথে ছোট বোতামগুলিতে ব্যবহৃত হলে আমি তাদের কার্যকারিতা হারাতে এই পৃষ্ঠায় অন্যান্য ধারণা পেয়েছি found এই উত্তরটি রবার্টপিটের উত্তরে প্রসারিত হয় ।

এখানে ছোটখাটো ঝাপটা:

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

$('button').click(function(){
  $('button').removeClass('btnActive');
  $(this).addClass('btnActive');
});

body{background:#666;}
.btnActive{
  border: 1px solid #aaa;
  border-top: 1px solid #333;
  border-left: 1px solid #333;
  color: #ecf0f8;
  background-color: #293d70;
  background-image: none;
  text-shadow: 1px 1px transparent, -1px -1px black;
  outline:none;
}

button{
  border: 1px solid #446;
  border-radius: 3px;
  color: white;
  background-color: #385499;
  background-image: linear-gradient(-180deg,##7d94cf,#1c294a 90%);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 12px;
  xxtext-shadow: 1px 1px 2px navy;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btnActive">Option One</button>
<button>Option Two</button>

বিঃদ্রঃ:

আমি রঙিন শেডগুলি সূক্ষ্ম করতে এই সাইটটি ব্যবহার করেছি ।

Answer 22

আমি এই সাইট থেকে এটি ব্যবহার করছি, এটি দেখতেও ভাল লাগছে। এটি দেখুন অভ্যন্তরীণ ছায়া

Comments

যে ব্যক্তি এটিকে ভোট দিয়েছিল, তিনি বলতে পারেন যে এটি কীভাবে বঞ্চিত হওয়ার যোগ্য। এই উত্তরটি যদি প্রশ্ন থেকে বিচ্যুত হয়? বা আপনি মনে করেন একজন স্প্যামার .. আপনি যদি ব্যাখ্যা করতে পারেন তবে আমি আমার উত্তরটি এখানে আপডেট করতে পারি

— vkGunasekaran

+1 ওয়েব_ডিজাইনার হিসাবে একই উত্তর তবে আরও ভাল ব্যাখ্যা করা হয়েছে। সম্ভবত ডাউনওয়টারটি আপনার উত্তরটি প্রাথমিকভাবে পোস্ট করা উত্তরের মত একই মতটি পছন্দ করে নি। কিন্তু এখানে আপনি যান। আমি শুধু আপনার জন্য :) এটা ক্ষতিপূরণ

— জুলে Colle,

স্রেফ ডাউনভোটেড। এটি কেবল একটি নকলই নয়, তবে এটি সমস্যার ব্যাখ্যা দেয় না বা কোনও স্নিপেট দেয় না, এটি কেবল একটি লিঙ্ক। এটি আমার মতে লেখকের ন্যূনতম প্রচেষ্টা দেখায়। আইএমএইচও, এবং এফটিআর।

— আলবা মেন্ডিজ