Adjust the color of text using the <text-shadow> technique

Question

Adjust the color of text using the <text-shadow> technique

The default 'text-shadow' for white text in a <div> is defined as follows: When the text color is changed to #627CA9 by clicking on it, I want the 'text-shadow' to be updated to match the new color.

text-shadow: 0 0 1px #FFFFFF, 0 0 2px #FFFFFF, 0 0 4px #FFFFFF;

I want to include the following:

text-shadow: 0 0 1px #627CA9, 0 0 2px #627CA9, 0 0 4px #627CA9;

I am unsure if this can be directly implemented using JavaScript. Any assistance on this matter would be greatly appreciated.

Thank you in advance for your help. Apologies for any inaccuracies in my English.

function resizeIframe(obj) {
  obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}


function changeColor(id) {
  var x = document.getElementById(id);

  if (x.style.color != "rgb(255, 255, 255)")
    x.style.color = "#FFFFFF";
  else {
    x.style.color = "#627CA9"; // forecolor
  }
}

.centered {
  cursor: pointer;
  font-family: Soft Press W00 Regular V1, cursive;
  color: #FFFFFF;
  text-shadow: 0 0 1px #FFFFFF, 0 0 2px #FFFFFF, 0 0 4px #FFFFFF;
  text-transform: uppercase;
  font-size: 80px;
  margin: 0;
  padding: 0;
  line-height: 100%;
  display: block;
  font-weight: 400;
}

<div onclick="changeColor('myid1'); return false;" id="myid1" class="centered">89 ROCK</div>

javascript html css

Answer 1

Answer №1

To achieve the desired effect, simply set the shadow to use the currentColor property and it will automatically inherit the color defined inside the color property.

function resizeIframe(obj) {
  obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}


function changeColor(id) {
  var x = document.getElementById(id);

  if (x.style.color != "rgb(255, 255, 255)")
    x.style.color = "#FFFFFF";
  else {
    x.style.color = "#627CA9"; // forecolor
  }
}

.centered {
  cursor: pointer;
  font-family: Soft Press W00 Regular V1, cursive;
  color: #FFFFFF;
  text-shadow: 0 0 1px currentColor, 0 0 2px currentColor, 0 0 4px currentColor;
  text-transform: uppercase;
  font-size: 80px;
  margin: 0;
  padding: 0;
  line-height: 100%;
  display: block;
  font-weight: 400;
}

body {
 background:pink;
}

<div onclick="changeColor('myid1'); return false;" id="myid1" class="centered">89 ROCK</div>

An alternative approach is to optimize your code using a class toggle:

function resizeIframe(obj) {
  obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}


function changeColor(id) {
  var x = document.getElementById(id);
  x.classList.toggle('color');
}

.centered {
  cursor: pointer;
  font-family: Soft Press W00 Regular V1, cursive;
  color: #FFFFFF;
  text-shadow: 0 0 1px currentColor, 0 0 2px currentColor, 0 0 4px currentColor;
  text-transform: uppercase;
  font-size: 80px;
  margin: 0;
  padding: 0;
  line-height: 100%;
  display: block;
  font-weight: 400;
}
.color {
  color:#627CA9;
}

body {
 background:pink;
}

<div onclick="changeColor('myid1'); return false;" id="myid1" class="centered">89 ROCK</div>

Answer 2

To achieve the desired effect, simply set the shadow to use the currentColor property and it will automatically inherit the color defined inside the color property.

function resizeIframe(obj) {
  obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}


function changeColor(id) {
  var x = document.getElementById(id);

  if (x.style.color != "rgb(255, 255, 255)")
    x.style.color = "#FFFFFF";
  else {
    x.style.color = "#627CA9"; // forecolor
  }
}

