BMW Logo

BMW logo with pure CSS by Erhan Karadeniz - ekar.ma Strategy & Webdesign

This is a result of complex use of advanced CSS3 properties like transform, linear-gradient, box-shadow etc. As these properties are not supported in Internet Explorer, this logo won't show properly in these.
Best viewed in a webkit browser.

HTML

<div id="bmw-logo-container">
      <span class="outer-ring">
        <span class="middle-ring">
          
          <span class="gloss"></span>
          
          <span class="letter b">B</span>
          <span class="letter m">M</span>
          <span class="letter w">W</span>
          
          <span class="middle-ring-outer">
          </span>
          <span class="middle-ring-inner">
            <span class="blue-top-left"><span class="blue-top-left-inner"></span></span>
            <span class="white-top-right"><span class="white-top-right-inner"></span></span>
            <span class="white-bottom-left"><span class="white-bottom-left-inner"></span></span>
            <span class="blue-bottom-right"><span class="blue-bottom-right-inner"></span></span>
          </span>
        </span>
      </span>
    </div>

CSS

/* html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
 */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body { line-height: 1 }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block }

nav ul, ul {
    list-style: none;
    margin: 0;
}

blockquote, q { quotes: none }

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    outline: 0;
}

/* change colours to suit your needs  */

ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}

/* change colours to suit your needs  */

mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: bold;
}

del { text-decoration: line-through }

abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* change border colour to suit your needs  */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}

input, select { vertical-align: middle }

/* *        HadiseTV The Fanwall stylesheet
*        by ekar.ma | Strategy & Webdesign
*        url: http://www.ekar.ma
*        author: Erhan Karadeniz
   ================================================== */

body { font-family: 'Helvetica', Arial, Sans-Serif }

.clear {
    clear: both;
    height: 0;
    line-height: 0;
}

/* ******************************************** BMW LOGO ********
   ================================================== */

#bmw-logo-container {
    position: relative;
    width: 420px;
    height: 420px;
    margin: 0 auto;
    margin-top: 50px;
    margin-bottom: 48px;
}

