CSS only version of the NBC logo

21 September 2012

And another adition to the CSS logo gallery with the NBC logo in pure CSS. This version has a little twist. Open the demo and hover over the logo with your mouse!

Scroll down to see the source of the "image".



The boring details for CSS geeks
For the CSS geeks who want to know how I did this animation: it may look like i've used 6 keyframe animations for each feather, but that's not what I did. I always try to minimize the amount of CSS and HTML used for "simple" images like these, so I used only one keyframe animation.

@-webkit-keyframes rainbow {
  0% { background: #fcb711; }
  16.6% { background: #f37020; }
  33.3% { background: #cd004d; }
  49.9% { background: #6460aa; }
  66.5% { background: #0089d1; }
  83.1% { background: #0cb14b; }
  100% { background: #fcb711; }
}

Each feather cycles trough all 6 colors of the NBC peacock. So I devided the keyframe range in 6 parts and set the according background colors. Then I set animation time of the total animation to 6 seconds. So exactly every second the animation is at the next color. Then I set each feather to start the animation at a different time by using the "animation-delay". First feather has a delay of 0 seconds to start at the first color. The second feather has a delay of -1 second to let it start the animation 1 second in advance. And so on.

One keyframe range, six different animations.

Why not use pseudo elements?
This is because of the animations. The feathers consist of 2 different parts. One circle and one stretched triangle. Together the form the "drops" that form the feathers of the peacock. But animations don't work on pseudo elements, so I had to add seperate child elements to form the feathers and make the animations work.

The letters
The "N" is made of three rectangles. The middle rectangle is skewed using a CSS transform (skewY). The B is made of two rounded rectangles with two pseudo elements for the empty spaces in the middle. The C is one large white circle with a few large black box-shadows. The "cutoff" is achieved by giving the parent container an overflow hidden.

<div id="peacock">
  <b><i></i></b>
  <div class="drop1 drop"><b></b></div>
  <div class="drop2 drop"><b></b></div>  
  <div class="drop3 drop"><b></b></div>
  <div class="drop4 drop"><b></b></div>
  <div class="drop5 drop"><b></b></div>
  <div class="drop6 drop"><b></b></div>
  <div id="letters">
    <div class="N"></div>
    <div class="B"><b></b></div>
    <div class="C"></div>
  </div>
</div>

<style>
#peacock {
  width: 732px;
  height: 420px;
  position: absolute;
  left: 38px;
  top: 38px;
}
.drop {
  width: 157px;
  height: 157px;
  border-radius: 50%;
  position: absolute;
}
.drop b {
  position: absolute;
  bottom: 98px;
  left: 2px;
  content: '';
  width: 0;
  height: 0;
  border-left: 76px solid transparent;
  border-right: 77px solid transparent;  
}
.drop1 {
  background: #fcb711;  
  left: 0; bottom: 0;
  -webkit-transform: rotate(107.5deg);
}
.drop1 b {
  border-bottom: 243px solid #fcb711;
}
.drop2 {
  background: #f37020;  
  left: 61px; bottom: 164px;
  -webkit-transform: rotate(140.6deg);
}
.drop2 b {
  border-bottom: 260px solid #f37020;
}
.drop3 {
  background: #cd004d;  
  left: 202px; bottom: 262px;
  -webkit-transform: rotate(172.5deg);
}
.drop3 b {
  border-bottom: 270px solid #cd004d;
}
.drop4 {
  background: #6460aa;  
  right: 202px; bottom: 262px;
  -webkit-transform: rotate(-172.5deg);
}
.drop4 b {
  border-bottom: 270px solid #6460aa;
}
.drop5 {
  background: #0089d1;  
  right: 61px; bottom: 164px;
  -webkit-transform: rotate(-140.6deg);
}
.drop5 b {
  border-bottom: 260px solid #0089d1;
}
.drop6 {
  background: #0cb14b;  
  right: 0; bottom: 0;
  -webkit-transform: rotate(-107.5deg);
}
.drop6 b {
  border-bottom: 243px solid #0cb14b;
}
#peacock > b {
  position: absolute;
  z-index: 10;
  top: 85px;
  left: 373px;
  background: white;
  width: 36px;
  height: 43px;
  border-radius: 0px 10px 0 0;
}
#peacock > b i {
  position: absolute;
  content: '';
  background: #6460aa;
  width: 50px;
  height: 35px;
  left: 6px;
  top: 8px;
  border-radius: 50px 0 0 0/70px 0 0 0;
}
#letters {
  width: 602px;
  height: 264px;
  position: absolute;
  top: 448px;
  left: 66px;
  overflow: hidden;
}
#letters .N {
  position: absolute;
  top: 50px;
  background: #000;
  width: 51px;
  height: 204px;
}
#letters .N:before {
  content: '';
  position: absolute;
  top: 48px;
  background: inherit;
  width: 51px;
  height: 204px;
  left: 154px;
  top: -40px;
}
#letters .N:after {
  content: '';
  position: absolute;
  top: 48px;
  background: inherit;
  width: 205px;
  height: 66px;
  -webkit-transform: skewy(44deg);
}
#letters .B {
  position: absolute;
  background: #000;
  left: 233px;
  top: 10px;
  width: 167px;
  height: 122px;
  border-radius: 0 96px 90px 0
}
#letters .B:after {
  content: '';
  position: absolute;
  left: 50px;
  top: 41px;
  background: white;
  width: 65px;
  height: 58px;
  border-radius: 0 45px 48px 0;
}
#letters .B > b {
  position: absolute;
  background: #000;
  left: 0px;
  top: 108px;
  width: 180px;
  height: 135px;
  border-radius: 0 96px 90px 0
}
#letters .B > b:after {
  content: '';
  position: absolute;
  left: 51px;
  top: 31px;
  background: white;
  width: 73px;
  height: 64px;
  border-radius: 0 45px 48px 0;
}
#letters .C {
  position: absolute;
  background: white;
  width: 169px;
  height: 169px;
  left: 474px;
  top: 48px;
  box-shadow:
    0 1px 0 46px #000,
    -5px 0 0 44px #000,
    -16px -1px 0 35px #000;
  border-radius: 52% 54% 55% 50%;
}

