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('/image/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="/js_webseite/jquery.js"></script>
<script src="/js_webseite/bootstrap.min.js"></script>
<link rel="stylesheet" media="all" href="/css_webseite/bootstrap.min.css">
<link rel="stylesheet" media="all" href="/css_webseite/awesome.css">
<link rel="stylesheet" href="/css_webseite/jquery-ui.css">
<script src="/js_webseite/jquery-ui.js"></script>
</head>
<body>
<div class="icon-internet text-center" id="icon-internet">
<img src="/image/chrome.jpg" 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>