.centered {
  cursor: pointer;
  font-family: Soft Press W00 Regular V1, cursive;
  color: #FFFFFF;
  text-shadow: 0 0 1px currentColor, 0 0 2px currentColor, 0 0 4px currentColor;
  text-transform: uppercase;
  font-size: 80px;
  margin: 0;
  padding: 0;
  line-height: 100%;
  display: block;
  font-weight: 400;
}

body {
 background:pink;
}

<div onclick="changeColor('myid1'); return false;" id="myid1" class="centered">89 ROCK</div>

An alternative approach is to optimize your code using a class toggle:

function resizeIframe(obj) {
  obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}


function changeColor(id) {
  var x = document.getElementById(id);
  x.classList.toggle('color');
}

.centered {
  cursor: pointer;
  font-family: Soft Press W00 Regular V1, cursive;
  color: #FFFFFF;
  text-shadow: 0 0 1px currentColor, 0 0 2px currentColor, 0 0 4px currentColor;
  text-transform: uppercase;
  font-size: 80px;
  margin: 0;
  padding: 0;
  line-height: 100%;
  display: block;
  font-weight: 400;
}
.color {
  color:#627CA9;
}

body {
 background:pink;
}

<div onclick="changeColor('myid1'); return false;" id="myid1" class="centered">89 ROCK</div>

Answer 3

Answer №2

Insert the following code snippet into your CSS stylesheet:

   .forecolor_shadow{
        text-shadow: 0 0 1px #627CA9, 0 0 2px #627CA9, 0 0 4px #627CA9; 
        color:#FFFFFF;
    }

    .white_shadow{
        text-shadow: 0 0 1px #FFFFFF, 0 0 2px #FFFFFF, 0 0 4px #FFFFFF; 
        color:#627CA9;
    }

    .centered {
      cursor: pointer;
      font-family: Soft Press W00 Regular V1, cursive;
      text-transform: uppercase;
      font-size: 80px;
      margin: 0;
      padding: 0;
      line-height: 100%;
      display: block;
      font-weight: 400;
    }


Add the following script to your JavaScript file:

    function changeColor(id) {
      var x = document.getElementById(id);

      if (x.classList.contains('white_shadow')){
          x.classList.remove("white_shadow");
          x.classList.add("forecolor_shadow");

      } else {
          x.classList.remove("forecolor_shadow");
          x.classList.add("white_shadow");
      }
    }

// Implement the functionality in your HTML code 

    <div onclick="changeColor('myid1'); return false;" id="myid1" class="white_shadow centered">89 ROCK</div>

Answer 4

Insert the following code snippet into your CSS stylesheet:

   .forecolor_shadow{
        text-shadow: 0 0 1px #627CA9, 0 0 2px #627CA9, 0 0 4px #627CA9; 
        color:#FFFFFF;
    }

    .white_shadow{
        text-shadow: 0 0 1px #FFFFFF, 0 0 2px #FFFFFF, 0 0 4px #FFFFFF; 
        color:#627CA9;
    }

    .centered {
      cursor: pointer;
      font-family: Soft Press W00 Regular V1, cursive;
      text-transform: uppercase;
      font-size: 80px;
      margin: 0;
      padding: 0;
      line-height: 100%;
      display: block;
      font-weight: 400;
    }


Add the following script to your JavaScript file:

    function changeColor(id) {
      var x = document.getElementById(id);

      if (x.classList.contains('white_shadow')){
          x.classList.remove("white_shadow");
          x.classList.add("forecolor_shadow");

      } else {
          x.classList.remove("forecolor_shadow");
          x.classList.add("white_shadow");
      }
    }

// Implement the functionality in your HTML code 

    <div onclick="changeColor('myid1'); return false;" id="myid1" class="white_shadow centered">89 ROCK</div>

Answer 5

Answer №3

To achieve this effect, you can set the textShadow property of the element's style object like this:

element.style.textShadow = "0 0 15px #627CA9";

If you want to create an alternating shadow on and off behavior after multiple clicks, make sure to reset the textShadow style:

