Crtanje laptopa samo sa CSS-om :)

Danas je bio spor dan na poslu, pa između gomile prototipova koje sam napravio za razno razne potrebe, slučajno sam napravio nešto što je ličilo na ekran laptopa… 10minuta kasnije napravio sam ovo:

Screen Shot 2013-07-10 at 7.35.30 PM

CSS:


.notebook {
  position: relative;
  width: 350px;
  margin: 25px auto;
}
.notebook .display {
  width: 250px;
  height: 175px;
  margin: 0 auto;
  background-color: #796cce;
  border: 10px solid #333;
  -webkit-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
}
.notebook .display:before {
  content: '';
  position: absolute;
  top: 2.5px;
  left: 50%;
  margin-left: 2.5px;
  width: 5px;
  height: 5px;
  background: #ccc;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
}
.notebook .bottom {
  position: relative;
  width: 350px;
  height: 12.5px;
  background: #cccccc;
  margin: 0 auto;
}
.notebook .bottom:before {
  content: '';
  position: absolute;
  top: 0;
  top: 0px;
  left: 50%;
  margin-left: -25px;
  width: 50px;
  height: 5px;
  background: #8e8e8e;
  -webkit-border-radius: 0 0 10px 10px;
  -moz-border-radius: 0 0 10px 10px;
  border-radius: 0 0 10px 10px;
}
.notebook .bottom:after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  border-top: 4px solid #959595;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

HTML:


<div class="notebook">
  <div class="display"></div>
  <div class="bottom"></div>
</div>

Codepen mozete pogledati ovde

One thought on “Crtanje laptopa samo sa CSS-om :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>