Pure CSS Chrome Logo

24 September 2012

And there's another pure CSS logo. Now I found a challenge in the Chrome logo. The challenge was in the shading and overlapping of the three colored parts in the logo. This time I will try to break down the concept a little more to make sure this isn't just another techdemo, but somebody might actually learn from it :)

Please view the demo first. It works fine in webkit (chrome) and firefox browsers, but the rotation isn't really working in Opera. I haven't found out why, but the rotateX transform appears not to be working while it should work... Anyhow, check out the demo, click somewhere on the body and then read the explanation if you're interested in how I did this.



Three overlapping slices
The first and most difficult part of this logo is the three colored slices that form the biggest part of the logo. I created three rectangles which I gave the right background gradients. The red parts gets a white to darker radial gradient in the top and the yellow and green parts get a transparent-to-little-darker radial gradient which are positioned with background-position and background-size. That was fairly easy, but the three parts should overlap eachother and that is not possible in CSS. There's always one element on top.
To create the illusion of the green part overlapping the yellow part I created a second green element that overlapped the yellow part and by aligning it correctly it looks like the two green parts are one part.

Mask
At last I needed to apply a mask to "cut of" the excess parts of the three parts and make them look rounded. Also the mask needed two pseudo elements for the inner white and blue circle. The white circle is at the bottom and just a plain white circle, but the blue one on top is a little more difficult with a radial background positioned in the top of the element.

This is all of the HTML needed for this logo (the "shadow" element is only needed for the demo):

<div id="chrome">
  <div id="mask"></div>
  <div id="shadow"></div>
  <div id="green"></div>
  <div id="red"></div>
  <div id="yellow"></div>
  <div id="green2"></div>
</div>

And this is the CSS. Quite a lot of code, but that's mostly due to the animation and all the browser-specific transforms needed for that:

body {
  font-family: helvetica;
    background: #FFFFFF;
}
.explode {
  background: #eaf3d2;
}
.explode #chrome  {
  -o-transform: rotateX( 60deg ) rotateZ( 1deg  ) translateY( 300px ) scale(.8);
  -moz-transform: rotateX( 60deg ) rotateZ( 1deg  ) translateY( 300px ) scale(.8);
  -webkit-transform: rotateX( 60deg ) rotateZ( 1deg  ) translateY( 300px ) scale(.8);
  transform: rotateX( 60deg ) rotateZ( 1deg  ) translateY( 300px ) scale(.8);
}
.explode #shadow {
  opacity: 1;
}
.explode #mask {
  -o-transform: translateY(-600px);
  -moz-transform: translateY(-600px);
  -webkit-transform: translateY(-600px);
  transform: translateY(-600px);
  opacity: .7;
}
.explode #yellow {
  -o-transform: translateY(-0px);
  -moz-transform: translateY(-0px);
  -webkit-transform: translateY(-0px);
  transform: translateY(-0px);
  box-shadow: 5px 30px 30px rgba(0,0,0,.3);
}
.explode #red {
  -o-transform: translateY(-50px) rotate(-120deg);
  -moz-transform: translateY(-50px) rotate(-120deg);
  -webkit-transform: translateY(-50px) rotate(-120deg);
  transform: translateY(-50px) rotate(-120deg);
  box-shadow: -40px -20px 30px rgba(0,0,0,.3);
}
.explode #green {
  -o-transform: translateY(-100px) rotate(-240deg);
  -moz-transform: translateY(-100px) rotate(-240deg);
  -webkit-transform: translateY(-100px) rotate(-240deg);
  transform: translateY(-100px) rotate(-240deg);
  box-shadow: 40px -30px 30px rgba(0,0,0,.3);
}
.explode #green2 {
  opacity: .7;
  -o-transform: translateY( -120px ) translateX( -20px );
  -moz-transform: translateY( -120px ) translateX( -20px );
  -webkit-transform: translateY( -120px ) translateX( -20px );
  transform: translateY( -120px ) translateX( -20px );
  box-shadow: 10px 40px 30px rgba(0,0,0,.4);
}

