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".

[iframepopup=http://dreamdealer.nl/samples/nbc.html][/iframepopup]

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!