Only CSS Rotate Box-Shadow Without Original Element

Only CSS rotate box-shadow without original element

Most flexible answer using only CSS is probably this:

.item {
    position: relative; /* or absolute */
}

.item:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;

    box-shadow: -50px 80px 4px 10px #555;
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
}

Keep box-shadow direction consistent while rotating

Keeping direction of an offset box-shadow consistent during rotation is simple with CSS transforms.

This approach relies on the fact that the transform origin is moved with the transforms. This means that when several transforms are set on the same element, the coordinate system of each transform changes according to the previous ones.

In the following example, the blue element is a pseudo element and the shadow is the div element:

div {  width: 40px; height: 40px;  margin: 40px;  box-shadow: 0px 0px 10px 5px #000;  animation: spinShadow 2s infinite;  background-color: #000;}@keyframes spinShadow {  to { transform: rotate(360deg); }}div:before {  content: '';  position: absolute;  left:-5px; top:-5px;  width: 50px; height: 50px;  transform: rotate(0deg) translate(-10px, -10px) rotate(0deg);  animation:inherit;  animation-name: spinElt;  background-color: #0bb;}@keyframes spinElt {  to { transform: rotate(-360deg) translate(-10px, -10px) rotate(360deg); }}

<div></div>

Rotate drop-shadow effect with CSS

I just realized that there is just no need to dynamically apply drop-shadow style - it can be applied to a container: there will be no rerendering flashes, no need to apply some techniques to smoothen the shadow movement, no need to manually calculate shadow offset, that's it. All of these will be rendered automatically.

So the answer for "is it possible to create a shadow effect for a composite object with CSS and then rotate it so that it keeps the absolute angle with CSS?" is Yes, it is possible: just apply drop-shadow filter to the container of the element that you want to have a shadow effect.

Stackoverflow, sorry for asking silly questions.

Rotated CSS Box Shadow

You'd probably have to create a transparent element with the shadow applied and rotate that behind your image. Something like:

<div class="img-wrapper" style="position: relative;">
    <div class="img-shadow" style="position: absolute; z-index: 1;"></div>
    <div class="img" style="position: absolute; z-index: 2;"></div>
</div>

SO isn't a "free freelancer" service, so give it a try and update your question with any issues you encounter.

CSS: Rotated drop shadow on right side of box

You can achieve this with CSS3: box-shadow and transform.

In the example below the box-shadow is applied to a pseudo element of .menuContainer which sits underneath the .menu element and is rotated by 1° using CSS3s rotate() transform property.

html,body {  /* This is only here to allow the menu to stretch to 100% */    height: 100%;    margin: 0;}.menuContainer {    position: relative;        height: 100%;    width: 100px;}.menuContainer::after {    content: "";    position: absolute;       z-index: 1;     top: -10px;    bottom: 0;    left: -7px;    background: rgba(0,0,0,0.3);    box-shadow: 10px 0 10px 0 rgba(0,0,0,0.3);    width: 100px;        transform: rotate(1deg);}.menu {    background: #f00;    height: 100%;    width: 100px;    position: relative;    z-index: 2;}

<div class="menuContainer">    <div class="menu"></div></div>

How to rotate box shadow around a text?

If I understood your requirement correctly is this what you need?

I added an extra div inside to wrap the text if that is not an issue? this div acts based on the parent's position. making it in the middle.

body {  margin: 0;  display: flex;  justify-content: center;  align-items: center;  height: 100vh;  position: relative;}
.rotate-shadows {  width: 220px;  height: 220px;  position: relative;}
#text {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  justify-content: center;  align-items: center;}
.rotate-shadows:after,.rotate-shadows:before {  content: "";  border-radius: 50%;  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  transform-origin: center center;}
.rotate-shadows:before {  box-shadow: inset 0 20px 0 rgba(0, 250, 250, 0.6), inset 20px 0 0 rgba(0, 200, 200, 0.6), inset 0 -20px 0 rgba(0, 150, 200, 0.6), inset -20px 0 0 rgba(0, 200, 250, 0.6);  animation: rotate-before 2s -0.5s linear infinite;}
.rotate-shadows:after {  box-shadow: inset 0 20px 0 rgba(250, 250, 0, 0.6), inset 20px 0 0 rgba(250, 200, 0, 0.6), inset 0 -20px 0 rgba(250, 150, 0, 0.6), inset -20px 0 0 rgba(250, 100, 0, 0.6);  animation: rotate-after 2s -0.5s linear infinite;}
@keyframes rotate-after {  0% {    transform: rotateZ(0deg) scaleX(1) scaleY(1);  }  50% {    transform: rotateZ(180deg) scaleX(0.82) scaleY(0.95);  }  100% {    transform: rotateZ(360deg) scaleX(1) scaleY(1);  }}
@keyframes rotate-before {  0% {    transform: rotateZ(0deg) scaleX(1) scaleY(1);  }  50% {    transform: rotateZ(-180deg) scaleX(0.95) scaleY(0.85);  }  100% {    transform: rotateZ(-360deg) scaleX(1) scaleY(1);  }}

<div class="rotate-shadows">  <div id="text">    Once upon a time in Stackoverflow!!  </div></div>

CSS box-shadow: Only apply to part of an element

It is indeed possible to achieve this effect with CSS only, but the CSS is mind-bending:

.container {
  background-color: rgba(168,214,255,1);
  padding: 20px;
}
.tab {
  height: 50px;
  background-color: #4790CE;
  margin-bottom: 10px;
  border-radius: 20px;
  position: relative;
}

.tab.active {
  background-color: #63B6FF;
  border-radius: 20px 0 0 20px;
   box-shadow: 0 0 15px #3680BD;
}

.tab .shadow {
  position: absolute;
  top: -10px;
  left: 50px;
  right: -20px;
  bottom: -10px;
  border-radius: 20px;
  background-color: transparent;
  -webkit-border-image: -webkit-gradient(linear, left top, right top, color-stop(10%,rgba(168,214,255,0)), color-stop(80%,rgba(168,214,255,1))) 50 50 stretch;
  border-width: 10px 20px 10px 0;
}

You basically use border-image to mask the dropshadow. You would be able to achieve this without extra markup through the :after pseudo-selector, but :after doesn't play nice with animation.

View the demo on jsfiddle (Webkit only, but you can adapt it easily to FF. IE9 would be out of luck, unfortunately).

How can I rotate box-shadow?

You can use transform property and using rotate(90deg)

#gradients {
  transform: rotate(90deg);
  width: 52px;
  display: block;
  height: 30px;
  background: #22b14c;
  box-shadow: #b5e61d 52px 0px 0px 0px, #fff200 104px 0px 0px 0px, #ffc90e 156px 0px 0px 0px, #ff7f27 208px 0px 0px 0px, #ed1c24 260px 0px 0px 0px;
}

<div id="gradients"></div>

---

Related Topics