Apple logo in 100% pure CSS

23 September 2011

Try it yourself on JSfiddle.netAfter creating the android logo in CSS only, I decided to skip a few diffeculty levels and try to create the Apple logo in CSS only, using as less DIV's as possible.

Next challenge is to recreate the oldskool rainbow version of the Apple logo...

This demo is tested in IE9, Firefox 6.3, Chrome 13 and Opera for Win 11.5


All the HTML you'll need:

<div class="apple">
    <div class="top"><span></span></div>
    <div class="butt"><span></span></div>
    <div class="bite"></div>
</div>

And this is the CSS file needed. All the dimensions are in percentage, so to change the dimensions, all you need to change is the width and height of the main shape. The same applies for the colors, these are grouped in the first two declarations to allow easy changing of colors.

.apple, .butt:before, .top span:after, .butt:after, .top:before, .top:after, .butt:before, .butt:after {
    background: #FFF; /* foreground color */
}
body, .bite, .butt span, .butt, .top, .top span {
    background: #CCC; /* background color */
}
.apple {
    width: 376px;
    height: 334px;
    border-radius: 36% 36% 41% 41% / 42% 42% 75% 75%;  
    position: relative;
    margin: 81px 0px 0px 10px;
}
.bite {
    position: absolute;
    width: 60%;
    height: 62%;
    right: -40%;
    top: 8%;
    border-radius: 60%;
}
.butt span {
    display: block;
    position: absolute;
    border-radius: 100% 100% 0% 0%;
    width: 24.5%;
    height: 400%;
    bottom: -239%;
    left: 38%;
}
.butt {
    position: absolute;
    width: 100%;
    height: 4%;
    bottom: -1%;
}
.butt:before {
    content: '';
    position: absolute;
    width: 24%;
    height: 400%;
    border-radius: 0% 0% 100% 100%;
    left: 21%;
    bottom: 38%;
}
.butt:after {
    content: '';
    position: absolute;
    width: 23.4%;
    height: 400%;
    border-radius: 0% 0% 100% 100%;
    right: 21%;
    bottom: 38%;
}


.top span {
    display: block;
    position: absolute;
    border-radius: 0 0 44% 44% / 0 0 100% 100%;
    width: 63%;
    height: 259%;
    top: -92%;
    left: 18.6%;
    z-index: 3;
}
.top span:after {
    border-radius: 100% 0 100% 0;
    content: "";
    height: 242%;
    left: 41%;
    position: absolute;
    top: -193%;
    width: 90%;
}
.top {
    position: absolute;
    width: 42%;
    height: 4%;
    top: 0px;
    left: 29%;
}
.top:before {
    content: '';
    position: absolute;
    width: 62%;
    height: 260%;
    border-radius: 100% 100% 0% 0% / 100% 200% 0% 0%;
    left: -27%;
    top: 1%;
}
.top:after {
    content: '';
    position: absolute;
    width: 62%;
    height: 260%;
    border-radius: 100% 100% 0% 0% / 200% 100% 0% 0%;
    right: -27%;
    top: 1%;
}
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

    Dalton

    24 September 2011

    Very nice!!

  2. Gravatar

    Heather

    23 September 2011

    Thats pretty freakin awesome! You should be proud of yourself ^_^

  3. Gravatar

    Tjarko

    23 September 2011

    Ossum css!! Especially trimming the code to less and less CSS.