CSS Frameworks
Posted in
7901
4:31 am, May 28, 2022
Make your site look like windows 7
How can i make my website look like Windows 7?
You can just add the Windows 7 CSS Framework to your site, and it will look like windows 7. Well almost like it, you will also have to add some custom classes and html element to get this working properly.
What can i use title for?
If you like a older style UI of windows seven then this is the css framework for you. I cant really see where this would be useful, but it looks kinda cool.
How to Install the Windows 7 CSS Framework
You can include this via the cdn by linking the script, here is a sample:
<!DOCTYPE html>
<html>
<head>
<title>7.css example</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://unpkg.com/7.css" />
</head>
<body>
<div class="window" style="margin: 32px; width: 250px">
<div class="title-bar">
<div class="title-bar-text">My First Program</div>
</div>
<div class="window-body">
<p>Hello, world!</p>
</div>
</div>
</body>
</html>Preview
Sources and Further Documentation
CSS
https://github.com/khang-nd/7.css
Documentation
https://khang-nd.github.io/7.css/
Make your site look like windows 7 Demo
View Demo Full Screen View Demo New Tab
Make your site look like windows 7 Code
HTML
<!DOCTYPE html>
<html>
<head>
<title>7.css example</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://unpkg.com/7.css" />
</head>
<body>
<div class="window" style="margin: 32px; width: 250px">
<div class="title-bar">
<div class="title-bar-text">My First Program</div>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Maximize"></button>
<button aria-label="Close"></button>
</div>
</div>
<div class="window-body">
<p>Hello, world!</p>
</div>
</div>
<h3>How to add a windows 7 styled button</h3>
<div class="win7">
<button>A Win7-styled button</button>
</div>
<h3>Dropdown Windows Menu</h3>
<p>popout windows navigation</p>
<ul role="menu" class="can-hover" style="width: 200px">
<li role="menuitem" tabindex="0" aria-haspopup="true">View</li>
<li role="menuitem" tabindex="0" aria-haspopup="true">
Sort by
<ul role="menu">
<li role="menuitem"><a href="#menu">Name</a></li>
<li role="menuitem"><a href="#menu">Size</a></li>
<li role="menuitem"><a href="#menu">Item type</a></li>
<li role="menuitem"><a href="#menu">Date modified</a></li>
</ul>
</li>
<li role="menuitem" class="has-divider"><a href="#menu">Refresh</a></li>
<li role="menuitem"><a href="#menu">Paste</a></li>
<li role="menuitem" class="has-divider"><a href="#menu">Paste shortcut</a></li>
<li role="menuitem">
<img src="https://img.icons8.com/color/18/000000/monitor--v1.png"/>
<a href="#menu">Screen resolution</a>
</li>
<li role="menuitem">
<img src="https://img.icons8.com/color/18/000000/virtual-machine2.png"/>
<a href="#menu">Gadgets</a>
</li>
<li role="menuitem">
<img src="https://img.icons8.com/color/18/000000/remote-desktop.png"/>
<a href="#menu">Personalize</a>
</li>
</ul>
<h3>Menu Bar</h3>
<p>A menu bar with dropdowns</p>
<ul role="menubar" class="can-hover">
<li role="menuitem" tabindex="0" aria-haspopup="true">
File
<ul role="menu">
<li role="menuitem"><a href="#menu">Open</a></li>
<li role="menuitem"><a href="#menu">Save</a></li>
<li role="menuitem" class="has-divider"><a href="#menu">Save As...</a></li>
<li role="menuitem"><a href="#menu">Exit</a></li>
</ul>
</li>
<li role="menuitem" tabindex="0" aria-haspopup="true">
Edit
<ul role="menu">
<li role="menuitem"><a href="#menu">Undo</a></li>
<li role="menuitem"><a href="#menu">Copy</a></li>
<li role="menuitem"><a href="#menu">Cut</a></li>
<li role="menuitem" class="has-divider"><a href="#menu">Paste</a></li>
<li role="menuitem"><a href="#menu">Delete</a></li>
<li role="menuitem"><a href="#menu">Find...</a></li>
<li role="menuitem"><a href="#menu">Replace...</a></li>
<li role="menuitem"><a href="#menu">Go to...</a></li>
</ul>
</li>
<li role="menuitem" tabindex="0" aria-haspopup="true">
View
<ul role="menu">
<li role="menuitem" tabindex="0" aria-haspopup="true">
Zoom
<ul role="menu">
<li role="menuitem"><button>Zoom In</button></li>
<li role="menuitem"><button>Zoom Out</button></li>
</ul>
</li>
<li role="menuitem"><a href="#menu">Status Bar</a></li>
</ul>
</li>
<li role="menuitem" tabindex="0" aria-haspopup="true">
Help
<ul role="menu">
<li role="menuitem"><a href="#menu">View Help</a></li>
<li role="menuitem"><a href="#menu">About</a></li>
</ul>
</li>
</ul>
<h3>Windows with Blurred Border</h3>
<p>This shows the blurred glass effect when used in combination with backgrounds.</p>
<div class="background">
<div class="window glass" style="max-width: 320px">
<div class="title-bar">
<div class="title-bar-text">A glass window frame</div>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Close"></button>
</div>
</div>
<div class="window-body">
<p>The background behind is blurred.</p>
</div>
</div>
</div>
</body>
</html>CSS
/*! 7.css v0.7.0 - https://khang-nd.github.io/7.css */body{color:#222;font-family:Arial;font-size:12px}.surface{background:#f0f0f0}h1{font-size:5rem}h2{font-size:2.5rem}h3{font-size:2rem}h4{font-size:1.5rem}u{border-bottom:.5px solid #222;text-decoration:none}code,code *{font-family:monospace}pre{background:#fff;border:1px solid #888;display:block;margin:0;padding:12px 8px}summary:focus{outline:1px dotted #000}::-webkit-scrollbar{width:16px}::-webkit-scrollbar:horizontal{height:17px}::-webkit-scrollbar-corner{background:#eee}::-webkit-scrollbar-track:vertical{background:linear-gradient(90deg,#e5e5e5,#f0f0f0 20%)}::-webkit-scrollbar-track:horizontal{background:linear-gradient(180deg,#e5e5e5,#f0f0f0 20%)}::-webkit-scrollbar-thumb{background-color:#eee;border:1.5px solid #888;border-radius:3px;box-shadow:inset 0 -1px 1px hsla(0,0%,100%,.8),inset 0 1px 1px #fff}::-webkit-scrollbar-thumb:vertical{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAIAAADpZ+PpAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADrSURBVChTTc5LboJQGAXguyoCu4ERCzAGlRk7UOwGWIDh0s4M4kxb06RSq/jAB6AxJkJ4lTDrue3AnvyzP+fLId+/yfM8juP7PQmCCOf7B3e+ZD+O40RRVFW12VQUpd3r9U3T2m4OpKoqWZYNwzBZLEqfh0N7NnvfrPcEWlEUWZb9mWF4Ph6D0ylcLbfM5HkeJrhGA2hb15/QXnv+w7RYXsDatjOdvnmrHSnLEizMNE2v11sUXQBCnn98kbquBUGQJAlmq9WB2e3qg4HJdqKkaRql1HGc0WgMcDJ5dd0F24kediZJ8t/ELT69H+8py0CYSIO5AAAAAElFTkSuQmCC") no-repeat 50%,linear-gradient(90deg,#eee 45%,#ddd 0,#bbb)}::-webkit-scrollbar-thumb:horizontal{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADcSURBVChTNZBLqoUwEEQrURQUxZGCvy24ACfiityJi7tv8GauQoPxk5tquA2RQ9vVVYk6z9NZaxFFEe77htYazjk8z4MwDIVZ+rourOuKaZrwvi+WZcE8z1BKCbPPCjk4DAO2bRP1OI7wLiL6Mbd7J408z1GWpQwWRYGqqiQG+03TgMu0MacfUN4qANmn8UOv9MjW3sKaSm7iIdOSlziOQ3LScd93aPonSYK6riVLlmVo21aYfVqzND9pmqLrOlGT+76XbcxLZkb19/l3fEP+oF0cx8KMEASBsDEGX2/CgZCHkg+8AAAAAElFTkSuQmCC") no-repeat 50%,linear-gradient(180deg,#eee 45%,#ddd 0,#bbb)}::-webkit-scrollbar-button:horizontal:end:increment,::-webkit-scrollbar-button:horizontal:start:decrement,::-webkit-scrollbar-button:vertical:end:increment,::-webkit-scrollbar-button:vertical:start:decrement{display:block}::-webkit-scrollbar-button:vertical{height:17px}::-webkit-scrollbar-button:vertical:start{background:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3R5bGU9InN0b3AtY29sb3I6IzMzMztzdG9wLW9wYWNpdHk6MSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I2FhYTtzdG9wLW9wYWNpdHk6MSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxwYXRoIGQ9Ik04IDZIN3YxSDZ2MUg1djFINHYxaDdWOWgtMVY4SDlWN0g4VjZaIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+"),linear-gradient(90deg,#e5e5e5,#f0f0f0 20%)}::-webkit-scrollbar-button:vertical:end{background:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3R5bGU9InN0b3AtY29sb3I6IzMzMztzdG9wLW9wYWNpdHk6MSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I2FhYTtzdG9wLW9wYWNpdHk6MSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxwYXRoIGQ9Ik0xMSA2SDR2MWgxdjFoMXYxaDF2MWgxVjloMVY4aDFWN2gxVjZaIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+"),linear-gradient(90deg,#e5e5e5,#f0f0f0 20%)}::-webkit-scrollbar-button:horizontal{width:16px}::-webkit-scrollbar-button:horizontal:start{background:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iMCUiIHkxPSIxMDAlIiB4Mj0iMCUiIHkyPSIwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3R5bGU9InN0b3AtY29sb3I6IzMzMztzdG9wLW9wYWNpdHk6MSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I2FhYTtzdG9wLW9wYWNpdHk6MSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxwYXRoIGQ9Ik05IDRIOHYxSDd2MUg2djFINXYxaDF2MWgxdjFoMXYxaDFWNFoiIGZpbGw9InVybCgjYSkiLz48L3N2Zz4="),linear-gradient(180deg,#e5e5e5,#f0f0f0 20%)}::-webkit-scrollbar-button:horizontal:end{background:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iMCUiIHkxPSIxMDAlIiB4Mj0iMCUiIHkyPSIwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3R5bGU9InN0b3AtY29sb3I6IzMzMztzdG9wLW9wYWNpdHk6MSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I2FhYTtzdG9wLW9wYWNpdHk6MSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxwYXRoIGQ9Ik03IDRINnY3aDF2LTFoMVY5aDFWOGgxVjdIOVY2SDhWNUg3VjRaIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+"),linear-gradient(180deg,#e5e5e5,#f0f0f0 20%)}[role=tooltip]{background:linear-gradient(180deg,#fff,#ddd);border:1px solid rgba(0,0,0,.4);border-radius:3px;box-shadow:5px 5px 3px -3px rgba(0,0,0,.4);padding:1em 1em 1em 2.5em;position:relative}[role=tooltip]:before{background:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTS41IDEuNXYxOGgxOGwtMTgtMThaIiBmaWxsPSIjZmZmIiBzdHJva2U9IiNmZmYiLz48cGF0aCBkPSJNMSAxOS41SC41di0xOGwxOCAxOEgxOCIgc3Ryb2tlPSIjOTM5MzkzIi8+PC9zdmc+");content:"";height:18px;left:1em;position:absolute;top:-18px;width:18px}[role=tooltip][id]{position:absolute}[role=button],button{background:linear-gradient(180deg,#eee 45%,#ddd 0,#bbb);border:1.5px solid #888;border-radius:3px;box-shadow:inset 0 -1px 1px hsla(0,0%,100%,.8),inset 0 1px 1px #fff;box-sizing:border-box;font:9pt Segoe UI,sans-serif;min-height:23px;min-width:75px;padding:0 12px;text-align:center}[role=button]:disabled,button:disabled{background:#f4f4f4;border-color:#aeb2b5;color:#838383}[role=button]:not(:disabled):hover,button:not(:disabled):hover{background:linear-gradient(180deg,#e5f4fd 45%,#b3e0f9 0);border-color:#72a2c5}[role=button]:not(:disabled).active,[role=button]:not(:disabled):active,button:not(:disabled).active,button:not(:disabled):active{background:linear-gradient(180deg,#cee9f8 45%,#86c6e8 0);border-color:#6d91ab;box-shadow:none}[role=button].focused,[role=button]:focus,button.focused,button:focus{box-shadow:inset 0 0 0 2px #86c6e8;outline:1px dotted #000;outline-offset:-4px}[role=button].default,button.default{background:linear-gradient(180deg,#eee 45%,#c3dcea 0);border-color:#3083b7;box-shadow:inset 0 0 0 1px #34deff}label{align-items:center;display:inline-flex}input,label{font:9pt Segoe UI,sans-serif}input[type=email],input[type=number],input[type=password],input[type=text]{height:23px}input[type=email],input[type=number],input[type=password],input[type=text],textarea{background-color:#fff;border:1px solid #ccc;border-radius:2px;border-top-color:#888;box-sizing:border-box;font:9pt Segoe UI,sans-serif;padding:3px 4px 5px}input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,input[type=text]:focus,textarea:focus{border-color:#86c6e8 #b3e0f9 #b3e0f9;outline:none}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3R5bGU9InN0b3AtY29sb3I6IzMzMztzdG9wLW9wYWNpdHk6MSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I2FhYTtzdG9wLW9wYWNpdHk6MSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxwYXRoIGQ9Ik0xMSA2SDR2MWgxdjFoMXYxaDF2MWgxVjloMVY4aDFWN2gxVjZaIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+"),linear-gradient(180deg,#eee 45%,#ddd 0,#bbb);background-position:100%;background-repeat:no-repeat;border:1.5px solid #888;border-radius:3px;box-shadow:inset 0 -1px 1px hsla(0,0%,100%,.8),inset 0 1px 1px #fff;box-sizing:border-box;font:9pt Segoe UI,sans-serif;padding:2px 30px 2px 3px;position:relative}select:hover{background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3R5bGU9InN0b3AtY29sb3I6IzMzMztzdG9wLW9wYWNpdHk6MSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I2FhYTtzdG9wLW9wYWNpdHk6MSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxwYXRoIGQ9Ik0xMSA2SDR2MWgxdjFoMXYxaDF2MWgxVjloMVY4aDFWN2gxVjZaIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+"),linear-gradient(180deg,#e5f4fd 45%,#b3e0f9 0);border-color:#72a2c5}select:focus{background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3R5bGU9InN0b3AtY29sb3I6IzMzMztzdG9wLW9wYWNpdHk6MSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I2FhYTtzdG9wLW9wYWNpdHk6MSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxwYXRoIGQ9Ik0xMSA2SDR2MWgxdjFoMXYxaDF2MWgxVjloMVY4aDFWN2gxVjZaIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+"),linear-gradient(180deg,#cee9f8 45%,#86c6e8 0);border-color:#6d91ab;box-shadow:unset;outline:none}input[type=radio]{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:0;border:none;margin:0;opacity:0;position:fixed}input[type=radio]+label{line-height:13px;margin-left:18px;position:relative}input[type=radio]+label:before{background:#fff;border:1px solid #888;border-radius:50%;box-shadow:inset 0 0 0 1.5px #ddd,inset 1px 3px 4px #888;box-sizing:border-box;content:"";display:inline-block;height:12px;left:-18px;margin-right:6px;position:absolute;top:0;width:12px}input[type=radio]+label:hover:before{border-color:#3083b7;box-shadow:inset 0 0 0 1.5px #c3dcea,inset 1px 4px 4px #72a2c5}input[type=radio]:checked+label:after{background:#7cd3eb;border:1.5px solid #27506d;border-radius:50%;box-shadow:inset -1px -1px 0 .5px #16638f,inset -1px -1px 0 1px #1985c0;box-sizing:border-box;content:"";display:block;height:7px;left:-15.5px;position:absolute;top:2.5px;width:7px}input[type=radio]:focus+label{outline:1px dotted #000}input[type=radio]:disabled+label{opacity:.6}input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:0;border:none;margin:0;opacity:0;position:fixed}input[type=checkbox]+label{line-height:13px;margin-left:0;position:relative}input[type=checkbox]+label:before{background:#ddd;border:1px solid #888;box-shadow:inset 0 0 0 1.5px #eee,inset 0 2px 4px #888,inset -2px -3px 4px #fff;box-sizing:border-box;content:"";display:inline-block;height:13px;margin-right:6px;width:13px}input[type=checkbox]+label:hover:before{background:#c3dcea;border-color:#3083b7;box-shadow:inset 0 0 0 1.5px #c3dcea,inset 0 2px 4px #72a2c5,inset -3px -5px 4px #fff}input[type=checkbox]:focus+label{outline:1px dotted #000}input[type=checkbox]:checked+label:after{color:#16638f;content:"\2714";display:block;font-weight:700;height:7px;left:2px;position:absolute;top:0;width:7px}input[type=checkbox]:disabled+label{opacity:.6}fieldset{border:1px solid #cdd7db;border-radius:3px;box-shadow:inset 0 0 0 1px #fff;margin:0;padding:10px;padding-block-start:8px}.field-row{align-items:center;display:flex}.field-row>*+*{margin-left:6px}.field-row-stacked{display:flex;flex-direction:column}.field-row-stacked *+*,[class^=field-row]+[class^=field-row]{margin-top:6px}[role=progressbar]{background:linear-gradient(90deg,rgba(0,0,0,.1),transparent 20%,transparent 80%,rgba(0,0,0,.1)),linear-gradient(180deg,hsla(0,0%,100%,.6) 25%,rgba(0,0,0,.05) 35%,rgba(0,0,0,.05) 90%,hsla(0,0%,100%,.2) 95%),#ddd;border:1px solid #888;border-radius:3px;box-shadow:inset 0 0 2px #fff,0 0 2px #aaa;height:15px;margin:2px 0;overflow:hidden}[role=progressbar]>div{background-color:#0bd82c;background-image:linear-gradient(90deg,rgba(0,0,0,.2),transparent 20%,transparent 80%,rgba(0,0,0,.2)),linear-gradient(180deg,hsla(0,0%,100%,.6) 30%,rgba(0,0,0,.05) 0,rgba(0,0,0,.05) 90%,hsla(0,0%,100%,.2) 95%);box-shadow:inset 0 0 1px #fff;height:100%;overflow:hidden}[role=progressbar].paused>div{background-color:#e6df1b}[role=progressbar].error>div{background-color:#ef0000}[role=progressbar].animate>div:before,[role=progressbar].marquee:before{animation:progressbar 3s linear infinite;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.5),transparent 40%);content:"";display:block;height:100%}[role=progressbar].marquee:before{background:linear-gradient(90deg,transparent,#0bd82c,transparent 35%);opacity:.5}@keyframes progressbar{0%{transform:translateX(-40%)}60%{transform:translateX(100%)}to{transform:translateX(100%)}}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;width:100%}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAASCAYAAABit09LAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAC7SURBVHgBlZLBCYQwEEVj9CDYgRfbswF7sRAbsArPdhBICDmEzPoDE9CdXeKH0eHP48fINOrSPM+k/mhd16YDtCyLmqZJhM7zxIs6PAF570WQAzJIRLkksd89DUl939eB1Ym3b0wpiQBmIYSXiTFGZYwRgWEY6o8uIPQLZGlu2rYtP54L3g3c912N45gHSEahh4dZERZj2zZyztFxHLnQw/vaLIattbmeULkMdg6XxLFaa3WB7MlCirTIHxVUkxicbwSEAAAAAElFTkSuQmCC");height:18px;transform:translateY(-7px);width:10px}input[type=range]::-webkit-slider-thumb:active{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAASCAYAAABit09LAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACsSURBVHgB3ZKxCoMwEIYvJWOn0r10LHTuVDp1KIU+RN+gT9FZ6AP0LYqDY+nQWXAScXMQdRYh+ouRqEF0cPGHHJfcl7sbfkaFroYlqEefx5lxQK/blu6rjRZ6R34RLcFxAWSkmRZEbUkeLWigZgVymZhuoid264lGjwMvTkhmtYsqvKEGMQQY43jYNwoy//7t0j31b8DPXyBOcVYe5Kr9mDpKdoY6ndoCrDNyDnRZRNbxQWFyAAAAAElFTkSuQmCC")}input[type=range]::-moz-range-thumb{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAASCAYAAABit09LAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAC7SURBVHgBlZLBCYQwEEVj9CDYgRfbswF7sRAbsArPdhBICDmEzPoDE9CdXeKH0eHP48fINOrSPM+k/mhd16YDtCyLmqZJhM7zxIs6PAF570WQAzJIRLkksd89DUl939eB1Ym3b0wpiQBmIYSXiTFGZYwRgWEY6o8uIPQLZGlu2rYtP54L3g3c912N45gHSEahh4dZERZj2zZyztFxHLnQw/vaLIattbmeULkMdg6XxLFaa3WB7MlCirTIHxVUkxicbwSEAAAAAElFTkSuQmCC");border:0;border-radius:0;height:18px;width:10px}input[type=range]::-moz-range-thumb:active{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAASCAYAAABit09LAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACsSURBVHgB3ZKxCoMwEIYvJWOn0r10LHTuVDp1KIU+RN+gT9FZ6AP0LYqDY+nQWXAScXMQdRYh+ouRqEF0cPGHHJfcl7sbfkaFroYlqEefx5lxQK/blu6rjRZ6R34RLcFxAWSkmRZEbUkeLWigZgVymZhuoid264lGjwMvTkhmtYsqvKEGMQQY43jYNwoy//7t0j31b8DPXyBOcVYe5Kr9mDpKdoY6ndoCrDNyDnRZRNbxQWFyAAAAAElFTkSuQmCC")}input[type=range]::-webkit-slider-runnable-track{background:#f0f0f0;box-shadow:inset 1px 1px 1px #999,inset -1px 0 #999,0 1px #fff;box-sizing:border-box;height:3px;width:100%}input[type=range]::-moz-range-track{background:#f0f0f0;box-shadow:inset 1px 1px 1px #999,inset -1px 0 #999,0 1px #fff;box-sizing:border-box;height:3px;width:100%}input[type=range].has-box-indicator::-webkit-slider-thumb{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAASCAYAAABit09LAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABrSURBVHgB7dLNCcAgDAXgWASjm9TJ3Egns8N4SGv6c2gbyQA+kED40IPPwJGUEsEgpRRjO8o5i6i11gfZe7HVCojIJ4QA6D3vnXM8F1DmBUkL1TdOOIRGC2X7hcIvPu1ZY/wFV83OhzTF3QGRrxiDB3GCSQAAAABJRU5ErkJggg==")}input[type=range].has-box-indicator::-webkit-slider-thumb:active{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAASCAYAAABit09LAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABmSURBVHgB7dKxCYAwEAXQfyEKYhrBThdwCwsLyRKukFGcRiyyh0tY2kcT0fJIn/zijg+v/IQnerUOTDYzkfToWkbOQcM6+ZX5OMNvVIVeFehqEbopXyIQmQzTgf969qFlIfkTM9wbGH4SS8YdBX4AAAAASUVORK5CYII=")}input[type=range].has-box-indicator::-moz-range-thumb{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAASCAYAAABit09LAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABrSURBVHgB7dLNCcAgDAXgWASjm9TJ3Egns8N4SGv6c2gbyQA+kED40IPPwJGUEsEgpRRjO8o5i6i11gfZe7HVCojIJ4QA6D3vnXM8F1DmBUkL1TdOOIRGC2X7hcIvPu1ZY/wFV83OhzTF3QGRrxiDB3GCSQAAAABJRU5ErkJggg==")}input[type=range].has-box-indicator::-moz-range-thumb:active{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAASCAYAAABit09LAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABmSURBVHgB7dKxCYAwEAXQfyEKYhrBThdwCwsLyRKukFGcRiyyh0tY2kcT0fJIn/zijg+v/IQnerUOTDYzkfToWkbOQcM6+ZX5OMNvVIVeFehqEbopXyIQmQzTgf969qFlIfkTM9wbGH4SS8YdBX4AAAAASUVORK5CYII=")}.is-vertical{display:inline-block;height:150px;transform:translateY(50%);width:4px}.is-vertical>input[type=range]{height:4px;margin:0 16px 0 10px;transform:rotate(270deg) translateX(calc(-50% + 8px));transform-origin:left;width:150px}.is-vertical>input[type=range]::-webkit-slider-thumb{transform:translateY(-8px) scaleX(-1)}.is-vertical>input[type=range]::-moz-range-thumb{transform:translateY(2px) scaleX(-1)}.is-vertical>input[type=range].has-box-indicator::-webkit-slider-thumb{transform:translateY(-9px) scaleX(-1)}.is-vertical>input[type=range].has-box-indicator::-moz-range-thumb{transform:translateY(0) scaleX(-1)}menu[role=tablist]{display:flex;list-style-type:none;margin:0 0 -2px;padding-left:3px;position:relative;text-indent:0}menu[role=tablist] button{border-radius:0;color:#222;display:block;min-width:unset;padding:2px 6px;text-decoration:none;z-index:1}menu[role=tablist] button[aria-selected=true]{background:#fff;border-bottom:0;box-shadow:none;margin:-2px -1px 1px -3px;padding-bottom:4px;position:relative;z-index:8}menu[role=tablist] button:focus{outline:1px dotted #222;outline-offset:-4px}menu[role=tablist] button:disabled{opacity:.6}menu[role=tablist].justified button{flex-grow:1;text-align:center}[role=tabpanel]{clear:both;margin-bottom:9px;padding:14px;position:relative;z-index:2}[role=tabpanel],ul.tree-view{background:#fff;border:1px solid #888}ul.tree-view{display:block;font:9pt Segoe UI,sans-serif;margin:0;padding:6px 6px 6px 16px}ul.tree-view li{list-style-type:none;margin-top:3px}ul.tree-view a{color:#000;text-decoration:none}ul.tree-view ul{margin-top:3px;padding-left:16px}ul.tree-view details{margin-top:0}ul.tree-view details>summary{margin-bottom:0;position:relative}ul.tree-view details>summary:before{border:5px solid transparent;border-left-color:#000;border-radius:3px;content:"";margin-top:2.5px;position:absolute;right:100%}ul.tree-view details[open]>summary:before{margin-top:5px;transform:rotate(45deg)}.window{border:1px solid rgba(0,0,0,.6);border-radius:6px;box-shadow:0 0 5px 1px rgba(0,0,0,.6);font:9pt Segoe UI,sans-serif;position:relative;z-index:0}.window:before{background:linear-gradient(transparent 20%,hsla(0,0%,100%,.7) 40%,transparent 41%),linear-gradient(90deg,hsla(0,0%,100%,.4),rgba(0,0,0,.1),hsla(0,0%,100%,.2)),linear-gradient(55deg,transparent,rgba(0,0,0,.1) 20%,rgba(0,0,0,.1) 50%,transparent 53%),#4580c4;border-radius:6px;content:"";height:100%;position:absolute;width:100%;z-index:-1}.window-body{background:#f0f0f0;border:1px solid rgba(0,0,0,.6);box-shadow:0 0 1px .5px #fff;margin:0 6px 6px;padding:6px}.window-body pre{margin:-6px}.window footer,.window-footer{background:#f0f0f0;border:1px solid rgba(0,0,0,.6);border-top:0;box-shadow:0 .5px 1px .5px #fff;margin:-7px 6px 6px;padding:10px;position:relative}.window footer:before,.window-footer:before{box-shadow:inset 0 1px rgba(0,0,0,.3),inset 0 -1px #fff;content:"";height:2px;left:0;position:absolute;top:0;width:100%}.window.is-bright .window-body{background:#fff}.window.is-bright .window-footer,.window.is-bright footer{background:#eee;box-shadow:inset 0 1px 3px #ddd}.window.is-bright .window-footer:before,.window.is-bright footer:before{content:none}.window.glass{backdrop-filter:blur(1.5px)}.window.glass:before{filter:brightness(1.4);opacity:.5}.window.glass>.title-bar{background:linear-gradient(55deg,transparent 8%,hsla(0,0%,100%,.1) 10%,hsla(0,0%,100%,.3) 30%,rgba(0,0,0,.1) 32%,rgba(0,0,0,.3) 55%,transparent 57%,hsla(0,0%,100%,.3) 70%,transparent 72%)}.window>.title-bar{border:0;box-shadow:inset 0 .5px #fff}.window fieldset{margin-bottom:9px}.window[role=dialog]{left:50%;opacity:0;position:fixed;top:50%;transform:translate(-50%,-50%);transition-duration:.2s;transition-property:visibility,opacity;visibility:hidden;z-index:999}.window[role=dialog]:target{opacity:1;visibility:visible}.title-bar{align-items:center;background:linear-gradient(90deg,hsla(0,0%,100%,.4),rgba(0,0,0,.1),hsla(0,0%,100%,.2)),linear-gradient(55deg,transparent,rgba(0,0,0,.1) 20%,rgba(0,0,0,.1) 50%,transparent 53%),#4580c4;border:1px solid rgba(0,0,0,.6);border-radius:6px 6px 0 0;box-shadow:inset 0 0 .5px .5px #fff;display:flex;font:9pt Segoe UI,sans-serif;justify-content:space-between;padding:6px}.title-bar-text{color:#000;letter-spacing:0;line-height:15px;text-shadow:0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff}.title-bar-controls{background:hsla(0,0%,100%,.2);border:1px solid rgba(0,0,0,.6);border-radius:0 0 5px 5px;border-top:0;box-shadow:0 0 2px #fff;display:flex;margin-top:-6px}.title-bar-controls button{background:linear-gradient(hsla(0,0%,100%,.3),hsla(0,0%,100%,.3) 45%,rgba(0,0,0,.1) 50%,rgba(0,0,0,.1) 75%,hsla(0,0%,100%,.5));border:0;border-radius:0;border-right:1px solid rgba(0,0,0,.6);box-shadow:inset 0 0 0 .5px #eee;box-sizing:border-box;min-height:20px;min-width:26px;padding:0;position:relative}.title-bar-controls button:first-child{border-bottom-left-radius:5px}.title-bar-controls button:last-child{border:0;border-bottom-right-radius:5px}.title-bar-controls button:focus{outline:none}.title-bar-controls button:hover{background:radial-gradient(circle at 50% 100%,#2aceda,transparent 60%),linear-gradient(#a9d2e8 50%,#196c9b 0)}.title-bar-controls button:active{background:radial-gradient(circle at 50% 100%,#0bfdfa,transparent 60%),linear-gradient(#86a7bc 50%,#092747 0);box-shadow:inset 0 0 0 .5px #eee}.title-bar-controls button:before{bottom:0;content:"";left:0;position:absolute;right:0;top:0}.title-bar-controls button[aria-label=Minimize]:before{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAFCAYAAABxeg0vAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAA7SURBVHgBlY+xDQAgDMNaiQ9B8AHcxAlI/NYtKwj6QOohUzxYc+1HAqQ3e03qXNpwwcyE5QsAaEGjDRf8ZAza6Bz6VQAAAABJRU5ErkJggg==") no-repeat center 10px}.title-bar-controls button[aria-label=Maximize]:before{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABsSURBVHgBlZHBCYAwDEVT6YaKbqArOILgBLqBosP1VkhAaQ6S1lKad+ihPy8kxLT9+IACG57r2KqKu2GCBpTYtEMOOQELzrnv4z53I4vDjjJnwXsPJWTOAiJGHVNB5pGwLjPk+AlEBLUY7eFebCosBHOR7vYAAAAASUVORK5CYII=") no-repeat 50%}.title-bar-controls button[aria-label=Restore]:before{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACVSURBVHgBlVDLCoMwENwU/7ClvRYK7b2lCIJHEQQ/QEHwqujfBXJIQMnihg34iHPJ7GNm2AhYcL2/JwhAxIuhq3aXb48PiFBna2YFERVHzoQLnAQmSCmxeL5+3rBtSsdpBwVKKTcY+1rY197G+8RRoLVejed94igwxrgB/zXeJ+4Jijz2Erjg+8/WE7ZAt6EgSUsIxQwaJEWv7G6SSgAAAABJRU5ErkJggg==") no-repeat 50%}.title-bar-controls button[aria-label=Close]{background-color:#d04a37;width:45px}.title-bar-controls button[aria-label=Close]:before{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKCAYAAABi8KSDAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACUSURBVHgBlZFNCoQwDIVbmRvOMHOAAd0K/uDGlYKiCG4VPICi9yu0oCSQoFUXFtKEl6+voZXvr7sKay1TL690FOexY+Hz87i2decOuDKQsNGVe8AGYTRJIh0Y+orBvxszCPllOymlxN06jNE26Qnwg4zdHQLrMhFaawwAqAadDPE1ijwUxhiMKCmxCZk06OMYTz5lAx3xWDeXkLNAAAAAAElFTkSuQmCC") no-repeat 50%}.title-bar-controls button[aria-label=Close]:hover{filter:contrast(1.3)}.title-bar-controls button[aria-label=Close]:active,.title-bar-controls button[aria-label=Close]:hover{background-image:linear-gradient(hsla(0,0%,100%,.3),hsla(0,0%,100%,.3) 45%,rgba(0,0,0,.1) 50%,rgba(0,0,0,.1) 75%,hsla(0,0%,100%,.5))}.title-bar-controls button[aria-label=Close]:active{filter:contrast(1.3) brightness(.7)}.status-bar{background:#f0f0f0;border:1px solid rgba(0,0,0,.6);border-top:0;box-shadow:0 .5px 1px .5px #fff;display:flex;margin:-6px 6px 6px}.status-bar-field{border-right:1px solid #cfcfcf;flex-grow:1;margin:0;padding:2px 3px}.status-bar-field:last-child{border-right:0}ul[role]{cursor:default;list-style:none;margin:0;padding:0}ul[role=menubar]{background:linear-gradient(#fff 20%,#f1f4fa 25%,#f1f4fa 43%,#d4dbee 48%,#e6eaf6);display:flex}ul[role=menubar]>[role=menuitem]{padding:6px 10px;position:relative}ul[role=menubar]>[role=menuitem]:focus,ul[role=menubar]>[role=menuitem]:focus-within,ul[role=menubar]>[role=menuitem]:hover{background:#39f;color:#fff;outline:none}ul[role=menu]{background:#f0f0f0;border:1px solid rgba(0,0,0,.4);box-shadow:4px 4px 3px -2px rgba(0,0,0,.5);color:initial;min-width:150px;padding:2px;position:relative}ul[role=menu]:before{box-shadow:inset 1px 0 rgba(0,0,0,.15),inset -1px 0 #fff;content:"";height:calc(100% - 4px);left:28px;pointer-events:none;position:absolute;width:2px}[role=menuitem] ul[role=menu]{display:none;left:0;position:absolute;top:100%;z-index:99}ul[role=menu] [role=menuitem]>[role=menu]{left:100%;top:-4px}ul[role=menu]>[role=menuitem]>a,ul[role=menu]>[role=menuitem]>button,ul[role=menu]>[role=menuitem][aria-haspopup=true]{all:unset;border:1px solid transparent;border-radius:3px;box-sizing:border-box;display:block;padding:4px 10px 4px 32px;position:relative;width:100%}ul[role=menu]>[role=menuitem]>a:focus,ul[role=menu]>[role=menuitem]>a:hover,ul[role=menu]>[role=menuitem]>button:focus,ul[role=menu]>[role=menuitem]>button:hover,ul[role=menu]>[role=menuitem][aria-haspopup=true]:focus,ul[role=menu]>[role=menuitem][aria-haspopup=true]:hover{background:linear-gradient(180deg,hsla(0,0%,100%,.5),rgba(184,214,251,.5) 60%,rgba(184,214,251,.5) 90%,hsla(0,0%,100%,.8));border-color:#b8d6fb}ul[role=menu]>[role=menuitem][aria-haspopup=true]:after{border:4px solid transparent;border-left-color:currentcolor;content:"";position:absolute;right:2px;top:50%;transform:translateY(-50%)}ul [role=menuitem]{position:relative}ul [role=menuitem]:focus-within>[role=menu],ul [role=menuitem]:focus>[role=menu]{display:block}ul [role=menuitem].has-divider:after{box-shadow:inset 0 1px rgba(0,0,0,.15),inset 0 -1px #fff;content:"";display:block;height:2px;margin:3px 0 2px 28px;pointer-events:none}ul [role=menuitem] img{left:2px;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);z-index:1}ul.can-hover [role=menuitem]:hover>[role=menu]{display:block}a{color:#06c}a:focus{outline:1px dotted #06c}a:hover{color:#39f}.instruction{color:#000;font:9pt Segoe UI,sans-serif;font-weight:400;margin:0 0 20px}.instruction-primary{color:#039;font-size:12pt}.header{font:9pt Segoe UI,sans-serif;font-weight:400}.header-document{color:#000;font-family:Calibri;font-size:17pt}.header-group{color:#039;font-size:11pt}
/*# sourceMappingURL=7.css.map */
.background {
width:100%;
height:50vh;
background:url(https://picsum.photos/1200/600?random=cssbundle) center no-repeat;
background-size:cover;
padding:50px;
}Related Tags
Add Comment
Other Items in CSS Frameworks
Related Search Terms
Other Categories in Code
404 pages animation animations background effects boxes buttons css css & javascript css animation css animations css backgrounds css cursors css framework css frameworks css modal css positions css reset css shadows css slider css text effects css text formatting css tips css tools css z-index content slider cookie alerts design html css sections html canvas html sections icons image zoom interactive images lightbox link effects loading animation modals mouse effects navigation notifications parallax profiles quick css seo sections text ui web developer checklists animations backgrounds bootstrap buttons css css animated css animations css framework css grid footers forms html image effects images javascript scroll effects sections show your work svg text animation timeline
css animations
HTML Canvas
javascript
Random Quote
