Creating HTML based logos is quite simple with CSS3.
By using some of the CSS3 properties you can easily create simple shape and text based logos.

I have experimented Blogger logo with CSS3.

1. Styles.

.blogger {
            width: 512px;
            height: 512px;
            margin: auto;
        }
        
        .wrapper {
            width: 100%;
            height: 82%;
            float: left;
            background: #f3660f;
            border-radius: 80px;
            padding-top: 18%;
            position: relative;
            -webkit-box-shadow: 0px 5px 3px 1px rgba(0, 0, 0, 0.5);
            box-shadow: 0px 5px 3px 1px rgba(0, 0, 0, 0.5);
        }
        
        .gradTop {
            position: absolute;
            margin: auto;
            width: 90%;
            left: 5%;
            top: 5%;
            height: 50%;
            border-radius: 80px 80px 20px 20px;
            background: #fac4a2;
            /* Old browsers */
            background: -moz-linear-gradient(top, #fac4a2 0%, #f57a2f 100%);
            /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fac4a2), color-stop(100%, #f57a2f));
            /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top, #fac4a2 0%, #f57a2f 100%);
            /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top, #fac4a2 0%, #f57a2f 100%);
            /* Opera 11.10+ */
            background: -ms-linear-gradient(top, #fac4a2 0%, #f57a2f 100%);
            /* IE10+ */
            background: linear-gradient(to bottom, #fac4a2 0%, #f57a2f 100%);
            /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fac4a2', endColorstr='#f57a2f', GradientType=0);
            /* IE6-9 */
        }
        
        .logo {
            width: 60%;
            height: 80%;
            position: relative;
            border-radius: 100px;
            margin: auto;
        }
        
        .logo .top {
            background: #fff;
            width: 85%;
            border-radius: 100px 100px 25px 0;
            position: absolute;
            top: 15px;
            height: 50%;
            -webkit-box-shadow: 0px -5px 5px 0px rgba(0, 0, 0, 0.5);
            box-shadow: 0px -5px 5px 0px rgba(0, 0, 0, 0.5);
        }
        
        .logo .bottom {
            background: #fff;
            width: 100%;
            border-radius: 0 25px 100px 100px;
            position: absolute;
            bottom: 15px;
            height: 50%;
            -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.5);
            box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.5);
        }
        
        .logo .top .inner {
            width: 40%;
            height: 30%;
            background: #f69153;
            border-radius: 25px;
            margin: 30% auto;
        }
        
        .logo .bottom .inner {
            width: 50%;
            height: 30%;
            background: #f3660f;
            border-radius: 25px;
            margin: 15% 0 0 26%;
        }

2. HTML

Download Demo | View Demo

CSS3 Logo

1. Styles

body {
    background: #000;
}

.css3 {
    width: 512px;
    height: 512px;
    margin: auto;
    background-size: 200%;
    position: relative;
}

.top,
.middle {
    width: 260px;
    height: 52px;
    margin: auto;
    display: block;
    position: absolute;
    left: 145px;
    top: 157px;
    -moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-135deg) skewY(0deg);
    -webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-13deg) skewY(0deg);
    transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-15deg) skewY(0deg);
}

.middle {
    left: 127px;
    top: 241px;
}

.vertical {
    width: 52px;
    height: 232px;
    position: absolute;
    right: 126px;
    top: 157px;
    -moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-135deg) skewY(0deg);
    -webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-13deg) skewY(0deg);
    transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-16deg) skewY(0deg);
}

.bottomRight {
    width: 138px;
    height: 46px;
    margin: auto;
    display: block;
    position: absolute;
    left: 229px;
    top: 367px;
    -webkit-transform: scale(1) rotate(-18deg) translateX(0px) translateY(0px) skewX(-30deg) skewY(0deg);
    -moz-transform: scale(1) rotate(-18deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    transform: scale(1) rotate(-18deg) translateX(0px) translateY(0px) skewX(-30deg) skewY(0deg);
}

@-moz-document url-prefix() {
    .bottomRight {
        width: 131px;
    }
}

.bottomLeft {
    width: 134px;
    height: 52px;
    margin: auto;
    display: block;
    position: absolute;
    left: 105px;
    top: 360px;
    -webkit-transform: scale(1) rotate(22deg) translateX(0px) translateY(0px) skewX(7deg) skewY(0deg);
    -moz-transform: scale(1) rotate(22deg) translateX(0px) translateY(0px) skewX(7deg) skewY(0deg);
    transform: scale(1) rotate(22deg) translateX(0px) translateY(0px) skewX(7deg) skewY(0deg);
}

.bottomUp {
    width: 53px;
    height: 61px;
    position: absolute;
    left: 109px;
    top: 325px;
    -webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-13deg) skewY(0deg);
    -moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-135deg) skewY(0deg);
    transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-15deg) skewY(0deg);
}

.top,
.middle,
.vertical,
.bottomRight,
.bottomLeft,
.bottomUp {
    background: #ff4800;
}

2. HTML Code

Download Demo | View Demo