css - রং কালার নাম




গ্রেডিয়েন্ট পাঠ্যের রঙ (4)

আপনি সিএসএস linear-gradient এবং mix-blend-mode সংমিশ্রণটি ব্যবহার করে সেই প্রভাব অর্জন করতে পারেন।

এইচটিএমএল

<p>
    Enter your message here... 
    To be or not to be, 
    that is the question...
    maybe, I think, 
    I'm not sure
    wait, you're still reading this?
    Type a good message already!
</p>

সিএসএস

p {
    width: 300px;
    position: relative;
}

p::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, red, orange, yellow, green, blue, purple);
    mix-blend-mode: screen;
}

এটি যা করে তা হল সিউডো-এলিমেন্টের ::after অনুচ্ছেদে ::after একটি রৈখিক গ্রেডিয়েন্ট যুক্ত করা এবং এটি পুরো অনুচ্ছেদের উপাদানটি coverেকে দেওয়া cover তবে mix-blend-mode: screen গ্রেডিয়েন্ট কেবল সেই অংশে প্রদর্শিত হবে যেখানে পাঠ্য রয়েছে।

jsfiddle এটি দেখানোর জন্য এখানে একটি jsfiddle । আপনি যা চান তা অর্জন করতে কেবল linear-gradient মানগুলি সংশোধন করুন।

এখানে কোনও জেনারেটর রয়েছে, বা this পাঠ্য উত্পন্ন করার একটি সহজ উপায় তবে প্রতিটি অক্ষরই সংজ্ঞায়িত না করেই রয়েছে

সুতরাং এর মতো কিছু:

