Windows

Logo recreated using pure HTML and CSS3. No images. No JS.

HTML

<div id="windows">
  <div class="window1">
    <div class="window-e1"></div>
    <div class="window-e2 shadow1"></div>
    <div class="window-e2 shadow2"></div>
    <div class="window-e2"></div>
    <div class="window-e3"></div>
    <div class="window-e4 shadow3"></div>
    <div class="window-e4"></div>
  </div>
  <div class="window4">
    <div class="window-e1 shadow3"></div>
    <div class="window-e1"></div>
    <div class="window-e2 shadow1"></div>
    <div class="window-e2 shadow2"></div>
    <div class="window-e2"></div>
    <div class="window-e3"></div>

    <div class="window-e4"></div>
  </div>
  <div class="window3">
    <div class="window-e1"></div>
    <div class="window-e2 shadow1"></div>
    <div class="window-e2 shadow2"></div>
    <div class="window-e2"></div>
    <div class="window-e3"></div>
    <div class="window-e4 shadow3"></div>
    <div class="window-e4"></div>
  </div>
  <div class="window2">
    <div class="window-e1 shadow3"></div>
    <div class="window-e1"></div>
    <div class="window-e2 shadow1"></div>
    <div class="window-e2 shadow2"></div>
    <div class="window-e2"></div>
    <div class="window-e3"></div>
    <div class="window-e4"></div>
  </div>
</div>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200

CSS

#windows {
  height: 220px;
  position: relative;
  transform: rotate(16deg);
  width: 188px;
}

#windows * {
  position: absolute;
}

#windows,
.window-e4 {
  background: #4192d1;
}

.window-e1 {
  border-radius: 100px/67px;
  clip: rect(0px 77px 67px 0);
  height: 67px;
  left: 9px;
  top: 11px;
  width: 102px;
}

.window-e2 {
  height: 85px;
  left: 0;
  top: 27px;
  transform: skewy(-30deg);
  width: 25px;
}

.window-e3 {
  height: 41px;
  left: 24px;
  top: 64px;
  width: 62px;
}

.window-e4 {
  opacity: 1;
  border-radius: 100px/67px;
  clip: rect(0 77px 12px 16px);
  height: 67px;
  left: 9px;
  top: 96px;
  width: 100px;
}

.window1 {
  left: 0;
  top: 0;
}

.window1 .window-e1,
.window1 .window-e2 {
  background: #d53407;
}

.window1 .window-e3 {
  background-image: radial-gradient(circle at 100% 100%, #ebbd2c, #D53407 60%);
  /* standard syntax */
}

.window2 {
  left: 183px;

  transform: rotate(180deg);
  top: 119px;
}

.window2 .window-e1 {
  background-image: radial-gradient(100% 0%, circle, #c7d78e, #7dae1c 50%);
  /* legacy syntax */
  background-image: radial-gradient(circle at 100% 0%, #c7d78e, #7dae1c 50%);
  /* standard syntax */
}

.window2 .window-e2,
.window2 .window-e3 {
  background: #7dae1c;
}

.window3 {
  left: 0;
  top: 95px;
}

.window3 .window-e1,
.window3 .window-e2,
.window3 .window-e3 {
  background: #3576ac;
}

.window3 .window-e1 {
  background-image: radial-gradient(100% 0%, circle, #b7d7ec, #3576ac 50%);
  /* legacy syntax */
  background-image: radial-gradient(circle at 100% 0%, #b7d7ec, #3576ac 50%);
  /* standard syntax */
}

.window4 {
  left: 183px;
  transform: rotate(180deg);
  top: 214px;
}

.window4 .window-e1,
.window4 .window-e2 {
  background: #fac112;
}

.window4 .window-e3 {
  background-image: radial-gradient(circle at 100% 100%, #f5e2a8, #fac112 70%);
  /* standard syntax */
}

#windows .registered {
  left: 190px;
  transform: rotate(-16deg);
  top: 160px;
}

#windows .shadow1,
#windows .shadow2,
#windows .shadow3 {
  background: #3c86c0;
}

.window1 .window-e4,
.window3 .window-e4 {
  top: 101px;
}

.window1 .shadow1,
.window3 .shadow1 {
  left: 65px;
  clip: rect(0px 30px 94px 21px);
  transform: skewy(30deg);
  top: 16px;
}

.window1 .shadow2,
.window3 .shadow2 {
  clip: rect(50px 40px 90px 5px);
  top: 30px;
  width: 32px;
}

.window1 .shadow3,
.window3 .shadow3 {
  clip: rect(0 77px 12px 16px);
  top: 96px;
}

.window2 .shadow1,
.window4 .shadow1 {
  clip: rect(0px 10px 90px 5px);
  left: -10px;
  top: 28px;
}

.window2 .shadow2,
.window4 .shadow2 {
  clip: rect(70px 40px 90px 5px);
  left: -6px;
  top: -44px;
}

.window2 .shadow3,
.window4 .shadow3 {
  clip: rect(0 73px 22px 0px);
  left: 9px;
  top: 6px;
}
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200