CSS3 Box Shadow Size - Percent Units

CSS shadow, Can I put a percent unit?

Here is the effect you want to generate

body {  margin: 0;  padding: 0;  font-family: 'Roboto', sans-serif;  background: steelblue;}.item {  position: relative;  background: #336084;  padding: 8px 30px;  line-height: 50px;  color: #fff;  margin: 10px;  position: relative;  float: left;  cursor: pointer;}.from-right:before {  content: "";  position: absolute;  height: 100%;  width: 3px;  top: 0;  left: 100%;  background: #fff;  transition: all .3s;  opacity: 0;}.from-right:hover::before {  opacity: 1;  left: 0;}
.from-left:before {  content: "";  position: absolute;  height: 100%;  width: 3px;  top: 0;  right: 100%;  background: #fff;  transition: all .3s;  opacity: 0;}.from-left:hover::before {  opacity: 1;  right: 0;}

<div class="item from-right">From Right</div><div class="item from-right">From Right Largest text</div>
<div class="item from-left">From Left</div><div class="item from-left">From Left Largest text</div>

box shadow left position using percent value

The box-shadow property does not support percentages, but you can achieve a similar effect using a pseudo-element. There are some limitations to this technique, see the comments.

Example:

.shadow {    background: #DDDDDD;    padding: 1em;    width: 100px;    border: solid 1px #999999;    position: relative;/*Positioning required.*/}.shadow:before {    content: '';    display: block;    position: absolute;    width: 100%;    height: 100%;    left: 50%;    top: 50%;    z-index: -1;/*Put the shadow behind.*/    background: rgba(0, 0, 0, 0.25);/*Give the shadow a fill.*/    box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.25);/*The spread value must be greater than or equal to the blur.*/}

<div class="shadow">shadow 50% off center.</div>

Box shadow for panel

replace x2, y2, blur2 with actual values.

Check out this fiddle.

Here is the snippet

div {  width: 60px;  height: 60px;  background: red;  box-shadow: #CCCCCC 20px 30px 10px;}

<div></div>

CSS3 box-shadow property doesn't validate?

It's a known validator bug. Apparently they forgot that unitless values are permitted (especially unitless zero values). There's nothing wrong with your CSS; the values you're using are correct.

If you're picky and you can't put up with the bug tarnishing your otherwise would-have-been successful validation, you can simply add units to your zero values:

box-shadow: 0px 0px 10px #000;

But whenever I run into situations like this, I normally don't bother, knowing that it's a harmless validator bug and not something wrong with my CSS.

Note that as of this update the bug has been fixed since August 30, 2012.

Internet Explorer 10 box-shadow size

I found a solution. There are several ie10 hacks out there, but this one is CSS only and targets both IE9 and IE10. It is called the @media Zero Hack. You can find this one and other ie10 hacks at http://www.impressivewebs.com/ie10-css-hacks/

.navigation ul li a {
  -moz-box-shadow: 2px 2px 7px #2d231c;
  -webkit-box-shadow: 2px 2px 7px #2d231c;
  -o-box-shadow: 2px 2px 7px #2d231c;
  box-shadow: 2px 2px 7px #2d231c;
}
@media screen and (min-width:0\0) {
    /* IE9 and IE10 rule sets go here */
.navigation ul li a {
  box-shadow: 2px 2px 15px #3a312a;
 }
}

It uses a parsing bug in IE9/10. If this bug is fixed in IE11 this will also be future proof. I don't know how IE11 will handle box-shadow.
More on moving IE specific CSS into @media blocks

box-shadow with unknown height

Best way to do it would be to use a pseudo-element and wrap the writing in a <span>. It's a bit more code, but nothing too complex. Here's an example:

http://jsfiddle.net/muycgfwg/2/

#play-game{  position: relative;  font-size: 40px;  background: rgb(61, 132, 212);  border: none;  padding: 10px 20px;  overflow: hidden;}
#play-game:after {  content: '';  position: absolute;  left: 0;  top: 0;  width: 100%;  height: 100%;  background-color: black;  opacity: 0.5;  transform: translateY(-100%);  transition: all ease 0.5s;}
#play-game:hover:after {  transform: translateY(0);}
#play-game span {  position: relative;  z-index: 10;  transition: color 0.5s;}
#play-game:hover span{  color: rgb(222, 222, 222);}

<button id="play-game"><span>Play Game!</span></button>

---

Related Topics