.rainbow {
  background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
<span class="rainbow">Rainbow text</span>

তবে রংধনু রঙের সাথে নয় বরং অন্যান্য রঙের সাথে উত্পন্ন করুন (উদাহরণস্বরূপ সাদা থেকে ধূসর / হালকা নীল গ্রেডিয়েন্ট ইত্যাদি) আমি এর সহজ সমাধান খুঁজে পাচ্ছি না। কোন সমাধান?


এই প্রভাবটি যেভাবে কাজ করে তা খুব সহজ। উপাদানটি একটি পটভূমি দেওয়া হয় যা গ্রেডিয়েন্ট। এটি দেওয়া রঙ এবং রঙ-স্টপ শতাংশের উপর নির্ভর করে এটি এক রঙ থেকে অন্য রঙে যায়।

উদাহরণস্বরূপ, রামধনু পাঠ্যের নমুনায় (নোট করুন যে আমি গ্রেডিয়েন্টকে মান সিনট্যাক্সে রূপান্তর করেছি):

  • গ্রেডিয়েন্টটি #f22 রঙে 0% শুরু হয় (এটি উপাদানটির বাম প্রান্ত)। প্রথম বর্ণটি সর্বদা 0% থেকে শুরু বলে ধরে নেওয়া হয় যদিও শতাংশটি স্পষ্টভাবে উল্লেখ করা হয়নি।
  • 0% থেকে 14.25% মধ্যে রঙটি #f22 থেকে #f2f ধীরে ধীরে #f22 হয়। পার্সেনেটেজটি 14.25 এ সেট করা হয়েছে কারণ সেখানে সাতটি রঙ পরিবর্তন হয়েছে এবং আমরা সমান বিভাজন খুঁজছি।
  • 14.25% (ধারক আকারের) এ উল্লিখিত গ্রেডিয়েন্ট অনুযায়ী রঙটি ঠিক #f2f হবে।
  • একইভাবে রঙগুলি স্টপ শতাংশের দ্বারা নির্দিষ্ট ব্যান্ডগুলির উপর নির্ভর করে এক থেকে অন্যটিতে পরিবর্তিত হয়। প্রতিটি ব্যান্ডের পদক্ষেপটি 14.25% হওয়া উচিত।

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

.rainbow {
  background-image: linear-gradient(to right, #f22, #f2f 14.25%, #22f 28.5%, #2ff 42.75%, #2f2 57%, #2f2 71.25%, #ff2 85.5%, #f22);
  color: transparent;
}
<span class="rainbow">Rainbow text</span>

যেহেতু গ্রেডিয়েন্টটি কেবলমাত্র পাঠ্যে প্রয়োগ করা দরকার এবং পুরো উপাদানটিতে নয়, তাই পাঠ্যের বাইরের অঞ্চলগুলি থেকে পটভূমিটি ক্লিপ করতে আমাদের ব্রাউজারকে নির্দেশ দেওয়া দরকার। background-clip: text সেট করে এটি করা হয়।

( দ্রষ্টব্য যে background-clip: text একটি পরীক্ষামূলক সম্পত্তি এবং এটি ব্যাপকভাবে সমর্থিত নয় ))

এখন আপনি যদি পাঠ্যের একটি সাধারণ 3 বর্ণের গ্রেডিয়েন্ট রাখতে চান (এটি লাল - কমলা - বাদামী থেকে বলুন), কেবলমাত্র রৈখিক-গ্রেডিয়েন্টের স্পেসিফিকেশনটি নীচে পরিবর্তন করতে হবে:

  • প্রথম প্যারামিটারটি গ্রেডিয়েন্টের দিক। যদি রঙটি বাম দিকে লাল এবং ডানদিকে বাদামী হয় তবে ডানদিকে দিকটি ব্যবহার করুন। যদি এটি ডানদিকে লাল এবং বাম দিকে বাদামী হয় তবে বাম দিকে দিক দিন।
  • পরবর্তী পদক্ষেপ হ'ল গ্রেডিয়েন্টের রং নির্ধারণ করা। যেহেতু আমাদের গ্রেডিয়েন্টটি বাম দিকে লাল হিসাবে শুরু হওয়া উচিত, কেবল প্রথম রঙ হিসাবে red নির্দিষ্ট করুন (শতাংশটি 0% বলে ধরে নেওয়া হয়)।
  • এখন, যেহেতু আমাদের দুটি বর্ণ পরিবর্তন হয়েছে (লাল - কমলা এবং কমলা - বাদামী), শতাংশ সমান বিভাজনের জন্য অবশ্যই 100/2 হিসাবে সেট করা উচিত। যদি সমান বিভাজন প্রয়োজন হয় না, আমরা আমাদের ইচ্ছামতো শতাংশ নির্ধারণ করতে পারি।
  • সুতরাং 50% এ রঙ orange হওয়া উচিত এবং তারপরে চূড়ান্ত রঙটি brown । চূড়ান্ত রঙের অবস্থানটি সর্বদা 100% হিসাবে ধরে নেওয়া হয়।

এইভাবে গ্রেডিয়েন্টের স্পেসিফিকেশনটি নিম্নরূপ পড়তে হবে:

background-image: linear-gradient(to right, red, orange 50%, brown).

যদি আমরা উপরে বর্ণিত পদ্ধতিটি ব্যবহার করে গ্রেডিয়েন্টগুলি গঠন করি এবং সেগুলিকে উপাদানটিতে প্রয়োগ করি তবে আমরা প্রয়োজনীয় প্রভাব পেতে পারি।

.red-orange-brown {
  background-image: linear-gradient(to right, red, orange 50%, brown);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
.green-yellowgreen-yellow-gold {
  background-image: linear-gradient(to right, green, yellowgreen 33%, yellow 66%, gold);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
<span class="red-orange-brown">Red to Orange to Brown</span>

<br>

<span class="green-yellowgreen-yellow-gold">Green to Yellow-green to Yellow to Gold</span>


body{ background:#3F5261; text-align:center; font-family:Arial; } 

h1 {
  font-size:3em;
  background: -webkit-linear-gradient(top, gold, white);
  background: linear-gradient(top, gold, white);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  position:relative;
  margin:0;
  z-index:1;

}

div{ display:inline-block; position:relative; }
div::before{ 
   content:attr(data-title); 
   font-size:3em;
   font-weight:bold;
   position:absolute;
   top:0; left:0;
   z-index:-1;
   color:black;
   z-index:1;
   filter:blur(5px);
} 
<div data-title='SOME TITLE'>
  <h1>SOME TITLE</h1>
</div>


স্টপ স্টাফ কীভাবে কাজ করে তা আমি ঠিক জানি না। তবে আমি একটি গ্রেডিয়েন্ট পাঠ্য উদাহরণ পেয়েছি। সম্ভবত এটি আপনাকে সাহায্য করবে!

_আপনি চাইলে গ্রেডিয়েন্টে আরও রং যুক্ত করতে পারেন বা রঙ জেনারেটর থেকে অন্য রং নির্বাচন করতে পারেন

.rainbow2 {
    background-image: -webkit-linear-gradient(left, #E0F8F7, #585858, #fff); /* For Chrome and Safari */
    background-image:    -moz-linear-gradient(left, #E0F8F7, #585858, #fff); /* For old Fx (3.6 to 15) */
    background-image:     -ms-linear-gradient(left, #E0F8F7, #585858, #fff); /* For pre-releases of IE 10*/
    background-image:      -o-linear-gradient(left, #E0F8F7, #585858, #fff); /* For old Opera (11.1 to 12.0) */
    background-image:         linear-gradient(to right, #E0F8F7, #585858, #fff); /* Standard syntax; must be last */
    color:transparent;
    -webkit-background-clip: text;
    background-clip: text;
}
.rainbow {

  background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
<span class="rainbow">Rainbow text</span>
<br />
<span class="rainbow2">No rainbow text</span>





linear-gradients