Labs

By Graeme Blackwood | 28th October 2011

Pure CSS Druplicon...

With all the hype around logos in pure CSS at the moment, I thought I would join in the fun and recreate the Druplicon in CSS.

As I progressed and refined the technique, I realised I probably have a few more divs than necessary, instead of using CSS3's transform properties a little better, but I think the result is pretty successful!

Here is the CSS:

    #druplicon {
      position: relative;
      width: 600px;
      height: 400px;
      background-color: #fff;
      margin: 0 auto;
    }
 
    #druplicon * {
      position: absolute;
    }
 
    /* Background */
    .background {
      left: 194px;
      top: 125px;
      width: 163px;
      height: 159px;
      border-radius: 100px;
      background-color: #00598E;
      -moz-transform: rotate(0deg) skew(0deg, 0deg);
      -webkit-transform: rotate(0deg) skew(0deg, 0deg);
      -o-transform: rotate(0deg) skew(0deg, 0deg);
      -ms-transform: rotate(0deg) skew(0deg, 0deg);
      transform: rotate(0deg) skew(0deg, 0deg);
    }
 
    .background1 {
      left: 231px;
      top: 131px;
      width: 29px;
      height: 12px;
      background-color: #00598E;
      -moz-transform: rotate(-29deg) skew(0deg, 0deg);
      -webkit-transform: rotate(-29deg) skew(0deg, 0deg);
      -o-transform: rotate(-29deg) skew(0deg, 0deg);
      -ms-transform: rotate(-29deg) skew(0deg, 0deg);
      transform: rotate(-29deg) skew(0deg, 0deg);
    }
 
    .background2 {
      left: 288px;
      top: 129px;
      width: 29px;
      height: 12px;
      background-color: #00598E;
      -moz-transform: rotate(29deg) skew(0deg, 0deg);
      -webkit-transform: rotate(29deg) skew(0deg, 0deg);
      -o-transform: rotate(29deg) skew(0deg, 0deg);
      -ms-transform: rotate(29deg) skew(0deg, 0deg);
      transform: rotate(29deg) skew(0deg, 0deg);
    }
 
    .background3 {
      left: 254px;
      top: 99px;
      width: 40px;
      height: 38px;
      background-color: #0077C0;
      -moz-transform: rotate(0deg) skew(0deg, 0deg);
      -webkit-transform: rotate(0deg) skew(0deg, 0deg);
      -o-transform: rotate(0deg) skew(0deg, 0deg);
      -ms-transform: rotate(0deg) skew(0deg, 0deg);
      transform: rotate(0deg) skew(0deg, 0deg);
    }
 
 
    /* Top of head */
    .point-mask1 {
      left: 217px;
      top: 75px;
      width: 53px;
      height: 53px;
      border-radius: 100px 100px 100px 100px;
      background-color: #fff;
      -moz-transform: rotate(0deg) skew(0deg, 0deg);
      -webkit-transform: rotate(0deg) skew(0deg, 0deg);
      -o-transform: rotate(0deg) skew(0deg, 0deg);
      -ms-transform: rotate(0deg) skew(0deg, 0deg);
      transform: rotate(0deg) skew(0deg, 0deg);
    }
 
    .point-mask2 {
      left: 273px;
      top: 51px;
      width: 77px;
      height: 77px;
      border-radius: 100px 100px 100px 100px;
      background-color: #fff;
      -moz-transform: rotate(0deg) skew(0deg, 0deg);
      -webkit-transform: rotate(0deg) skew(0deg, 0deg);
      -o-transform: rotate(0deg) skew(0deg, 0deg);
      -ms-transform: rotate(0deg) skew(0deg, 0deg);
      transform: rotate(0deg) skew(0deg, 0deg);
    }
 
    .point-mask3 {
      left: 275px;
      top: 90px;
      width: 12.6667px;
      height: 28px;
      background-color: #fff;
      -moz-transform: rotate(-43deg) skew(0deg, 0deg);
      -webkit-transform: rotate(-43deg) skew(0deg, 0deg);
      -o-transform: rotate(-43deg) skew(0deg, 0deg);
      -ms-transform: rotate(-43deg) skew(0deg, 0deg);
      transform: rotate(-43deg) skew(0deg, 0deg);
    }
 
 
    /* Mouth */
    .smile1 {
      left: 265px;
      top: 266px;
      width: 16px;
      height: 7px;
      border-radius: 9px;
      background-color: #fff;
      -moz-transform: rotate(20deg) skew(0deg, 0deg);
      -webkit-transform: rotate(20deg) skew(0deg, 0deg);
      -o-transform: rotate(20deg) skew(0deg, 0deg);
      -ms-transform: rotate(20deg) skew(0deg, 0deg);
      transform: rotate(20deg) skew(0deg, 0deg);
    }
 
    .smile2 {
      left: 277px;
      top: 269px;
      width: 16px;
      height: 7px;
      border-radius: 9px 9px 9px 9px;
      background-color: #fff;
      -moz-transform: rotate(4deg) skew(0deg, 0deg);
      -webkit-transform: rotate(4deg) skew(0deg, 0deg);
      -o-transform: rotate(4deg) skew(0deg, 0deg);
      -ms-transform: rotate(4deg) skew(0deg, 0deg);
      transform: rotate(4deg) skew(0deg, 0deg);
    }
 
    .smile3 {
      left: 287px;
      top: 270px;
      width: 16px;
      height: 6px;
      border-radius: 9px 9px 9px 9px;
      background-color: #fff;
      -moz-transform: rotate(-4deg) skew(0deg, 0deg);
      -webkit-transform: rotate(-4deg) skew(0deg, 0deg);
      -o-transform: rotate(-4deg) skew(0deg, 0deg);
      -ms-transform: rotate(-4deg) skew(0deg, 0deg);
      transform: rotate(-4deg) skew(0deg, 0deg);
    }
 
    .smile4 {
      left: 298px;
      top: 269px;
      width: 14px;
      height: 5px;
      border-radius: 9px 9px 9px 9px;
      -moz-transform: rotate(-20deg) skew(0deg, 0deg);
      -webkit-transform: rotate(-20deg) skew(0deg, 0deg);
      -o-transform: rotate(-20deg) skew(0deg, 0deg);
      -ms-transform: rotate(-20deg) skew(0deg, 0deg);
      transform: rotate(-20deg) skew(0deg, 0deg);
      background-color: #fff;
    }
 
    .smile5 {
      left: 308px;
      top: 265px;
      width: 10px;
      height: 5px;
      border-radius: 9px 9px 9px 9px;
      background-color: #fff;
      -moz-transform: rotate(-31deg) skew(0deg, 0deg);
      -webkit-transform: rotate(-31deg) skew(0deg, 0deg);
      -o-transform: rotate(-31deg) skew(0deg, 0deg);
      -ms-transform: rotate(-31deg) skew(0deg, 0deg);
      transform: rotate(-31deg) skew(0deg, 0deg);
    }
 
    .smile-mask {
      left: 248px;
      top: 182px;
      width: 89px;
      height: 89px;
      border-radius: 60px 60px 60px 60px;
      -moz-transform: rotate(0deg) skew(0deg, 0deg);
      -webkit-transform: rotate(0deg) skew(0deg, 0deg);
      -o-transform: rotate(0deg) skew(0deg, 0deg);
      -ms-transform: rotate(0deg) skew(0deg, 0deg);
      transform: rotate(0deg) skew(0deg, 0deg);
      background-color: #00598E;
    }
 
 
    /* Left Eye */
    .left-eye1 {
      left: 234px;
      top: 196px;
      width: 48px;
      height: 62px;
      border-radius: 111px 0px 60px 54px / 81px 0px 67px 66px;
      background-color: #fff;
      -moz-transform: rotate(51deg) skew(0deg, 0deg);
      -webkit-transform: rotate(51deg) skew(0deg, 0deg);
      -o-transform: rotate(51deg) skew(0deg, 0deg);
      -ms-transform: rotate(51deg) skew(0deg, 0deg);
      transform: rotate(51deg) skew(0deg, 0deg);
    }
 
    .left-eye2 {
      left: 234px;
      top: 212px;
      width: 63px;
      height: 38px;
      border-radius: 0px 64px 0px 37px / 0px 48px 0px 24px;
      background-color: #fff;
      -moz-transform: rotate(-31deg) skew(0deg, 0deg);
      -webkit-transform: rotate(-31deg) skew(0deg, 0deg);
      -o-transform: rotate(-31deg) skew(0deg, 0deg);
      -ms-transform: rotate(-31deg) skew(0deg, 0deg);
      transform: rotate(-31deg) skew(0deg, 0deg);
    }
 
    /* Right eye */
    .right-eye1 {
      left: 322px;
      top: 206px;
      width: 27px;
      height: 46px;
      border-radius: 89px 73px 67px 76px / 122px 119px 146px 140px;
      background-color: #fff;
      -moz-transform: rotate(13deg) skew(0deg, 0deg);
      -webkit-transform: rotate(13deg) skew(0deg, 0deg);
      -o-transform: rotate(13deg) skew(0deg, 0deg);
      -ms-transform: rotate(13deg) skew(0deg, 0deg);
      transform: rotate(13deg) skew(0deg, 0deg);
    }
 
    .right-eye2 {
      left: 307px;
      top: 230px;
      width: 27px;
      height: 12px;
      background-color: #fff;
      -moz-transform: rotate(43deg) skew(0deg, 0deg);
      -webkit-transform: rotate(43deg) skew(0deg, 0deg);
      -o-transform: rotate(43deg) skew(0deg, 0deg);
      -ms-transform: rotate(43deg) skew(0deg, 0deg);
      transform: rotate(43deg) skew(0deg, 0deg);
    }
 
    .right-eye3 {
      left: 305px;
      top: 217px;
      width: 33px;
      height: 12px;
      background-color: #fff;
      border-bottom-left-radius: 11px 6px;
      -moz-transform: rotate(-33deg) skew(0deg, 0deg);
      -webkit-transform: rotate(-33deg) skew(0deg, 0deg);
      -o-transform: rotate(-33deg) skew(0deg, 0deg);
      -ms-transform: rotate(-33deg) skew(0deg, 0deg);
      transform: rotate(-33deg) skew(0deg, 0deg);
    }
 
 
    /* Eye bridge */
    .eye-bridge {
      left: 293px;
      top: 221px;
      width: 27px;
      height: 12px;
      background-color: #fff;
      -moz-transform: rotate(0deg) skew(0deg, 0deg);
      -webkit-transform: rotate(0deg) skew(0deg, 0deg);
      -o-transform: rotate(0deg) skew(0deg, 0deg);
      -ms-transform: rotate(0deg) skew(0deg, 0deg);
      transform: rotate(0deg) skew(0deg, 0deg);
    }
 
    .eye-bridge-bottom-mask {
      left: 289px;
      top: 234px;
      width: 27px;
      height: 28px;
      border-radius: 12px 0px 11px 0px;
      -moz-transform: rotate(50deg) skew(12deg, 0deg);
      -webkit-transform: rotate(50deg) skew(12deg, 0deg);
      -o-transform: rotate(50deg) skew(12deg, 0deg);
      -ms-transform: rotate(50deg) skew(12deg, 0deg);
      transform: rotate(50deg) skew(12deg, 0deg);
      background-color: #00598E;
    }
 
    .eye-bridge-top-mask {
      left: 293px;
      top: 214px;
      width: 25px;
      height: 12px;
      border-radius: 0px 0px 12px 15px / 0px 0px 13px 13px;
      -moz-transform: rotate(0deg) skew(-36deg, 0deg);
      -webkit-transform: rotate(0deg) skew(-36deg, 0deg);
      -o-transform: rotate(0deg) skew(-36deg, 0deg);
      -ms-transform: rotate(0deg) skew(-36deg, 0deg);
      transform: rotate(0deg) skew(-36deg, 0deg);
      background-color: #00598E;
    }
 
    /* Big highlight */
    .low-highlight {
      left: 194px;
      top: 126px;
      width: 163px;
      height: 159px;
      border-radius: 100px;
      background-color: #0077C0;
      -moz-transform: rotate(-32deg);
      -webkit-transform: rotate(-32deg);
      -o-transform: rotate(-32deg);
      -ms-transform: rotate(-32deg);
      transform: rotate(-32deg);
      clip: rect(0, 163px, 53px, 0);
    }
 
 
    .low-highlight1 {
      left: 192px;
      top: 159px;
      width: 111px;
      height: 84px;
      border-radius: 67px 60px 60px 43px / 77px 60px 60px 35px;
      background-color: #0077C0;
      -moz-transform: rotate(-21deg) skew(0deg, 0deg);
      -webkit-transform: rotate(-21deg) skew(0deg, 0deg);
      -o-transform: rotate(-21deg) skew(0deg, 0deg);
      -ms-transform: rotate(-21deg) skew(0deg, 0deg);
      transform: rotate(-21deg) skew(0deg, 0deg);
    }
 
    .low-highlight2 {
      left: 222px;
      top: 138px;
      width: 118px;
      height: 84px;
      border-radius: 51px 70px 60px 51px / 51px 66px 50px 51px;
      background-color: #0077C0;
      -moz-transform: rotate(-42deg) skew(0deg, 0deg);
      -webkit-transform: rotate(-42deg) skew(0deg, 0deg);
      -o-transform: rotate(-42deg) skew(0deg, 0deg);
      -ms-transform: rotate(-42deg) skew(0deg, 0deg);
      transform: rotate(-42deg) skew(0deg, 0deg);
    }
 
    /* Nose */
    .nose-left {
      left: 282px;
      top: 248px;
      width: 17px;
      height: 5px;
      border-radius: 11px 10px 10px 10px;
      background-color: #fff;
      -moz-transform: rotate(-35deg) skew(0deg, 0deg);
      -webkit-transform: rotate(-35deg) skew(0deg, 0deg);
      -o-transform: rotate(-35deg) skew(0deg, 0deg);
      -ms-transform: rotate(-35deg) skew(0deg, 0deg);
      transform: rotate(-35deg) skew(0deg, 0deg);
    }
 
    .nose-right {
      left: 302px;
      top: 248px;
      width: 13px;
      height: 5px;
      border-radius: 11px 10px 10px 10px;
      background-color: #fff;
      -moz-transform: rotate(47deg) skew(0deg, 0deg);
      -webkit-transform: rotate(47deg) skew(0deg, 0deg);
      -o-transform: rotate(47deg) skew(0deg, 0deg);
      -ms-transform: rotate(47deg) skew(0deg, 0deg);
      transform: rotate(47deg) skew(0deg, 0deg);
    }
 
    .nose-bridge {
      left: 294px;
      top: 244px;
      width: 15px;
      height: 5px;
      border-radius: 14px 20px 0px 0px;
      background-color: #fff;
      -moz-transform: rotate(0deg) skew(0deg, 0deg);
      -webkit-transform: rotate(0deg) skew(0deg, 0deg);
      -o-transform: rotate(0deg) skew(0deg, 0deg);
      -ms-transform: rotate(0deg) skew(0deg, 0deg);
      transform: rotate(0deg) skew(0deg, 0deg);
    }
 
    .nose-mask {
      left: 292px;
      top: 248px;
      width: 16px;
      height: 16px;
      border-radius: 16px 16px 16px 16px;
      background-color: #00598E;
      -moz-transform: rotate(50deg) skew(0deg, 0deg);
      -webkit-transform: rotate(50deg) skew(0deg, 0deg);
      -o-transform: rotate(50deg) skew(0deg, 0deg);
      -ms-transform: rotate(50deg) skew(0deg, 0deg);
      transform: rotate(50deg) skew(0deg, 0deg);
    }
 
 
    /* Final highlights */
    .mid-highlight1 {
      left: 247px;
      top: 100px;
      width: 27px;
      height: 28px;
      border-radius: 19px;
      -moz-transform: rotate(22deg);
      -webkit-transform: rotate(22deg);
      -o-transform: rotate(22deg);
      -ms-transform: rotate(22deg);
      transform: rotate(22deg);
      background-color: #81CEFF;
      clip: rect(0px, 46px, 25px, 20px);
    }
 
    .mid-highlight2 {
      left: 216px;
      top: 131px;
      width: 40px;
      height: 36px;
      border-radius: 79px 40px 74px 36px;
      -moz-transform: rotate(-62deg) skew(60deg, 0deg);
      -webkit-transform: rotate(-62deg) skew(60deg, 0deg);
      -o-transform: rotate(-62deg) skew(60deg, 0deg);
      -ms-transform: rotate(-62deg) skew(60deg, 0deg);
      transform: rotate(-62deg) skew(60deg, 0deg);
      background-color: #81CEFF;
    }
 
    .top-highlight1 {
      left: 220px;
      top: 130px;
      width: 31px;
      height: 31px;
      border-radius: 79px 40px 74px 36px;
      -moz-transform: rotate(-62deg) skew(60deg, 0deg);
      -webkit-transform: rotate(-62deg) skew(60deg, 0deg);
      -o-transform: rotate(-62deg) skew(60deg, 0deg);
      -ms-transform: rotate(-62deg) skew(60deg, 0deg);
      transform: rotate(-62deg) skew(60deg, 0deg);
      background-color: #fff;
    }
 
    .top-highlight2 {
      left: 266px;
      top: 111px;
      width: 7px;
      height: 11px;
      border-radius: 0px 10px 10px 2px;
      -moz-transform: rotate(68deg) skew(33deg, 0deg);
      -webkit-transform: rotate(68deg) skew(33deg, 0deg);
      -o-transform: rotate(68deg) skew(33deg, 0deg);
      -ms-transform: rotate(68deg) skew(33deg, 0deg);
      transform: rotate(68deg) skew(33deg, 0deg);
      background-color: #fff;
    }
 
    .top-highlight3 {
      left: 262px;
      top: 116px;
      width: 9px;
      height: 9px;
      border-radius: 0px 12px 6px 17px;
      -moz-transform: rotate(-88deg) skew(33deg, 0deg);
      -webkit-transform: rotate(-88deg) skew(33deg, 0deg);
      -o-transform: rotate(-88deg) skew(33deg, 0deg);
      -ms-transform: rotate(-88deg) skew(33deg, 0deg);
      transform: rotate(-88deg) skew(33deg, 0deg);
 
      background-color: #fff;
    }
 
    .top-highlight4 {
      left: 257px;
      top: 120px;
      width: 13px;
      height: 4px;
      border-radius: 0px 12px 6px 17px;
      -moz-transform: rotate(-39deg) skew(58deg, 0deg);
      -webkit-transform: rotate(-39deg) skew(58deg, 0deg);
      -o-transform: rotate(-39deg) skew(58deg, 0deg);
      -ms-transform: rotate(-39deg) skew(58deg, 0deg);
      transform: rotate(-39deg) skew(58deg, 0deg);
      background-color: #fff;
    }
 
    .top-highlight5 {
      left: 267px;
      top: 107px;
      width: 7px;
      height: 11px;
      border-radius: 0px 10px 10px 2px;
      -moz-transform: rotate(68deg) skew(55deg, 0deg);
      -webkit-transform: rotate(68deg) skew(55deg, 0deg);
      -o-transform: rotate(68deg) skew(55deg, 0deg);
      -ms-transform: rotate(68deg) skew(55deg, 0deg);
      transform: rotate(68deg) skew(55deg, 0deg);
      background-color: #fff;
    }

