Skip to content

Instantly share code, notes, and snippets.

@basvandorst

basvandorst/mdn-logo-html5-css3.html

Created December 12, 2011 19:06
Show Gist options
  • Save basvandorst/1468603 to your computer and use it in GitHub Desktop.
Save basvandorst/1468603 to your computer and use it in GitHub Desktop.
Download ZIP
HTML5/CSS3: Mozilla Developer Network logo
Raw
mdn-logo-html5-css3.html
<html>
<head>
<style type="text/css">
#container {
position:relative;
border: solid 12px #181918;
background:#F30021;
width:190px;
height:220px;
border-radius:30px;
}
#text {
position:absolute;
bottom:0px;
width:190px;
height:60px;
margin:0px;
padding:0px;
padding-bottom:25px;
font-family:helvetica;
font-weight:bold;
font-size:85px;
text-align:center;
background: #181918;
color:#fff;
overflow:hidden;
-webkit-border-radius:0px 0px 15px 15px;
-moz-border-radius:0px 0px 15px 15px;
-o-border-radius:0px 0px 15px 15px;
-ms-border-radius:0px 0px 15px 15px;
border-radius:0px 0px 15px 15px;
}
#text span {
position:absolute;
margin-top:-5px;
left:0px;
}
#hair div {
z-index:0;
position:absolute;
width: 0;
height: 0;
border-left: 80px solid transparent;
border-bottom: 40px solid #181918;
}
#hair div:nth-child(1) {
top:8px;
left:9px;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
}
#hair div:nth-child(2) {
top:34px;
left:-1px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-o-transform: scale(0.8);
-ms-transform: scale(0.8);
}
#hair div:nth-child(3) {
top:55px;
left:-2px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
-o-transform: scale(0.6);
-ms-transform: scale(0.6);
}
#hair div:nth-child(4) {
top:75px;
left:0px;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-o-transform: scale(0.5);
-ms-transform: scale(0.5);
}
#face div {
position:absolute;
background:#181918;
}
#face div:nth-child(1) {
top:112px;
left:18px;
width:52px;
height:8px;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
}
#face div:nth-child(2) {
top:100px;
left:47px;
width:68px;
height:8px;
-webkit-transform: rotate(-73deg);
-moz-transform: rotate(-73deg);
-o-transform: rotate(-73deg);
-ms-transform: rotate(-73deg);
}
#face div:nth-child(3) {
top:120px;
left:89px;
width:80px;
height:9px;
-webkit-transform: rotate(72deg);
-moz-transform: rotate(72deg);
-o-transform: rotate(72deg);
-ms-transform: rotate(72deg);
}
#face div:nth-child(4) {
top:86px;
left:82px;
width:75px;
height:12px;
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-o-transform: rotate(15deg);
-ms-transform: rotate(15deg);
}
#face div:nth-child(5) {
top:64px;
left:113px;
width:70px;
height:17px;
-webkit-transform: rotate(16deg);
-moz-transform: rotate(16deg);
-o-transform: rotate(16deg);
-ms-transform: rotate(16deg);
}
#face div:nth-child(6) {
top:91px;
left:148px;
width:33px;
height:9px;
-webkit-transform: rotate(-34deg);
-moz-transform: rotate(-34deg);
-o-transform: rotate(-34deg);
-ms-transform: rotate(-34deg);
}
#face div:nth-child(7) {
z-index:6;
top:60px;
left:171px;
width:22px;
height:5px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
}
#face div:nth-child(8) {
top:45px;
left:169px;
width:15px;
height:5px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
#face div:nth-child(9) {
top:35px;
left:145px;
width:28px;
height:7px;
-webkit-transform: rotate(17deg);
-moz-transform: rotate(17deg);
-o-transform: rotate(17deg);
-ms-transform: rotate(17deg);
}
#face div:nth-child(10) {
top:22px;
left:122px;
width:30px;
height:7px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
#face div:nth-child(11) {
top:16px;
left:104px;
width:26px;
height:7px;
-webkit-transform: rotate(-16deg);
-moz-transform: rotate(-16deg);
-o-transform: rotate(-16deg);
-ms-transform: rotate(-16deg);
border-radius: 5px 0px 0px 0px;
}
#face div:nth-child(12) {
top:16px;
left:58px;
width:40px;
height:30px;
-webkit-transform: rotate(-33deg);
-moz-transform: rotate(-33deg);
-o-transform: rotate(-33deg);
-ms-transform: rotate(-33deg);
border-top:solid 8px #181918;
background:#F30021;
}
#face div:nth-child(13) {
top:40px;
left:42px;
width:43px;
height:35px;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
border-top:solid 6px #181918;
background:#F30021;
}
#face div:nth-child(14) {
top:76px;
left:32px;
width:40px;
height:13px;
-webkit-transform: rotate(-103deg);
-moz-transform: rotate(-103deg);
-o-transform: rotate(-103deg);
-ms-transform: rotate(-103deg);
border-top:solid 8px #181918;
background:#F30021;
}
#face div:nth-child(15) {
top:12px;
left:85px;
width:30px;
height:7px;
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-o-transform: rotate(15deg);
-ms-transform: rotate(15deg);
background:#181918;
}
#face div:nth-child(16) {
top:45px;
left:160px;
width:20px;
height:7px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-border-radius: 0px 0px 5px 0px;
-moz-border-radius: 0px 0px 5px 0px;
-o-border-radius: 0px 0px 5px 0px;
-ms-border-radius: 0px 0px 5px 0px;
border-radius: 0px 0px 5px 0px;
background:#181918;
}
#eye {
position:absolute;
top:33px;
left:115px;
width:20px;
height:8px;
-webkit-transform:skew(-35deg) rotate(20deg);
-moz-transform:skew(-35deg) rotate(20deg);
-o-transform:skew(-35deg) rotate(20deg);
-ms-transform:skew(-35deg) rotate(20deg);
background:#000;
color:#fff;
font-weight:bold;
font-size:7px;
text-align:center;
}
#teeth {
position:absolute;
top:73px;
left:135px;
width:70px;
height:17px;
-webkit-transform: rotate(14deg);
-moz-transform: rotate(14deg);
-o-transform: rotate(14deg);
-ms-transform: rotate(14deg);
}
#teeth div{
z-index:0;
position:absolute;
width: 0;
height: 0;
border-right: 8px solid transparent;
border-top: 8px solid #fff;
}
#teeth div:nth-child(1) {
left:0px;
}
#teeth div:nth-child(2) {
left:8px;
}
#teeth div:nth-child(3) {
left:16px;
}
#teeth div:nth-child(4) {
left:24px;
}
#teeth div:nth-child(5) {
left:32px;
}
#mouth-circle-large {
position:absolute;
left:72px;
top:37px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
-o-border-radius: 25px;
-ms-border-radius: 25px;
background:#181918;
width:50px;
height:50px;
}
#mouth-circle-small {
position:absolute;
left:9px;
top:5px;
-webkit-border-radius: 17px;
-moz-border-radius: 17px;
-o-border-radius: 17px;
-ms-border-radius: 17px;
border-radius: 17px;
background:#F30021;
width:34px;
height:34px;
}
#mouth-circle-half {
position: absolute;
top: 22px;
left: 14px;
width: 15px;
height: 8px;
border: 4px solid #181918;
border-top: 0;
-webkit-border-radius: 0 0 20px 20px 0 0 20px 20px;
-moz-border-radius: 0 0 20px 20px 0 0 20px 20px;
-o-border-radius: 0 0 20px 20px 0 0 20px 20px;
-ms-border-radius: 0 0 20px 20px 0 0 20px 20px;
border-radius: 0 0 20px 20px / 0 0 20px 20px;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
}
#dots div{
position:absolute;
background:#181918;
width:5px;
height:5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}
#dots div:nth-child(1) {
left:85px;
top:24px;
}
#dots div:nth-child(2) {
left:60px;
top:40px;
}
#dots div:nth-child(3) {
left:55px;
top:65px;
}
#dots div:nth-child(4) {
left:60px;
top:110px;
}
#dots div:nth-child(5) {
left:105px;
top:120px;
}
</style>
</head>
<body>
<div id="container">
<div id="image">
<div id="hair">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="face">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="eye">00</div>
<div id="mouth-circle-large">
<div id="mouth-circle-small"></div>
<div id="mouth-circle-half"></div>
</div>
<div id="teeth">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="dots">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div id="text"><span>MDN</span></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment