Customizable Safari Browser Mockup For The Web – browser-window

Category: Javascript , Recommended | November 2, 2023
0 Comment
Demo Download
Author:zachleat
Views Total:83 views
Official Page:Go to website
Last Update:November 2, 2023
License:MIT

Preview:

Customizable Safari Browser Mockup For The Web – browser-window

Description:

Browser Window is a web component to emulate a customizable Safari browser window experience right within webpages.

It provides a range of customization options to replicate an authentic browser experience. You can tweak the address bar, icons, window controls, and even choose from Light or Dark theme options. Content of any type can be droppped into the main window area seamlessly.

How to use it:

1. Install and import the browser-window.js as a module.

# NPM
$ npm i @zachleat/browser-window

<script type="module" src="./browser-window.js"></script>
2. Wrap any web content to the <browser-window /> component and done.
<browser-window>
  text, image, iframe here
</browser-window>
3. Add a custom shadow to the browser.
<browser-window shadow>
  Default
</browser-window>
<browser-window shadow style="--bw-shadow-hsl: 150deg 30% 60%;">
  Custom Shadow Color
</browser-window>
4. Display a custom URL in the address bar.
<browser-window url="https://www.cssscript.com">
  Custom URL
</browser-window>
<browser-window url="https://www.cssscript.com" icon>
  With Icon
</browser-window>
<browser-window url="https://www.cssscript.com">
  <img src="fav.png" width="24" height="24" slot="icon">
  With Custom Icon
</browser-window>
5. Use Windows-style buttons.
<browser-window os="windows">
  Windows-style Buttons
</browser-window>
6. Use grayscale buttons.
<browser-window grayscale>
  Windows-style Buttons
</browser-window>
7. Determine whether the content should be flush to the window.
<browser-window flush>
  This content is flush to the window
</browser-window>
    
See Also:

You Might Be Interested In:

Leave a Reply