CODEWITHSUNDEEP
htmlcss
iSofia
iSofia

Reputation: 1532

CSS3 box shadow size by percentage

Is it possible to set the box shadow size and offsets by percentage? I currently make use of such a class, but zooming-in changes its size and distance:

    .shadowright
    {
        -webkit-box-shadow: 5px 5px 10px #454545;
        -moz-box-shadow: 5px 5px 10px #454545;
        -o-box-shadow: 5px 5px 10px #454545;
        box-shadow: 5px 5px 10px #454545;             
    }

Upvotes: 3

Views: 3773

Answers (3)

Mue
Mue

Reputation: 568

After some trial and error, I found a solution (with today’s CSS though ^^): While you can’t use percentage values, you can use calc with decimal fractions.

div[id^=shadow] {
  background: #000000;
  color: #ffffff;
  margin-block-end: 3em;
}

#shadow-1 {box-shadow: 0 calc(.05 * 1em) 0 red;}
#shadow-2 {box-shadow: 0 calc(.25 * 1em) 0 red;}
#shadow-3 {box-shadow: 0 calc(1.5 * 1em) 0 red;}
#shadow-4 {box-shadow: 0 calc(.75 * 5px) 0 red;}
#shadow-5 {box-shadow: 0 calc(2 * 5px) 0 red;}
<div id="shadow-1">5% of 1em</div>
<div id="shadow-2">25% of 1em</div>
<div id="shadow-3">150% of 1em</div>
<div id="shadow-4">75% of 8px</div>
<div id="shadow-5">200% of 8px</div>

In your case that could be

.shadowright
{
    --offset: 5px
    box-shadow: var(--offset) var(--offset) calc(2 * var(--offset)) #454545;             
}

Upvotes: 0

Lemnis
Lemnis

Reputation: 482

Was googling for a better solution that I had in mind, for everyone that's searching for a possible solution.

.shadowright
{
  width: 20%;
  font-size: 20vw; // if you want the box-shadow to equal it's width
  box-shadow: 1em 1em 1em red;
}

Upvotes: 4

TylerH
TylerH

Reputation: 21077

No. As per the W3C Specification:

Computed value: any <length> made absolute; any specified color computed; otherwise as specified

Emphasis mine. Relative values (percentages) won't work.

Upvotes: 4

Related Questions