Windows Fenster Design in CSS nachbauen

Ich möchte gerne in HTML Windows Fenster nachbauen, dazu verwende ich CSS, aber wie bekomme ich sowas wie im

Der hier verwendete Code

<!doctype html> <html lang="de"> <head> <style> body { overflow: hidden; height:100vh; display:flex; flex-direction:column; background-image: url('https://mohamedelghandour.github.io/windows-10/img/windows_10.jpg'); color: white; background-repeat: no-repeat; background-position: center; background-size: cover; overflow: hidden; } .icon-internet { width: 60px; margin: 10px; cursor: pointer; } .icon-internet p { text-shadow: 3px 3px 3px #000, -3px -3px 3px #000; margin: 0; color:white; } #icon-internet:hover { background: rgba(3, 166, 255, 0.3); outline: 2px solid rgba(3, 166, 255, 0.9); border:2px solid red; } #overlay-internet{ width:60vw; height:60vh; margin:15vh 15vw; display:none; } .right1{ float:right; margin:3px 3px 0 0; } .app { overflow: hidden; z-index: 10; border: 1px solid #000000; height: 400px; transform-origin: bottom left; transition: opacity 0.2s ease-in-out; } .app.minimized { opacity: 1; display:block; } .app.open { bottom: 550px; left: 250px; opacity: 1; visibility: visible; transition: opacity 0.2s ease-in-out; } .app .toolbar { background: #999; height: 30px; font-size: 12px; overflow: hidden; } .app .toolbar:before, .app .toolbar:after { content: ""; display: block; width: 100%; clear: both; } .app .toolbar .tab { position: relative; padding: 0 10px; width: 100px; line-height: 30px; background: #aaa; float: left; } .app .toolbar .tab:after { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f067"; position: absolute; right: -20px; top: 10px; } .app .toolbar .tab span { margin-left: 6px; } .app .toolbar .tab .fa-times { float: right; line-height: 30px; } .app .toolbar .tab .fa-times:hover { color: #990000; } .app .addressbar { line-height: 30px; } .app .addressbar i { padding: 0 10px; } .app .addressbar span { margin: 0 5px; } .app .addressbar span.divider { border-right: 1px solid #777; } .app .addressbar input { background: transparent; border: 0; outline: none; } .app.id-edge { background: #aaa; } a { cursor: default; } .ui-draggable-dragging iframe, .ui-resizable-resizing iframe { pointer-events: none; } .right1 i{ padding:7px; } .right1 i:hover { background: #ddd; } .right1 i:active { background:red; } #internetiframe{ height:100%; } .fluid-container { height: 100%; display: flex; flex-direction: column; } .app.id-edge { background: #aaa; height: 100%; } div#first-row-win { display: flex; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> <body> <div class="icon-internet text-center" id="icon-internet"> <img src="https://cdn0.iconfinder.com/data/icons/jfk/512/chrome-512.png" class="img-responsive"> <p>Chrome</p> </div> <div class="ui-widget-content overlay-internet" id="overlay-internet"> <div class="fluid-container"> <div class="id-edge app minimized"> <div class="toolbar draggable"> <div class="right1"> <i class="fa fa-window-minimize" onclick="closeopencom1()"></i> <i class="fa fa-window-restore" onclick="returncom1()" id="returncam1" style="display:none;"></i> <i class="fa fa-window-maximize" onclick="upercom1()" id="upercam1"></i> <i class="fa fa-times" onclick="closecom1()"></i> </div> <div class="tab"><i class="fa fa-list-alt"> </i><span>Start</span><i class="fa fa-times"></i> </div> </div> <div class="addressbar draggable"><i class="fa fa-arrow-left"></i><i class="fa fa-arrow-right"></i><i class="fa fa-refresh"></i><span class="divider"></span> <input id="newsite" class="edge-url" value="https://soforthilfe-forum.de"/> </div> <iframe id="internetiframe" class="edge-browser" src="https://soforthilfe-forum.de" frameborder="0" width="100%" height="100%"></iframe> </div> </div> </div> <script> var ii=$('#icon-internet'); var oi=$("#overlay-internet"); var uc1=$('#upercam1'); var rc1=$('#returncam1'); ii.click(function(){ oi.css({display:'block'}); $('#internetiframe').css({display:'block'}); $('#newsite').keydown(function(e){ if(e.key=='Enter'){ $('#internetiframe').attr('src',$(this).val()); } }) }) function closeopencom1() { oi.css({display:'none'}); } function upercom1() { oi.css({ width:"100%", top:"0", left:"0", position:"absolute", margin:0, height:"95.3vh"}) uc1.css({display:"none"}); rc1.css({display:"inline"}); } function returncom1() { oi.css({ width:"70%", top:"20%", left:"15%", height:"60%"}) rc1.css({display:"none"}); uc1.css({display:"inline"}); } oi.draggable({ cursor: "move", }).resizable({ animated:true }); function closecom1() { oi.css({display:'none', transition:"200ms all"}); } </script> </body> </html>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!