Keep Box-Shadow Direction Consistent While Rotating

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>

Calculate position of box-shadow after rotation

Based on the answer here: Keep box-shadow direction consistent while rotating, you can do this in CSS only using transforms and pseudo elements.

The point is that the transforms origin moves with the element in chained transforms. here is your example with the same shadow direction for all the elements:

.box {  width: 200px; height: 100px;  position: absolute;  left: 20px;}.box:before {  content: '';  position: absolute;  top: 5px; left: 5px;  width: 190px; height: 90px;  background-color: #888;  box-shadow: 0px 0px 5px 5px #888;}.box:after {  content: '';  position: absolute;  top: 0; left: 0;  width: 100%; height: 100%;  background-color: #BBF;}
#box1 { top: 20px; }#box1:before { transform: translate(10px, 10px); }
#box2 { top: 170px; transform: rotate(20deg); }#box2:before { transform: rotate(-20deg) translate(10px, 10px) rotate(20deg); }
#box3 { top: 80px; left: 250px; transform: rotate(120deg); }#box3:before { transform: rotate(-120deg) translate(10px, 10px) rotate(120deg); }

<div id="box1" class="box"></div><div id="box2" class="box"></div><div id="box3" class="box"></div>

How can I use a box-shadow on an element that also uses transform: rotate?

This was such a strange bug. I ended up uninstalling and reinstalling Chrome and now it works fine. There must have been some issue with the installation I had before.

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.

45 Degree Angle + Box Shadow - Using nothing but CSS

There is something called Sandpaper that can help you to transform your elements, even in IE!

.myDiv {
    -sand-transform: rotate(45deg);
}

You can just plug it into your site and you're set.

Also you can use CSS3 transforms, which you asked about in your question: "Using nothing but CSS."

To do this you'd use:

 .myDiv {
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg);  
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=5); /*for IE*/
}

And thanks to Josh and Robert for the Opera equivalent:

-o-transform: rotate(45deg);

Internet Explorer will drop ClearType on any text that has a filter applied to it. But you can add empty extra element inside the main one and apply filter to this extra element. After this ClearType will be not ruined and the same result can be achieved.

Android MaterialCardView's drop shadow/elevation disappears when rotating it 180 degrees

It's a curious thing, actually. I've tried to rotate a simple shadowed View and it seems that it cuts off the shadow when it has 180/-180 rotation angle without any logical reason. I also tried to play with outline providers, buut no. So it's not about CardView, it rather comes from the implementation of drawing a shadow in the View class.

I've searched a bit, and it was already reported directly to Google and fixed, but probably some compat libraries still have this issue that's why you're facing it.

https://issuetracker.google.com/issues/173730323

https://issuetracker.google.com/issues/137454913

I can suggest you creating a crutch (yeap, I know, that it's not a solution) with leaving a comment. If your rotation is about -180/180, you can "normalize" it with "-179.9/179.9". In terms of the user experience it won't be visible, in terms of beautiful code - meh, but I don't see any other ways here.

How can I get the WebBrowser control to show modern contents?

Note: The post is about WebBrowser control, however, for all the new
.NET projects the main solution is using
WebView2.
To learn more, take a look at this post:

• Getting started with WebView2.

WebBrowser Control

The WebBrowser control uses the same Internet Explorer version which is installed on your OS but it doesn't use the latest document mode by default and shows content in compatibility mode.

Symptom - As a symptom, the site works properly in Internet Explorer or other browsers, but WebBrowser control doesn't show the site well and for some sites it shows script errors.

Solution - You can tell the WebBrowser control to use the latest document mode without compatibility mode in WebBrowser control. You can follow instructions here to disable the setting using registry.
_{[Reference: Browser Emulation]}

Apply Browser Emulation setting using code

If you want to apply the settings using code, run the following code once:

using (var key = Microsoft.Win32.Registry.CurrentUser.OpenSubKey(
    @"Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION",
    true))
{
    var app = System.IO.Path.GetFileName(Application.ExecutablePath);
    key.SetValue(app, 11001, Microsoft.Win32.RegistryValueKind.DWord);
    key.Close();
}

In above code, I've used 11001 which means IE11 Edge mode.

Internet Explorer 11. Webpages are displayed in IE11 edge mode,
regardless of the declared !DOCTYPE directive. Failing to declare a
!DOCTYPE directive causes the page to load in Quirks.

Apply the Browser Emulation setting manually

Open Registry editor and browse HKEY_CURRENT_USER, go to the following key:

Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION

Add the following values:

"YourApplicationFileName.exe"=dword:00002af9
"YourApplicationFileName.vshost.exe"=dword:00002af9

(In older versions of Visual Studio you needed to add vshost.exe value as well, when you run your program in Visual Studio.)

To create entries right click on an empty area of the right pane, then in the window which appears after selecting dword value, choose hexadecimal and enter 2af9:

In above steps, I've used 11001 which means IE11 Edge mode.

Use WebViewCompatible Control for Windows Forms

You can also use the new WebViewCompatible control for Windows Forms. You can see simple steps to use here: Replace WebBrowser control by new WebView Compatible control for Windows Forms.

WebViewCompatible uses one of two rendering engines to support a broader set of Windows clients:

• On Windows 10 devices, the newer Microsoft Edge rendering engine is used to embed a view that renders richly formatted HTML content from a remote web server, dynamically generated code, or content files.

• On devices running older versions of Windows, the System.Windows.Controls.WebBrowser is used, which provides Internet Explorer engine-based rendering.

• Note: WebView2 is a replacement for WebView and WebViewCompatible.

Set X-UA-Compatibile meta tag

In case that you have access to the html content of the page and you can change the content (for example it's a local html file, or the site belong to yourself) then you can set X-UA-Compatibile meta tag in the head like: <meta http-equiv="X-UA-Compatible" content="IE=Edge" />.

Use other Browser Controls

You can rely on other browser controls like CefSharp.

How can I correctly add a shadow and a gradient to my triangular shape?

Here is an idea with skew transformation and drop-shadow filter. You simply need some extra element to correctly have the gradient. The trick is to invert the skew to keep the gradient direction correct (not needed if we deal with solid color)

.box {  width: 150px;  height: 150px;  position: relative;  z-index:0;  overflow: hidden;  filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.8));}
.box span {  position: absolute;  z-index:-1;  top: 0;  width: 50%;  height: 100%;  overflow: hidden;}
.box span:first-of-type {  left: 0;  transform: skewY(35deg);  transform-origin: top right;}
.box span:last-of-type {  right: 0;  transform: skewY(-35deg);  transform-origin: top left;}
.box span::before {  content: "";  position: absolute;  top: 0;  left: 0;  right: 0;  bottom: 0;  background: linear-gradient(to bottom, blue , red );  transform-origin: inherit;}
.box span:first-of-type::before {  transform: skewY(-35deg);}
.box span:last-of-type::before {  transform: skewY(35deg);}
p { margin:0; color:#fff; font-size:45px; line-height:100px; text-align:center;}

<div class="box">  <span></span><span></span>  <p>29</p></div>

---

Related Topics