* {
  -o-transition: all 1s;
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  transition: all 1s;
}
#chrome {
  perspective: 600px;
  position: absolute;
  left: 50%;
  margin-left: -309px;
  top: 68px;
  width: 617px;
  height: 617px;
}
#shadow {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent;
  box-shadow: 0 0 50px 150px rgba(0,0,0,.1);
  border-radius: 50%;
  z-index: 20;
}
#shadow:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -22.12% 0 0 -22.12%;
  width: 44.24%;
  height: 44.24%;
  background: rgba(0,0,0,.1);
  box-shadow: 0 0 50px rgba(0,0,0,.2);
  border-radius: 50%;
  z-index: 10;
}
#mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent;
  box-shadow:
    2px 12px 30px rgba(0,0,0,.24),
    0 0 0 200px white
    ;
  border-radius: 50%;
  z-index: 20;
}
#mask:before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -22.12% 0 0 -22.12%;
  width: 44.24%;
  height: 44.24%;
  background: #eef3f9;
  border-radius: 50%;
  z-index: 10;
}
#mask:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -18.88% 0 0 -18.88%;
  width: 37.76%;
  height: 37.76%;
  background: #1674a8;
  background: -o-radial-gradient(center, ellipse cover, #90c0e4 0%,#0a72a7 100%);
  background: -moz-radial-gradient(center, ellipse cover, #90c0e4 0%,#0a72a7 100%);
  background: -webkit-radial-gradient(center, ellipse cover, #90c0e4 0%,#0a72a7 100%);
  background: radial-gradient(center, ellipse cover, #90c0e4 0%,#0a72a7 100%);
  background-position: 50% 100%;
  background-size: 180%;
  background-repeat: no-repeat;
  border-radius: 50%;
  z-index: 11;
}
#red,
#yellow,
#green {
  position: absolute;
  width: 55%;
  height: 80.9%;
}
#red:after,
#yellow:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-top: 85px solid rgba(0,0,0,.03);
  border-right: 331px solid transparent;
}
#yellow {
  top: 173px;
  left: 287px;
  background-color: #fcd808;
  background: -o-radial-gradient(left top, ellipse cover, #fdd901 60%,#e2b22a 70%);
  background: -moz-radial-gradient(left top, ellipse cover, #fdd901 60%,#e2b22a 70%);
  background: -webkit-radial-gradient(left top, ellipse cover, #fdd901 60%,#e2b22a 70%);
  background: radial-gradient(left top, ellipse cover, #fdd901 60%,#e2b22a 70%);
}
#red {
  -o-transform: rotate(-120deg);
  -moz-transform: rotate(-120deg);
  -webkit-transform: rotate(-120deg);
  transform: rotate(-120deg);
  top: -123px;
  left: 170px;
  background: #e93c35;
  background: -o-radial-gradient(100% 50%, ellipse cover, #f48268 0%,#eb3831 60%);
  background: -moz-radial-gradient(100% 50%, ellipse cover, #f48268 0%,#eb3831 60%);
  background: -webkit-radial-gradient(100% 50%, ellipse cover, #f48268 0%,#eb3831 60%);
  background: radial-gradient(100% 50%, ellipse cover, #f48268 0%,#eb3831 60%);
}
#green {
  -o-transform: rotate(-240deg);
  -moz-transform: rotate(-240deg);
  -webkit-transform: rotate(-240deg);
  transform: rotate(-240deg);
  top: 124px;
  left: -27px;
  background: #5bc15b;
  background: -o-radial-gradient(left top, ellipse cover, #57c35d 62%,#429e51 75%);
  background: -moz-radial-gradient(left top, ellipse cover, #57c35d 62%,#429e51 75%);
  background: -webkit-radial-gradient(left top, ellipse cover, #57c35d 62%,#429e51 75%);
  background: radial-gradient(left top, ellipse cover, #57c35d 62%,#429e51 75%);
}
#green2 {
  content: '';
  position: absolute;
  bottom: 0;
  left: 287px;
  width: 135px;
  height: 233px;
  width: 0;
  height: 0;
  border-top: 233px solid #5bc15b;
  border-right: 135px solid transparent;
  z-index: 9;
}
#green2:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  z-index: 10;
  border-top: 260px solid rgba(0,0,0,.04);
  border-right: 75px solid transparent;
  -o-transform: translate(29px,15px) rotate(14deg);
  -moz-transform: translate(29px,15px) rotate(14deg);
  -webkit-transform: translate(29px,15px) rotate(14deg);
  transform: translate(29px,15px) rotate(14deg);
}
You must have JavaScript enabled to use this form!

Leave a comment!

  1. Your mail is safe with me. It's only only used to display your Gravatar image!

3 comments

  1. Gravatar

    Rajendra

    22 June 2013

    Nice! I had tried the one here: http://css3watch.com/post/4130776553/hi-i-created-new-google-chrome-logo-using-simple

  2. Gravatar

    Johan

    06 February 2013

    You can resize it by altering all values (only the px values, the rest is proportionally), but you can also resize complete elements and their children by setting a transform: scale(.8) to the parent element, where .8 stands for 80% of the original size. This is a quick fix and doesn't work in all browsers, but it's really quick :)

  3. Gravatar

    Kassy Coan

    06 February 2013

    What is the best way to go about resizing this logo?