Tỉ mỉ với logo Apple được làm từ CSS3

Với logo Apple thì có lẽ là chúng ta đã quá quen thuộc rồi, và sẽ rất đơn giản nếu như chúng ta dùng các phầm mềm như Photoshop để tạo logo này. Thế còn CSS3 thì sao ? Có lẽ đến bây giờ thì mình có thể quả quyết là với các thuộc tính CSS3 mang lại, chúng ta có thể vẽ nhiều hơn chúng ta tưởng về những logo hay các hình thù khác nhau.

Đây là logo mà chúng ta sẽ phải thực hiện trong bài viết này :

Xem Demo | Download

HTML

Sau đây là toàn bộ các thẻ html mà chúng ta cần cho việc thiết kế logo.

 <div id="apple">
            <div class="canvas">
                <div class="icon">
                    <div class="slice1 slice">
                        <div class="apple1"></div>
                        <div class="apple2 apple1"></div>
                        <div class="apple3"></div>
                        <div class="apple4 apple3"></div>
                        <div class="apple5"></div>
                    </div>
                    <div class="slice2 slice">
                        <div class="apple1"></div>
                        <div class="apple2 apple1"></div>
                        <div class="apple3"></div>
                        <div class="apple4 apple3"></div>
                        <div class="apple5"></div>
                    </div>
                    <div class="slice3 slice">
                        <div class="apple1"></div>
                        <div class="apple2 apple1"></div>
                        <div class="apple3"></div>
                        <div class="apple4 apple3"></div>
                        <div class="apple5"></div>
                    </div>
                    <div class="slice4 slice">
                        <div class="apple1"></div>
                        <div class="apple2 apple1"></div>
                        <div class="apple3"></div>
                        <div class="apple4 apple3"></div>
                        <div class="apple5"></div>
                    </div>
                    <div class="slice5 slice">
                        <div class="apple1"></div>
                        <div class="apple2 apple1"></div>
                        <div class="apple3"></div>
                        <div class="apple4 apple3"></div>
                        <div class="apple5"></div>
                    </div>
                    <div class="slice6 slice">
                        <div class="apple1"></div>
                        <div class="apple2 apple1"></div>
                        <div class="apple3"></div>
                        <div class="apple4 apple3"></div>
                        <div class="apple5"></div>
                    </div>
                    <div class="slice">
                        <div class="apple6"><div class="apple61"></div></div>
                        <div class="apple7"></div>
                        <div class="apple8">
                        </div>
                        <div class="apple9"></div>
                    </div>
                </div>
            </div>
</div>

CSS

Và đoạn css giúp chúng ta thiết kế lên logo này :

#apple .canvas,.apple6,.apple7,.apple8,.apple61 {
    background: #f2f2f2;
}
#apple .icon {
    left:184px;
    height: 202px;
    top:51px;
    awidth: 172px;
}
.apple1 {
    border-radius:108px 108px 108px 94px/128px 128px 128px 128px;
    height:128px;
    top:47px;
    awidth:108px;
}
.apple2 {
    left:72px;
}
.apple3 {
    border-radius:22px 64px 64px 64px/106px 106px 106px 106px;
    height: 106px;
    left:12px;
    -o-transform:rotate(-25deg);
    -moz-transform:rotate(-25deg);
    -ms-transform:rotate(-25deg);
    -webkit-transform:rotate(-25deg);
    transform:rotate(-25deg);
    top:98px;
    awidth: 64px;
}
.apple4 {
    border-radius:64px 22px 64px 64px/106px 106px 106px 106px;
    left:103px;
    -o-transform:rotate(25deg);
    -moz-transform:rotate(25deg);
    -ms-transform:rotate(25deg);
    -webkit-transform:rotate(25deg);
    transform:rotate(25deg);
}
.apple5 {
    height: 145px;
    left:54px;
    top:53px;
    awidth:70px;
}
.apple6 {
    left:50px;
    -o-transform:scaley(0.5);
    -moz-transform:scaley(0.5);
    -ms-transform:scaley(0.5);
    -webkit-transform:scaley(0.5);
    transform:scaley(0.5);
    top:14px;
}
.apple61 {
    border-radius:20px;
    height: 80px;
    -o-transform: rotate(-45deg) scale(0.9);
    -moz-transform: rotate(-45deg) scale(0.9);
    -ms-transform: rotate(-45deg) scale(0.9);
    -webkit-transform: rotate(-45deg) scale(0.9);
    transform: rotate(-45deg) scale(0.9);
    awidth: 80px;
}
.apple7 {
    border-radius:50%;
    height: 22px;
    left:66px;
    top:192px;
    awidth: 47px;
}
.apple8 {
    border-radius:50%;
    height: 85px;
    left:144px;
    top:63px;
    awidth: 85px;
}
#apple .slice {
    height: 200px;
    position: absolute;
    awidth:180px;
}
#apple .slice * {
    position: absolute;
}
#apple .slice1 *,.apple9:before,.apple9:after {
    background: #62bb47;
}
#apple .slice2 * {
    background: #fcb827;
}
#apple .slice3 * {
    background: #f6821f;
}
#apple .slice4 * {
    background: #e03a3e;
}
#apple .slice5 * {
    background: #963d97;
}
#apple .slice6 * {
    background: #009ddc;
}
#apple .slice1 {
    clip:rect(0 180px 73px 0px);
}
#apple .slice2 {
    clip:rect(73px 180px 98px 0px);
}
#apple .slice3 {
    clip:rect(98px 180px 123px 0px);
}
#apple .slice4 {
    clip:rect(123px 180px 148px 0px);
}
#apple .slice5 {
    clip:rect(148px 180px 174px 0px);
}
#apple .slice6 {
    clip:rect(174px 180px 205px 0px);
}
.apple9 {
    left:122px;
    top:-18px;
    -o-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg);
}
.apple9:before,.apple9:after {
    border-radius:50%;
    content:"#";
    display: block;
    height: 90px;
    position: absolute;
    text-indent: -9999px;
    awidth:90px;
}
.apple9:before {
    clip:rect(0 13px 80px 0px);
}
.apple9:after {
    clip:rect(14px 100px 76px 76px);
    left:-64px;
}
#apple .header h2 {
    text-indent:200px;
}
/* general styles */
.canvas {
    display: block;
    overflow: hidden;
    position: relative;
    top: 0px;
    text-indent:-9999px;
    z-index: 10;
	height: 304px;
    awidth:540px;
}
.icon, .icon * {
    display: block;
    position: absolute;
}

Chúc các bạn có thêm nhiều sáng tạo và ý tưởng mới cho các mẫu logo của mình.

Chuyên Mục: Css

Bài viết được đăng bởi webmaster