Logos in CSS3

by J. Albert Bowden

HTML

<div id="adobe">
    <div class="canvas">
        <div class="icon">
            <div class="adobe1"></div>
            <div class="adobe2"></div>
            <div class="adobe3"></div>
        </div>
    </div>
    </div>

<p><cite><a href="http://www.ecsspert.com/adobe.php" title="Logos in CSS3">Logos in CSS3</a></cite></p>

CSS

#adobe{outline:1px solid #000; position:relative; height:300px; margin-bottom:60px}
#adobe .canvas {position:relative; height:300px;
    background-color: #f91d30;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(249, 29, 48)), to(rgb(196, 23, 37)));
    background-image: -webkit-linear-gradient(top, rgb(249, 29, 48), rgb(196, 23, 37));
    background-image: -moz-linear-gradient(top, rgb(249, 29, 48), rgb(196, 23, 37));
    background-image: -o-linear-gradient(top, rgb(249, 29, 48), rgb(196, 23, 37));
    background-image: -ms-linear-gradient(top, rgb(249, 29, 48), rgb(196, 23, 37));
    background-image: linear-gradient(top, rgb(249, 29, 48), rgb(196, 23, 37));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f91d30', EndColorStr='#c41725');
}
.adobe1,.adobe2,.adobe3 {
    background: #fff;
    position: absolute;
}
.adobe1 {
    height: 370px;
    width:80px;
    top:-40px;
    left:69px;
    -moz-transform:rotate(23deg);
    -webkit-transform:rotate(23deg);
    transform:rotate(23deg);
}
.adobe2 {
    height: 370px;
    width:80px;
    top:-40px;
    left:191px;
    -moz-transform:rotate(-23deg);
    -webkit-transform:rotate(-23deg);
    transform:rotate(-23deg);
}
.adobe3 {
    top:240px;
    height: 60px;
    left:40px;
    width:145px;
    -moz-transform:skewx(22deg);
    -webkit-transform:skewx(22deg);
    transform:skewx(22deg);
}