if(shouldShadow) {
    element.style.textShadow = "0 0 15px #627CA9";
} 
else {
    element.style.textShadow = ""; /* Remove shadow */
}

This code snippet will help achieve the desired effect:

function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}

</script>

<script>
function changeColor(id) {
    var element = document.getElementById(id);

if (element.style.color != "rgb(255, 255, 255)") {
    element.style.color = "#FFFFFF";

    /* Reset shadow */
    element.style.textShadow = "";
}
else {

    /* Define color for text and shadow */
    const color = "#627CA9";

    element.style.color = color;

    /* Set shadow with matching color */
    element.style.textShadow = `
    0 0 1px ${color}, 
    0 0 2px ${color}, 
    0 0 4px ${color}`;
}

}

<div style="cursor: pointer;font-family: Soft Press W00 Regular V1, cursive;color: #FFFFFF;text-shadow: 0 0 1px #FFFFFF, 0 0 2px #FFFFFF, 0 0 4px #FFFFFF; text-transform: uppercase;font-size: 80px;margin: 0; padding: 0;line-height: 100%;display: block;font-weight:400;" onclick="changeColor('myid1'); return false;" id="myid1" class="centered">89 ROCK</div>

Answer 6

To achieve this effect, you can set the textShadow property of the element's style object like this:

element.style.textShadow = "0 0 15px #627CA9";

If you want to create an alternating shadow on and off behavior after multiple clicks, make sure to reset the textShadow style:

if(shouldShadow) {
    element.style.textShadow = "0 0 15px #627CA9";
} 
else {
    element.style.textShadow = ""; /* Remove shadow */
}

This code snippet will help achieve the desired effect:

function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}

</script>

<script>
function changeColor(id) {
    var element = document.getElementById(id);

if (element.style.color != "rgb(255, 255, 255)") {
    element.style.color = "#FFFFFF";

    /* Reset shadow */
    element.style.textShadow = "";
}
else {

    /* Define color for text and shadow */
    const color = "#627CA9";

    element.style.color = color;

    /* Set shadow with matching color */
    element.style.textShadow = `
    0 0 1px ${color}, 
    0 0 2px ${color}, 
    0 0 4px ${color}`;
}

}

<div style="cursor: pointer;font-family: Soft Press W00 Regular V1, cursive;color: #FFFFFF;text-shadow: 0 0 1px #FFFFFF, 0 0 2px #FFFFFF, 0 0 4px #FFFFFF; text-transform: uppercase;font-size: 80px;margin: 0; padding: 0;line-height: 100%;display: block;font-weight:400;" onclick="changeColor('myid1'); return false;" id="myid1" class="centered">89 ROCK</div>

Adjust the color of text using the <text-shadow> technique

Answer №1

Answer №2

Answer №3

Similar questions

The margin-left and margin-right in HTML CSS are not cooperating to center a div

Combining MySQL tables for main menu and subcategories

An error occurred in Node.js while parsing data: Headers cannot be set after they have already been sent to the client

Struggling to establish a connection with AngularJS

How can I trigger HierarchicalDataSource.read() when the kendoDropDownList's change event is fired?

Ensure the central alignment of the focused item within the horizontal scroll

Retrieving chosen items from dynamically generated checkboxes using Angular 2+

Displaying a pair of values using a single noUISlider

Issue with radio button not updating when selected

Component does not render on router.push('/page') without reloading first

The textbox is only enabled when a specific selection is made in the dropdown menu

Having trouble setting the CSS width to 100%

Is Socket.io combined with Redis the best architecture for an interactive gaming experience?

variable identifier looping through elements

Is it possible to include personalized validations in Formik's YupValidationSchema?

The Power of Jquery's load() Function for Loading Text

What causes my React app menu to unexpectedly open while simply updating the state without any CSS modifications?

Overlaying images on top of text

Is there a foolproof method to verify if a user truly has visibility of a div element?

Using a CSS hack to create a border cutout