Comments

Andy Read
Andy Read

A great exercise in using CSS for much more than it was intended, but I can't help but feel it's like using Maslow's hammer as a paintbrush...
(see http://en.wikipedia.org/wiki/Law_of_the_instrument)

Graeme Blackwood's picture
Graeme Blackwood
Graeme Blackwood

Andy,

In principle you are absolutely right – it would have taken a few minutes to redo the logo from scratch in Illustrator, whereas this took hours, and the resulting code is probably about the same amount of data.

However as an exercise it enabled me to fully understand the CSS3 features I have used, and I am quite sure that there will be opportunities in future where this knowledge actually works out as a time and server load saver – opening up creative possibilities that would have previously been laborious or even unfeasible to implement.

It is also worth noting that CSS3 transforms can be animated. Despite Flash-style animation being loved and hated in equal measure in this industry, in my opinion animation definitely has its place when used in the right way, and as far as I know, you can't animate SVG in the same way as you could this.

Graeme

Amanda
Amanda

Graeme!! This is AWESOME! I tried this once and gave up really quickly!! Great job!

Graeme Blackwood's picture
Graeme Blackwood
Graeme Blackwood

Thanks all!

Druplicon – rookie mistake and now amended. :) Webchick, nice idea about the sandbox – it could definitely be refined; I will look into getting one set up.

We were discussing using the :before and :after pseudo-elements to cut the code down too.

G

Anonymous
Anonymous

We need HTML ))
Iframe not working now ((

tregeagle
tregeagle

It looks awesome if you check it out in IE7
:p

Gokul Muralidharan
Gokul Muralidharan

Awesome thought and effort, Kudos to your vision in exhibiting the power of the CSS and HTML.

Deb
Deb

Yes it is. Thanks for sharing, really nice work :)

webchick
webchick

HOLY CRAP THIS IS AWESOME!!!!!!!

One *minor* thing: It's "Druplicon", not "Drupalicon" :)

How about a d.o sandbox so we can submit patches? :D

chx
chx

Amazing! Truly amazing. It's called Druplicon btw.

Rudie
Rudie

And there's also :before and :after =)

Jimmy Berry
Jimmy Berry

Very nice.

AntonioG4
AntonioG4

That... is phenomenal.... excellent work.

Add new comment