Author: | khalby786 |
---|---|
Views Total: | 1,070 views |
Official Page: | Go to website |
Last Update: | November 3, 2020 |
License: | MIT |
Preview:

Description:
mockframe.js is a JavaScript to make your iframe content look like an app or site screen in a minimal browser mockup.
How to use it:
1. Download the package and load the main script right before the closing body tag.
<script src="script.js"></script>
2. Embed an iframe into your document.
<iframe src="https://www.cssscript.com"> </iframe>
3. Initialize the library and done.
newMockFrame();
4. Override the default styles of the browser mockup.
iframe { width: 100%; height: 100%; border: none; border-bottom-left-radius: 9px; border-bottom-right-radius: 9px; display: block; } .window { border-radius: 9px; background-color: white; width: 100%; min-height: 100%; box-shadow: 0 0px 1.2px rgba(0, 0, 0, 0.021), 0 0px 2.7px rgba(0, 0, 0, 0.031), 0 0px 4.6px rgba(0, 0, 0, 0.038), 0 0px 6.9px rgba(0, 0, 0, 0.044), 0 0px 10px rgba(0, 0, 0, 0.05), 0 0px 14.2px rgba(0, 0, 0, 0.056), 0 0px 20.1px rgba(0, 0, 0, 0.062), 0 0px 29.2px rgba(0, 0, 0, 0.069), 0 0px 45px rgba(0, 0, 0, 0.079), 0 0px 80px rgba(0, 0, 0, 0.1); } .header { margin: 0px; background: #e8e8e8; border-top-left-radius: 9px; border-top-right-radius: 9px; height: 12px; padding: 12px; } .mockup-button { width: 12px; height: 12px; border-radius: 50%; display: inline-block; } .red { background-color: #ff5f56; } .yellow { background-color: #ffc343; margin-left: 3px; } .green { background-color: #32a852; margin-left: 3px; }
5. Enable the dark mode.
newMockFrame({ dark: true });
6. Darken the browser buttons if needed.
newMockFrame({ style: "darken" });