Google+ Logo

Google+ Logo in CSS

by James Doyle

HTML

<div id="container">
  <div class="top red"></div>
  <div class="top blue"></div>
  <div class="top green"></div>
  <div class="top yellow"></div>
  <span>g+</span>
</div>

<div id="container2">
    <span>g+</span>
</div>

CSS

@font-face {
    font-family: Catull;
    src: url('http://dl.dropbox.com/u/6913105/Catull.ttf');
}

#container {
    width: 300px;
    height: 300px;
    margin: 50px;

    background: -webkit-linear-gradient(top, #474541 0%,#121212 100%);
    background: -moz-linear-gradient(top, #474541 0%,#121212 100%);
    background: -o-linear-gradient(top, #474541 0%,#121212 100%);
    background: linear-gradient(top, #474541 0%,#121212 100%);

    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;

    -webkit-box-shadow: inset 2px 0px 20px 2px #000;
    -moz-box-shadow: inset 2px 0px 20px 2px #000;
    box-shadow: inset 2px 0px 20px 2px #000;
    float: left;
}

#container span {
    color: #fff;
    margin-left: 80px;
    font-family: Catull;
    font-size: 13em;
    line-height: 0.8em;
    text-shadow: 0px 1px 10px rgba(0,0,0,0.7);
}

.top {
    width: 25%;
    height: 40px;
    float: left;
}

.red {
    -webkit-border-radius: 20px 0px 0px 0px;
    -moz-border-radius: 20px 0px 0px 0px;
    border-radius: 20px 0px 0px 0px;
    background: #D61E1E;
}

.blue {
    background: #346AE4;
}

.green {
    background: #0A9D32;
}

.yellow {
    -webkit-border-radius: 0px 20px 0px 0px;
    -moz-border-radius: 0px 20px 0px 0px;
    border-radius: 0px 20px 0px 0px;
    background: #ECB41F;
}

#container2 {
    width: 300px;
    height: 300px;
    margin: 50px;
    overflow: hidden;

    background: -webkit-linear-gradient(top, #DD5130 0%,#CA4326 100%);
    background: -moz-linear-gradient(top, #DD5130 0%,#CA4326 100%);
    background: -o-linear-gradient(top, #DD5130 0%,#CA4326 100%);
    background: linear-gradient(top, #DD5130 0%,#CA4326 100%);

    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;

    -webkit-box-shadow: inset 0px -6px 20px 2px rgba(0,0,0,0.4), 0px 2px 15px #000;
    -moz-box-shadow: inset 0px -6px 20px 2px rgba(0,0,0,0.4), 0px 2px 15px #000;
    box-shadow: inset 0px -6px 20px 2px...