Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Tiny js code that will simulate a 3D view of your elements, like firefox used to do.

example gif

update

This fork by rebane2001 is an improved version of the script!


Explanations

This script will get the computed background color of your body, and then will create shadows darker than your background (if you have a light background), or lighter than your background (if you have a dark background). If the body does not have a background, the script will take 160 as the default value for red, green and blue.

It will then add a border, a box-shadow, a padding and a margin to each element of your page, and will use the cool rotate3d css function to tilt your website.

Install

Follow these steps to make it work on any website:

  1. Create a new bookmark
  2. Paste the code inside location
  3. Visit a website
  4. Click on the bookmark

Demo

Watch this video for a quick demo.

Warning

This script will not work with cors stylesheets, like the one on codepen. You will get this error:

cors error

javascript:(function(){
bgcolor = window.getComputedStyle(document.body, null).getPropertyValue("background-color").match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
if(!bgcolor) bgcolor = ["", "160", "160", "160"];
if((bgcolor[1] + bgcolor[2] + bgcolor[3])/3 > 128){
bgcolor[1] -= 60;
bgcolor[2] -= 60;
bgcolor[3] -= 60;
}else{
bgcolor[1] += 60;
bgcolor[2] += 60;
bgcolor[3] += 60;
}
bgcolor = "rgba(" + bgcolor[1] + "," + bgcolor[2] + "," + bgcolor[3] + ", 0.8)";
sheet = new CSSStyleSheet()
document.adoptedStyleSheets = [sheet];
sheet.insertRule(`*{border: 1px solid ${bgcolor}; box-shadow: -3px -3px 1px 1px ${bgcolor}, -2px -2px 0 0 ${bgcolor}; padding: 5px 0 0 5px; box-sizing: border-box; margin: 3px;}`);
sheet.insertRule('body{transform: rotate3d(-1, 1, 0, 15deg); transition: transform 0.5s;}');})();
@ConstantineK

This comment has been minimized.

Copy link

@ConstantineK ConstantineK commented Dec 1, 2020

Love it - while I dont do much webdev I loved this feature of firefox and I am sad to see it go for no clear reason, thanks for putting this together!

@corentinbettiol

This comment has been minimized.

Copy link
Owner Author

@corentinbettiol corentinbettiol commented Dec 1, 2020

You're welcome @ConstantineK!
Thank you for taking the time to send this comment :)

@rebane2001

This comment has been minimized.

Copy link

@rebane2001 rebane2001 commented Jan 12, 2021

Hey, I forked your code and made it use adoptedStyleSheets instead of overwriting existing ones. This makes it compatible with more sites (eg Codepen). Feel free to copy the code back from my fork if you wish!

@corentinbettiol

This comment has been minimized.

Copy link
Owner Author

@corentinbettiol corentinbettiol commented Jan 12, 2021

Thanks @rebane2001!

I added a link to your fork at the top of the readme!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment