setTextGradient

Sets the Gradient of a TextNode, without effecting the Layout

Demo

Installation

npm -i element-functions-set_text_gradient

Description

Set the Gradient of a TextNode without effecting the Layout, you just pass in the class name into the function Element.setTextGradientClass then this will apply the same text gradient to all nested TextNode elements

Assign a Class

html

<div class="textGradient1" >
TEST 1

  <div class="textGradient2" >
  TEST 2
  </iv>

</div>

css

.class_name{
background: -webkit-linear-gradient(0deg, #00FF00, #000000);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(0deg, #00FF00, #000000); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

js

let ele = document.getElementById("textGradient1");
ele.setTextGradient();
ele.setTextGradientClass("class_name");

Override a Child Element

html

<div class="textGradient1" >
TEST 1
<div class="textGradient2" >
TEST 2
</div>
</iv>

css

.class_name2
background: -webkit-linear-gradient(0deg, #00FF00, #000000);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(0deg, #00FF00, #000000); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

js

let ele = document.getElementById("textGradient2");
ele.setTextGradient();
ele.setTextGradientClass("class_name2);

Then this gives you the most amount of freedom when creating gradients