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

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

Or remove the javascript: part and paste the code into your JS console.

Demo

Watch this video for a quick demo.

javascript:(function(){
let 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"];
let darken = (bgcolor[1] + bgcolor[2] + bgcolor[3])/3 > 128;
bgcolor[1] -= darken ? 60 : -60;
bgcolor[2] -= darken ? 60 : -60;
bgcolor[3] -= darken ? 60 : -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;}');
})();
@cherrerajobs
Copy link

cherrerajobs commented Oct 20, 2021

I minified and urlencoded it in order to make it work as a bookmarklet in Brave, works in chrome too, it was only working as a paste into the console.
https://gist.github.com/cherrerajobs/ec7fc92a30bfd2bb3ba753454669a605

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