.letter {
    color: #fff;
    font-size: 4.75em;
    position: absolute;
    font-weight: bold;
    text-shadow: 0px 2px 1px #000000;
    filter: dropshadow(color=#000000, offx=0, offy=1);
}

.letter.b {
    top: 40px;
    left: 59px;
    -moz-transform: scale(1) rotate(-45deg) translate(0px, 0px) skew(0deg, 0deg);
    -webkit-transform: scale(1) rotate(-45deg) translate(0px, 0px) skew(0deg, 0deg);
    -o-transform: scale(1) rotate(-45deg) translate(0px, 0px) skew(0deg, 0deg);
    -ms-transform: scale(1) rotate(-45deg) translate(0px, 0px) skew(0deg, 0deg);
    transform: scale(1) rotate(-45deg) translate(0px, 0px) skew(0deg, 0deg);
}

.letter.m {
    top: -4px;
    left: 167px;
}

.letter.w {
    top: 40px;
    right: 52px;
    -moz-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
    -webkit-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
    -o-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
    -ms-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
    transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
}

.outer-ring {
    display: inline-block;
    background: #c6d8e2; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #c6d8e2 0%, #474a4c 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#c6d8e2), color-stop(100%,#474a4c)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  #c6d8e2 0%,#474a4c 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  #c6d8e2 0%,#474a4c 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  #c6d8e2 0%,#474a4c 100%); /* IE10+ */
    background: linear-gradient(-45deg,  #c6d8e2 0%,#474a4c 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c6d8e2', endColorstr='#474a4c',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    -webkit-box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 1);
    box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 1);
    width: 420px; /*200*/
    height: 420px; /*200*/
    cursor: pointer;
    -moz-border-radius: 210px;
    -webkit-border-radius: 210px;
    border-radius: 50%;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    position: relative;
}

.middle-ring {
    background: #000;
    position: absolute;
    display: inline-block;
    width: 400px;
    height: 400px;
    -moz-border-radius: 200px;
    -webkit-border-radius: 200px;
    border-radius: 50%;
    top: 10px;
    left: 10px;
}

.middle-ring-outer {
    background: rgb(35,39,40); /* Old browsers */
    background: -moz-linear-gradient(-45deg,  rgba(0,0,0,1) 0%, rgba(194,212,221,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(194,212,221,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  rgba(0,0,0,1) 0%,rgba(194,212,221,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  rgba(0,0,0,1) 0%,rgba(194,212,221,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  rgba(0,0,0,1) 0%,rgba(194,212,221,1) 100%); /* IE10+ */
    background: linear-gradient(-45deg,  rgba(0,0,0,1) 0%,rgba(194,212,221,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#232728', endColorstr='#c2d4dd',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    position: absolute;
    width: 270px;
    height: 270px;
    -moz-border-radius: 135px;
    -webkit-border-radius: 135px;
    border-radius: 50%;
    display: inline-block;
    top: 65px;
    left: 65px;
}

.middle-ring-inner {
    background: #000;
    position: absolute;
    width: 260px;
    height: 260px;
    -moz-border-radius: 130px;
    -webkit-border-radius: 130px;
    border-radius: 50%;
    display: inline-block;
    top: 70px;
    left: 70px;
}

.blue-top-left {
    background: rgb(191,212,229); /* Old browsers */
    background: -moz-linear-gradient(-45deg,  rgba(191,212,229,1) 0%, rgba(64,87,105,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(191,212,229,1)), color-stop(100%,rgba(64,87,105,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  rgba(191,212,229,1) 0%,rgba(64,87,105,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  rgba(191,212,229,1) 0%,rgba(64,87,105,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  rgba(191,212,229,1) 0%,rgba(64,87,105,1) 100%); /* IE10+ */
    background: linear-gradient(-45deg,  rgba(191,212,229,1) 0%,rgba(64,87,105,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd4e5', endColorstr='#405769',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    position: absolute;
    width: 127px;
    height: 127px;
    -moz-border-radius-topleft: 127px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-radius: 127px 0px 0px 0px;
    border-radius: 127px 0px 0px 0px;
    display: inline-block;
    top: 1px;
    left: 1px;
}

.blue-top-left-inner {
    background: rgb(51,152,203); /* Old browsers */
    background: -moz-linear-gradient(-45deg,  rgba(51,152,203,1) 40%, rgba(148,193,240,1) 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(40%,rgba(51,152,203,1)), color-stop(99%,rgba(148,193,240,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  rgba(51,152,203,1) 40%,rgba(148,193,240,1) 99%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  rgba(51,152,203,1) 40%,rgba(148,193,240,1) 99%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  rgba(51,152,203,1) 40%,rgba(148,193,240,1) 99%); /* IE10+ */
    background: linear-gradient(-45deg,  rgba(51,152,203,1) 40%,rgba(148,193,240,1) 99%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3398cb', endColorstr='#94c1f0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    position: absolute;
    width: 122px;
    height: 122px;
    -moz-border-radius-topleft: 122px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-radius: 122px 0px 0px 0px;
    border-radius: 122px 0px 0px 0px;
    display: inline-block;
    top: 2px;
    left: 3px;
}

.white-top-right {
    background: rgb(182,184,191); /* Old browsers */
    background: -moz-linear-gradient(45deg,  rgba(182,184,191,1) 0%, rgba(159,160,167,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(182,184,191,1)), color-stop(100%,rgba(159,160,167,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(45deg,  rgba(182,184,191,1) 0%,rgba(159,160,167,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(45deg,  rgba(182,184,191,1) 0%,rgba(159,160,167,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(45deg,  rgba(182,184,191,1) 0%,rgba(159,160,167,1) 100%); /* IE10+ */
    background: linear-gradient(45deg,  rgba(182,184,191,1) 0%,rgba(159,160,167,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b6b8bf', endColorstr='#9fa0a7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    position: absolute;
    width: 127px;
    height: 127px;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-topright: 127px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-radius: 0 127px 0px 0px;
    border-radius: 0 127px 0px 0px;
    display: inline-block;
    top: 1px;
    right: 1px;
}

.white-top-right-inner {
    background: rgb(253,253,253); /* Old browsers */
    background: -moz-linear-gradient(-45deg,  rgba(253,253,253,1) 0%, rgba(165,165,165,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(253,253,253,1)), color-stop(100%,rgba(165,165,165,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  rgba(253,253,253,1) 0%,rgba(165,165,165,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  rgba(253,253,253,1) 0%,rgba(165,165,165,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  rgba(253,253,253,1) 0%,rgba(165,165,165,1) 100%); /* IE10+ */
    background: linear-gradient(-45deg,  rgba(253,253,253,1) 0%,rgba(165,165,165,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdfd', endColorstr='#a5a5a5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    position: absolute;
    width: 122px;
    height: 122px;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-topright: 122px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-radius: 0 122px 0px 0px;
    border-radius: 0 122px 0px 0px;
    display: inline-block;
    top: 2px;
    left: 2px;
}

.white-bottom-left {
    background: rgb(182,184,191); /* Old browsers */
    background: -moz-linear-gradient(45deg,  rgba(182,184,191,1) 0%, rgba(159,160,167,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(182,184,191,1)), color-stop(100%,rgba(159,160,167,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(45deg,  rgba(182,184,191,1) 0%,rgba(159,160,167,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(45deg,  rgba(182,184,191,1) 0%,rgba(159,160,167,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(45deg,  rgba(182,184,191,1) 0%,rgba(159,160,167,1) 100%); /* IE10+ */
    background: linear-gradient(45deg,  rgba(182,184,191,1) 0%,rgba(159,160,167,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b6b8bf', endColorstr='#9fa0a7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    position: absolute;
    width: 127px;
    height: 127px;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 127px;
    -webkit-border-radius: 0 0 0px 127px;
    border-radius: 0 0 0px 127px;
    display: inline-block;
    bottom: 1px;
    left: 1px;
}

.white-bottom-left-inner {
    background: rgb(253,253,253); /* Old browsers */
    background: -moz-linear-gradient(-45deg,  rgba(253,253,253,1) 0%, rgba(165,165,165,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(253,253,253,1)), color-stop(100%,rgba(165,165,165,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  rgba(253,253,253,1) 0%,rgba(165,165,165,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  rgba(253,253,253,1) 0%,rgba(165,165,165,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  rgba(253,253,253,1) 0%,rgba(165,165,165,1) 100%); /* IE10+ */
    background: linear-gradient(-45deg,  rgba(253,253,253,1) 0%,rgba(165,165,165,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdfd', endColorstr='#a5a5a5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    position: absolute;
    width: 122px;
    height: 122px;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 122px;
    -webkit-border-radius: 0 0 0px 122px;
    border-radius: 0 0 0px 122px;
    display: inline-block;
    bottom: 2px;
    left: 2px;
}

.blue-bottom-right {
    background: rgb(191,212,229); /* Old browsers */
    background: -moz-linear-gradient(-45deg,  rgba(191,212,229,1) 0%, rgba(64,87,105,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(191,212,229,1)), color-stop(100%,rgba(64,87,105,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  rgba(191,212,229,1) 0%,rgba(64,87,105,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  rgba(191,212,229,1) 0%,rgba(64,87,105,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  rgba(191,212,229,1) 0%,rgba(64,87,105,1) 100%); /* IE10+ */
    background: linear-gradient(-45deg,  rgba(191,212,229,1) 0%,rgba(64,87,105,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd4e5', endColorstr='#405769',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    position: absolute;
    width: 127px;
    height: 127px;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 127px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-radius: 0 0px 127px 0px;
    border-radius: 0 0px 127px 0px;
    display: inline-block;
    bottom: 1px;
    right: 1px;
}

.blue-bottom-right-inner {
    background: rgb(148,193,240); /* Old browsers */
    background: -moz-linear-gradient(-45deg,  rgba(148,193,240,1) 0%, rgba(51,152,203,1) 40%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(148,193,240,1)), color-stop(40%,rgba(51,152,203,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  rgba(148,193,240,1) 0%,rgba(51,152,203,1) 40%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  rgba(148,193,240,1) 0%,rgba(51,152,203,1) 40%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  rgba(148,193,240,1) 0%,rgba(51,152,203,1) 40%); /* IE10+ */
    background: linear-gradient(-45deg,  rgba(148,193,240,1) 0%,rgba(51,152,203,1) 40%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94c1f0', endColorstr='#3398cb',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    position: absolute;
    width: 122px;
    height: 122px;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 122px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-radius: 0 0px 122px 0px;
    border-radius: 0 0px 122px 0px;
    display: inline-block;
    bottom: 2px;
    left: 3px;
}

/* needs adjustment, removed for now.  */

.gloss {
    background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 70%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 70%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 70%); /* IE10+ */
    background: radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 70%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    position: absolute;
    display: inline-block;
    width: 350px;
    height: 350px;
    -moz-border-radius: 175px;
    -webkit-border-radius: 175px;
    border-radius: 50%;
    left: -20px;
    top: -30px;
}

Browser Screenshots (1)

Load Hide

More Items

Add New Comment

Showing Comments

Solitary Designs

Nice work. Looks great!
Edit: The .gloss doesn’t look blurred and its kinda weird in FF. Please check :)

4 Months ago

jamesmenera

Nice work! Pretty Cool! Firefox needs some love. So here it is!

These are the changes for Firefox to look correct

.middle-ring (add this rule)
overflow: hidden

.gloss (change the gradient)
-moz-radial-gradient(center center , ellipse farthest-corner, #FFFFFF -30%, rgba(255, 255, 255, 0) 80%) repeat scroll 0 0 transparent

.letter b (change positioning)
top: 50px

.letter m (change positioning)
top: 2px

.letter w (change positioning)
top: 47px

4 Months ago

Erhan Karadeniz

@jamesmenera
Thanks, for the adds, I will adjust the css according to your lines :)

@solitary design
True, I haven’t been able to look into this issue, but I will update it. More logo’s are following soon.

4 Months ago

Erhan Karadeniz

@jamesmenera
Thanks, for the adds, I will adjust the css according to your lines :)

@solitary design
True, I haven’t been able to look into this issue, but I will update it. More logo’s are following soon.

4 Months ago

Gavin

Love this. A version with a few tweaks here:
http://dabblet.com/gist/2474429

24 Days ago

Gavin

Developed in Chrome, didn’t check the rest.

24 Days ago

Gavin

Based on this image:

http://2.bp.blogspot.com/_clEfRZeg1Fk/Sd3DdnPQ4LI/AAAAAAAAC0A/ufnGUfoUu5Q/s1600-h/first_bmw_logo.jpg

24 Days ago

BMW Logo

HTML

CSS

Browser Screenshots (1)

More Items

Pure CSS 3D Animated...

BonBon buttons

Pure CSS3 Motion Blur

CSS3 Notebook Paper

Simple Yet Amazing CSS3...

Blurry text

The Laughing Man Logo

Flickr Loader

Add New Comment

Showing Comments

Solitary Designs

jamesmenera

Erhan Karadeniz

Erhan Karadeniz

Gavin

Gavin

Gavin

Submit Your Creation

Share

About

Login with

Recent Posts

Recent Snippets

Tags

BMW Logo

HTML

CSS

Browser Screenshots (1)

More Items

Pure CSS 3D Animated...

BonBon buttons

Pure CSS3 Motion Blur

CSS3 Notebook Paper

Simple Yet Amazing CSS3...

Blurry text

The Laughing Man Logo

Flickr Loader

Add New Comment

Showing Comments

Solitary Designs

jamesmenera

Erhan Karadeniz

Erhan Karadeniz

Gavin

Gavin

Gavin

Submit Your Creation

Share

About

Login with

Recent Posts

Recent Snippets

Tags

Share a Feedback