Nume: HTML5 logo
Autor: mr.franta
Descriere: Este un logo creat doar din html si css,nu exista imagini integrate.
Demo:

HTML

Cod:


<div><b>5</b></div>
<span class="top"></span>
<span class="right"></span>

CSS

Cod:

div{
  width: 110px;
  height: 130px;
  background: #ff2f00;
  position: absolute;
  left: 250px;
  top: 50px;
}
div b{
  font-size: 120px;
  font-family: bahnschrift;
  font-weight: 900;
  left: 274px;
  top: 50px;
  color: #bbb;
  margin-left: 24px;
}
div:before, div:after{
  content: "";position: absolute;
  background: #fff;
  width: 30px;
  height: 150px;
  transform: rotate(-5deg);
  left: -20px;
}
div:after{
  transform: rotate(5deg);
  left: 102px;
}
html:before{
  content: "";
  background:#fff;
  width: 100px;
  height: 30px;
  position: absolute;
  left: 205px;
  top: 162px;
  z-index: 1;
  transform: rotate(20deg);
}
html:after{
  content: "";
  background:#fff;
  width: 100px;
  height: 30px;
  position: absolute;
  left: 305px;
  top: 162px;
  z-index: 1;
  transform: rotate(-20deg);
}
body:before, body:after{
  content: "";
  position: absolute;
}

body:after{
  background: rgba(255,255,255,0.1);
  width: 50px;
  height: 180px;
  left: 305px;
  top: 50px
    z-index: 1;
}
span.top{
  content: "";
  width: 70px;
  height: 10px;
  background: #ff2f00;
  position:absolute;
  top: 50px;
  left: 286px;
  z-index: 1;
}
span.top:before{
content: "";
  width: 48px;
  height: 10px;
  background: #ff2f00;
  position:absolute;
  top: 111px;
  left: 15px;
  z-index: 1;
  transform: rotate(-20deg)
}
span.top:after{
  content: "";
  width: 10px;
  height: 120px;
  background: #ff2f00;
  position:absolute;
  top: 0px;
  left: 56px;
  z-index: 1;
  transform: rotate(5deg)
}
span.right:before{
  content: "HTML";
  font-family: impact;
  font-size: 32px;
  letter-spacing: 4px;
  position: absolute;
  color: black;
  z-index: 1;
  left: 265px;
  top: 10px;
}