html – text-shadow not rendering in Chrome-ThrowExceptions

Exception or error:

The code below works in Firefox.

But in Chrome, text-shadow doesn’t get rendered. Ar least for me.

#site-title{
  background-color: darkslateblue;
	font-size: 35px;
	display: block;
	animation-name: titleAnimation;
	animation-duration: 2s;
  animation-iteration-count: infinite;
	animation-direction: alternate;
}

@keyframes titleAnimation { 
	from { 
		border-radius: 30px;
		box-shadow: 0px 0px 0px dodgerblue;
		text-shadow: 0px 0px 0px yellow;
	} 
	to { 
		border-radius: 30px;
		box-shadow: 0px 0px 40px dodgerblue;
		text-shadow: 0px 0px 30px yellow;

	} 
} 
<center><h1 id="site-title">THIS IS A TEST</h1></center>

The code works here on StackOvervlow using Chrome, but not on my blog

Any help is appreciated- Thank you.

How to solve:

it doesn’t work on your blog because you are applying the animation on the parent element of the anchor tag instead of the tag itself.

use the following code:

#site-title a{
  background-color: darkslateblue;
    font-size: 35px;
    display: block;
    animation-name: titleAnimation;
    animation-duration: 2s;
  animation-iteration-count: infinite;
    animation-direction: alternate;
}

enter image description here

Then clean up your code you have repatitions of #site-title on line 420 and 68.

enter image description here

Leave a Reply

Your email address will not be published. Required fields are marked *