#peacock:hover .drop,
#peacock:hover > b i {
  -webkit-animation-duration: 6s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: rainbow;
  -webkit-animation-timing-function: linear;
}
#peacock:hover .drop b {
  -webkit-animation-duration: 6s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: rainbow-points;
  -webkit-animation-timing-function: linear;
}
#peacock > b i {
  -webkit-animation-delay: -3s
}
#peacock .drop1,
#peacock .drop1 b { -webkit-animation-delay: 0s }
#peacock .drop2,
#peacock .drop2 b { -webkit-animation-delay: -1s }
#peacock .drop3,
#peacock .drop3 b { -webkit-animation-delay: -2s }
#peacock .drop4,
#peacock .drop4 b { -webkit-animation-delay: -3s }
#peacock .drop5,
#peacock .drop5 b { -webkit-animation-delay: -4s }
#peacock .drop6,
#peacock .drop6 b { -webkit-animation-delay: -5s }

@-webkit-keyframes rainbow {
  0% { background: #fcb711; }
  16.6% { background: #f37020; }
  33.3% { background: #cd004d; }
  49.9% { background: #6460aa; }
  66.5% { background: #0089d1; }
  83.1% { background: #0cb14b; }
  100% { background: #fcb711; }
}
@-webkit-keyframes rainbow-points {
  0% { border-bottom-color: #fcb711; }
  16.6% { border-bottom-color: #f37020; }
  33.3% { border-bottom-color: #cd004d; }
  49.9% { border-bottom-color: #6460aa; }
  66.5% { border-bottom-color: #0089d1; }
  83.1% { border-bottom-color: #0cb14b; }
  100% { border-bottom-color: #fcb711; }
}
</style>
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!

0 comments

Please feel free to be the first to comment on this page!

By placing a comment you let me know i'm doing a good job. It doesn't have to be constructive, just a "awesome!" makes me really happy! You contribute to a better world!