MINIMALIST GOOGLE CHROME WINDOW

Είναι σχεδιασμένο με CSS και HTML και μοιάζει με ένα παράθυρο από τον CHROME σε WINDOW.

Αντιγραφή τον παρακάτω κώδικα:

<style>
/* FoulsCode.blogspot.gr */
* {
  margin:0;
  padding:0;
}
body {
  background-color:#ccc;
  background-image:linear-gradient(top,#ccc,#aaa);
}
/* Window */
.chrome-window {
  background-color:#3B68B5;
  background-image:linear-gradient(top,#5F91DC 0%,#3B68B5 25px,#3B68B5 100%);
  width:600px;
  border:1px solid;
  border-color:#595959 #444 #444 #494949;
  border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-300px;
  margin-top:-150px;
  overflow:hidden;
  font:normal normal 12px Segoe,"Segoe UI",Arial,Sans-Serif;
  color:#222;
  z-index:999;
}
/* Window title */
.chrome-window h1 {
  font:inherit;
  font-weight:bold;
  color:white;
  margin:0 0;
  padding:4px 0 4px 10px;
}
/* Window address bar */
.window-header {
  margin:0 2px;
  padding:1px 0;
  border:1px solid #2E518C;
  border-bottom-color:#AAAAAB;
  background-color:white;
  position:relative;
}
.window-header:before {
  content:"";
  display:block;
  width:10px;
  height:13px;
  background-color:#eee;
  border:1px solid #949495;
  border-bottom-color:#838384;
  box-shadow:inset 0 0 0 1px white,0 1px 2px #ccc;
  position:absolute;
  top:6px;
  left:8px;
}
.window-header input {
  width:592px;
  display:block;
  margin:0 auto;
  padding:4px 4px 5px 24px;
  font:inherit;
  color:inherit;
  border:1px solid #B4BCC7;
  outline:none;
  background-color:white;
  box-sizing:border-box;
}
/* Window body */
.window-inner {
  height:200px;
  border:1px solid #2E518C;
  border-top:none;
  margin:0 2px 2px;
  background-color:white;
  box-shadow:inset 0 0 0 1px #DFDFDF;
  padding:4px;
  word-wrap:break-word;
  overflow:auto;
  cursor:text;
}
/* Buttons */
.right-buttons {
  position:absolute;
  top:-1px;
  right:4px;
  font:0/0 a;
  text-shadow:none;
}
.right-buttons a {
  display:block;
  float:left;
  margin:0 0 0 -1px;
  width:26px;
  height:16px;
  border:1px solid #345181;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.2);
  text-decoration:none;
  position:relative;
  cursor:default;
  transition:all .2s ease-out;
}
.right-buttons a:after {
  content:"";
  display:block;
  position:absolute;
}
.right-buttons .minimize-btn {border-radius:0 0 0 3px}
.right-buttons .minimize-btn:after {
  right:7px;
  bottom:4px;
  left:7px;
  height:3px;
  background-color:#BCCFEF;
  border:1px solid #233656;
  border-radius:2px;
}
.right-buttons .maximize-btn:after {
  top:4px;
  right:8px;
  bottom:4px;
  left:8px;
  border:2px solid #BCCFEF;
  box-shadow:0 0 0 1px #233656,inset 0 0 0 1px #233656;
  border-radius:1px;
}
.right-buttons .close-btn {border-radius:0 0 3px 0}
.right-buttons .close-btn {width:42px}
.right-buttons .close-btn:after {
  content:"x";
  font:normal normal 14px/13px Verdana,Arial,Sans-Serif;
  color:#BCCFEF;
  text-shadow:0 1px #233656,1px 0 #233656,-1px 0 #233656,0 -1px #233656;
  top:0;
  right:0;
  bottom:0;
  left:0;
  text-align:center;
}
.right-buttons a:hover {
  background-color:#8BAEE4;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.4);
}
.right-buttons a.close-btn:hover {background-color:#DA4D4B}
.right-buttons .minimize-btn:hover:after {background-color:white}
.right-buttons .maximize-btn:hover:after {border-color:white}
.right-buttons .close-btn:hover:after {color:white}
</style>
<div class="chrome-window">
  <h1>Chrome Window</h1>
  <div class="right-buttons">
    <a title="Minimize" class="minimize-btn" href="#minimize">Minimize</a>
    <a title="Maximize" class="maximize-btn" href="#maximize">Maximize</a>
    <a title="Close" class="close-btn" href="#close">Close</a>
  </div>
  <div class="window-header">
    <input type="text" onfocus="this.select();" spellcheck="false" value="FOULSCODE.BLOGSPOT.GR">
  </div>
  <div class="window-inner" contenteditable="true" spellcheck="false">
    Το κείμενο σας εδώ!!!  </div>
</div>

DEMO


Αποθήκευση και είστε έτοιμοι.

ΜΟΙΡΑΣΤΕΊΤΕ ΤΟ ΚΑΙ ΜΕ ΤΟΥΣ ΦΊΛΟΥΣ ΣΑΣ.