css গ্রেডিয়েন্ট পাঠ্যের রঙ




css3 generator (5)

সিএসএস পাঠ্য গ্রেডিয়েন্টের উদাহরণ

background-image: -moz-linear-gradient(top,#E605C1 0%,#3B113B 100%);
background-image: -webkit-linear-gradient(top,#E605C1 0%,#3B113B 100%);
background-image: -o-linear-gradient(top,#E605C1 0%,#3B113B 100%);
background-image: -ms-linear-gradient(top,#E605C1 0%,#3B113B 100%);
background-image: linear-gradient(top,#E605C1 0%,#3B113B 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position:relative;
display:inline-block; /*required*/

অনলাইন জেনারেটর টেক্সটগ্রাডিয়েন্ট.কম

এখানে কোনও জেনারেটর রয়েছে, বা 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>

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


  .gradient_text_class{
      font-size: 72px;
      background: linear-gradient(to right, #ffff00 0%, #0000FF 30%);
      background-image: linear-gradient(to right, #ffff00 0%, #0000FF 30%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
<div class="gradient_text_class">Hello</div>


আপনি সিএসএস 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 মানগুলি সংশোধন করুন।


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

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

.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>


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>





linear-gradients