CODEWITHSUNDEEP
htmlcsssasstransition
CrowScript
CrowScript

Reputation: 155

Box Shadow - remove fade in/out

The transition of the box-shadow makes fade in/out effect of the box shadow. It is visible when you set a slow transition.

Is possible to remove this fade effect, that shadow appears only by x and y position?

Example: https://codepen.io/crowscript/pen/yLvpKNa

Upvotes: 1

Views: 530

Answers (2)

omid
omid

Reputation: 1194

If you want to remove the transition completely, you can delete this line:

transition:box-shadow 2s ease-out

Or if you want to keep the transition but have it fade-in in place, you need to set the shadow on the element then transition the colour:

a {
  display: inline-block;
  color: #FFF;
  background-color: #333;
  padding: 1rem;
  transition: box-shadow 2s ease-out;
  box-shadow: 1rem 1rem 0 0 transparent;
}

a:hover {
  box-shadow: 1rem 1rem 0 0 #c00000;
}
<a href="#">
    Test link
</a>

Upvotes: 3

treckstar
treckstar

Reputation: 2112

If you pre-define the box-shadow on the initial element, it will not have the fade effect. See my example:

a {
  display: inline-block;
  color: #FFF;
  background-color: #333;
  padding: 1rem;
  transition: box-shadow 2s ease;
  box-shadow: .01rem .01rem 0 0 #c00000;
}

a:hover {
  box-shadow: 1rem 1rem 0 0 #c00000;
}
<div class="wrap">
  <a href="#">
      Test link
  </a>
</div>

Upvotes: 2

Related Questions