Skip to content

Instantly share code, notes, and snippets.

@stephenhay
Created October 11, 2011 14:37
Show Gist options
  • Save stephenhay/1278251 to your computer and use it in GitHub Desktop.
Save stephenhay/1278251 to your computer and use it in GitHub Desktop.
Ubuntu logo in HTML/CSS (for the Fronteers CSS challenge)
<style>
#ubuntulogo {
width: 108px;
height: 108px;
position:relative;
}
#ubuntulogo, #inner, .line { background-color: white; }
#outer {
background-color: #d40000;
background-image: -webkit-radial-gradient(-3px 45px, #fb8b00 44px, transparent 44px), -webkit-radial-gradient(70px 0, #f44800 45px, transparent 20px);
}
#inner, #outer, .human, .line { position: absolute; }
#inner {
top: 27px;
left: 39px;
width: 52px;
height: 52px;
border-radius: 26px;
z-index:100;
}
#outer {
top: 8px;
left: 20px;
width: 90px;
height: 90px;
border-radius: 45px;
}
.human {
width: 20px;
height: 20px;
border-radius: 14px;
border: 4px solid white;
}
#human1 { top: 39px; left: 0; background-color: #f44800; }
#human2 { top: -4px; right: 4px; background-color: #d40000; }
#human3 { bottom: -4px; right: 4px; background-color: #fb8b00; }
.line {
width: 24px;
height: 8px;
z-index: 200;
}
#line1 { top: 47px; right: -4px; }
#line2 {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-o-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
top: 18px;
left: 34px;
}
#line3 {
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-o-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
bottom: 20px;
left: 34px;
}
</style>
<div id="ubuntulogo">
<div id="inner"></div>
<div id="outer"></div>
<div class="human" id="human1"></div>
<div class="human" id="human2"></div>
<div class="human" id="human3"></div>
<div class="line" id="line1"></div>
<div class="line" id="line2"></div>
<div class="line" id="line3"></div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment