Logo html5 bisa di buat dengan css di blog ini anda akan menemukan cara membuatnya, Sebelum membahas Logo HTML5 berikut ini sedikit penjelasan tentang artinya, HTML 5 memiliki arti Hyper Text Markup Language versi yang ke 5 merupakan struktur website terbaru dari revisi versi yang sebelumnya yaitu HTML4. Pengembangan versi yang ke 5 menambahkan beberapa fitur dan elemen baru serta atribut yang merefleksikan tipikal dalam penggunaan website modern. HTML5 merupakan salah satu karya dari W3C atau yang dikenal dengan istilah "World Wide Web Consortium" dan pada tgl 18 januari 2011 meluncurkan logo html5 dan mulai diresmikan pada 1 april 2011. W3C menyatakan logo HTML5 ini sebagai sebuah "identitas visual secara umum bagi kumpulan berbagai teknologi open web. ok sekian dulu mengenai pengertian singkat tentang HTML5, sekarang mari kita mulai membuat Logo HTML5 dengan CSS3.
Berikut ini adalah logo html5 yang dibuat menggunakan kode CSS3
tanpa gambar atau image berikut ini adalah demonya:Kode CSS nya adalah sebagai berikut dibawah ini:
Kode HTML nya:
.html5 {
width: 345px;
height: 385px;
display: block;
margin: 20px auto;
position: relative;
}
.html5 .icon { }
.html5 .icon .text { }
.html5 .icon .text .left {
display: block;
position: absolute;
width: 182px;
height: 400px;
}
.html5 .icon .text .left .left {
display: block;
position: absolute;
width: 40px;
height: 130px;
background: #ebebeb;
top: 72px;
left: 82px;
-webkit-transform: skew(5deg);
-moz-transform: skew(5deg);
-o-transform: skew(5deg);
-ms-transform: skew(5deg);
transform: skew(5deg);
}
.html5 .icon .text .left .top {
display: block;
position: absolute;
width: 104px;
height: 40px;
background: #ebebeb;
top: 72px;
left: 80px;
}
.html5 .icon .text .left .middle {
display: block;
position: absolute;
width: 96px;
height: 40px;
background: #ebebeb;
top: 162px;
left: 88px;
}
.html5 .icon .text .left .bottom {
display: block;
position: absolute;
width: 85px;
height: 40px;
background: #ebebeb;
top: 261px;
left: 102px;
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
-o-transform: rotate(12deg);
-ms-transform: rotate(12deg);
transform: rotate(12deg);
}
.html5 .icon .text .left .vert {
display: block;
position: absolute;
width: 40px;
height: 70px;
background: #ebebeb;
top: 222px;
left: 95px;
-webkit-transform: skew(5deg);
-moz-transform: skew(5deg);
-o-transform: skew(5deg);
-ms-transform: skew(5deg);
transform: skew(5deg);
}
.html5 .icon .text .right {
height: 400px;
width: 150px;
left: 182px;
display: block;
position: absolute;
overflow: hidden;
}
.html5 .icon .text .right .top {
display: block;
position: absolute;
width: 105px;
height: 40px;
background: #ffffff;
top: 72px;
left: -3px;
-webkit-transform: skew(-5deg);
-moz-transform: skew(-5deg);
-o-transform: skew(-5deg);
-ms-transform: skew(-5deg);
transform: skew(-5deg);
}
.html5 .icon .text .right .middle {
display: block;
position: absolute;
width: 80px;
height: 40px;
background: #ffffff;
top: 162px;
}
.html5 .icon .text .right .right {
display: block;
position: absolute;
width: 40px;
height: 130px;
background: #ffffff;
top: 162px;
left: 50px;
-webkit-transform: skew(-5deg);
-moz-transform: skew(-5deg);
-o-transform: skew(-5deg);
-ms-transform: skew(-5deg);
transform: skew(-5deg);
}
.html5 .icon .text .right .bottom {
display: block;
position: absolute;
width: 85px;
height: 40px;
background: #ffffff;
top: 261px;
left: -5px;
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
-ms-transform: rotate(-12deg);
transform: rotate(-12deg);
}
.html5 .icon .overlay {
height: 400px;
width: 150px;
left: 182px;
position: absolute;
display: block;
overflow: hidden;
}
.html5 .icon .overlay .top {
width: 160px;
height: 300px;
top: 28px;
left: -35px;
display: block;
background: #f0652a;
position: absolute;
-webkit-transform: skew(-5deg);
-moz-transform: skew(-5deg);
-o-transform: skew(-5deg);
-ms-transform: skew(-5deg);
transform: skew(-5deg);
}
.html5 .icon .overlay .bottom {
position: absolute;
top: 328px;
left: -180px;
display: block;
border-color: #f0652a transparent transparent;
border-style: solid;
border-width: 35px 140px 0px;
height: 0px;
margin: 0px 10px;
width: 0px;
}
.html5 .icon .bg { }
.html5 .icon .bg .middle {
position: absolute;
left: 132px;
background: #e44c27;
width: 50px;
height: 355px;
display: block;
}
.html5 .icon .bg .right {
position: absolute;
left: 166px;
background: #e44c27;
width: 170px;
height: 350px;
display: block;
-webkit-transform: skew(-5deg);
-moz-transform: skew(-5deg);
-o-transform: skew(-5deg);
-ms-transform: skew(-5deg);
transform: skew(-5deg);
}
.html5 .icon .bg .left {
position: absolute;
left: 24px;
background: #e44c27;
width: 170px;
height: 350px;
display: block;
-webkit-transform: skew(5deg);
-moz-transform: skew(5deg);
-o-transform: skew(5deg);
-ms-transform: skew(5deg);
transform: skew(5deg);
}
.html5 .icon .bg .bottom {
position: absolute;
top: 350px;
left: 30px;
display: block;
border-color: #e44c27 transparent transparent;
border-style: solid;
border-width: 35px 140px 0px;
height: 0px;
margin: 0px 10px;
width: 0px;
}
<div class="html5">cukup sekian dulu ya, semoga artikel ini dapat bermanfaat
<div class="icon">
<div class="bg">
<div class="right"></div>
<div class="left"></div>
<div class="bottom"></div>
<div class="middle"></div>
</div>
<div class="overlay">
<div class="top"></div>
<div class="bottom"></div>
</div>
<div class="text">
<div class="left">
<div class="top"></div>
<div class="left"></div>
<div class="middle"></div>
<div class="bottom"></div>
<div class="vert"></div>
</div>
<div class="right">
<div class="top"></div>
<div class="right"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
</div>
</div>
</div>
