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; }