Dùng CSS3 tạo logo McDonalds cực kỳ đơn giản

McDonalds đang là một cái tên hot nhất hiện nay, với việc cho ra đời các cửa hiệu ở Việt Nam, thì thương hiệu này đang ngày càng được giới trẻ ưa chuộng. Với sự ăn theo thương hiệu này, hôm nay mình xin chia sẻ cho các bạn tiếp cách dùng CSS để thiết kế logo của hãng McDonalds này.

Xem Demo | Download

HTML

Chúng ta sẽ cần khung html cho việc tạo logo như sau :

<div id="mcdonalds">
            <div class="canvas">
                <div class="icon">
                    <div class="left">
                        <div class="arch1 arch"></div>
                        <div class="arch2 arch"></div>
                        <div class="glow">
                            <div class="arch1 arch"></div>
                            <div class="arch2 arch"></div>
                        </div>
                        <div class="inner">
                            <div class="arch1 arch"></div>
                            <div class="arch2 arch"></div>
                        </div>
                        <div class="hole">
                            <div class="arch1 arch"></div>
                            <div class="arch2 arch"></div>
                        </div>
                        <div class="triangle1 triangle"></div>
                        <div class="triangle2 triangle"></div>
                    </div>
                    <div class="right">
                        <div class="arch1 arch"></div>
                        <div class="arch2 arch"></div>
                        <div class="glow">
                            <div class="arch1 arch"></div>
                            <div class="arch2 arch"></div>
                        </div>
                        <div class="inner">
                            <div class="arch1 arch"></div>
                            <div class="arch2 arch"></div>
                        </div>
                        <div class="triangle1 triangle"></div>
                        <div class="hole">
                            <div class="arch1 arch"></div>
                            <div class="arch2 arch"></div>
                        </div>
                    </div>
                    <div class="border1"></div>
                    <div class="border2"></div>
                </div>
            </div>
    </div>

CSS

Và đây là toàn bộ đoạn css thiết kế cho logo :

/* general styles  */
.canvas {
    display: block;
    overflow: hidden;
    position: relative;
    top: 0px;
    text-indent:-9999px;
    z-index: 10;
}
.icon, .icon * {
    display: block;
    position: absolute;
}

#mcdonalds .canvas{
    background: #cc0001;
	height: 304px;
    awidth:540px;
}
#mcdonalds .icon {
    left:22px;
}
#mcdonalds .arch {
    background: #ffc20f;
    border-radius:139px/410px;
    clip:rect(0 75px 201px 0);
    height: 410px;
    position:absolute;
    top:49px;
    -o-transform:skewx(-1deg);
    -moz-transform:skewx(-1deg);
    -ms-transform:skewx(-1deg);
    -webkit-transform:skewx(-1deg);
    transform:skewx(-1deg);
    awidth:139px;
}
#mcdonalds .arch1 {
    left:130px;
}
#mcdonalds .arch2 {
    left:135px;
    -o-transform: skewx(0deg) scalex(-0.9);
    -moz-transform: skewx(0deg) scalex(-0.9);
    -ms-transform: skewx(0deg) scalex(-0.9);
    -webkit-transform: skewx(0deg) scalex(-0.9);
    transform: skewx(0deg) scalex(-0.9);
}
#mcdonalds .glow {
    clip:rect(0px 267px 240px 130px);
    left: 29px;
    position: absolute;
    top: 16px;
    -o-transform: scalex(0.83) scaley(0.95);
    -moz-transform: scalex(0.83) scaley(0.95);
    -ms-transform: scalex(0.83) scaley(0.95);
    -webkit-transform: scalex(0.83) scaley(0.95);
    transform: scalex(0.83) scaley(0.95);
}
#mcdonalds .glow .arch {
    background-image: -o-linear-gradient(bottom,rgb(247,245,103) 70%,rgb(255,195,15) 100%);
    background-image: -moz-linear-gradient(bottom,rgb(247,245,103) 70%,rgb(255,195,15) 100%);
    background-image: -ms-linear-gradient(bottom,rgb(247,245,103) 70%,rgb(255,195,15) 100%);
    background-image: -webkit-linear-gradient(bottom,rgb(247,245,103) 70%,rgb(255,195,15) 100%);
    background-image: linear-gradient(bottom,rgb(247,245,103) 70%,rgb(255,195,15) 100%);
}
#mcdonalds .inner {
    clip:rect(0 280px 222px 130px);
    left: 61px;
    position: absolute;
    top: 23px;
    -o-transform: scalex(0.66);
    -moz-transform: scalex(0.66);
    -ms-transform: scalex(0.66);
    -webkit-transform: scalex(0.66);
    transform: scalex(0.66);
}
#mcdonalds .inner .arch2 {
    left:142px;
}
#mcdonalds .hole {
    clip:rect(0 270px 230px 130px);
    left: 61px;
    position: absolute;
    top: 23px;
    -o-transform: scalex(0.66);
    -moz-transform: scalex(0.66);
    -ms-transform: scalex(0.66);
    -webkit-transform: scalex(0.66);
    transform: scalex(0.66);
}
#mcdonalds .hole .arch {
    background: #cc0001;
}
#mcdonalds .hole .arch1 {
    clip: rect(5px 57px 201px 0);
    left: 158px;
    -o-transform: skewx(0deg);
    -moz-transform: skewx(0deg);
    -ms-transform: skewx(0deg);
    -webkit-transform: skewx(0deg);
    transform: skewx(0deg);
}
#mcdonalds .hole .arch2 {
    clip:rect(0 55px 201px 0);
    left:124px;
    -o-transform: skewx(-2deg) scalex(-0.9);
    -moz-transform: skewx(-2deg) scalex(-0.9);
    -ms-transform: skewx(-2deg) scalex(-0.9);
    -webkit-transform: skewx(-2deg) scalex(-0.9);
    transform: skewx(-2deg) scalex(-0.9);
}
#mcdonalds .triangle {
    border:14px solid transparent;
    border-bottom-color: #f4ca02;
    position:absolute;
}
#mcdonalds .triangle1 {
    left:135px;
    top:217px;
}
#mcdonalds .triangle2 {
    left:236px;
    top:205px;
}
#mcdonalds .right {
    clip:rect(0 249px 250px 0px);
    left: 498px;
    position: absolute;
    -o-transform: scalex(-1);
    -moz-transform: scalex(-1);
    -ms-transform: scalex(-1);
    -webkit-transform: scalex(-1);
    transform: scalex(-1);
}
#mcdonalds .right .glow {
    left:40px;
}
#mcdonalds .right .inner {
    left:71px;
}
#mcdonalds .right .inner .arch2 {
    left:141px;
    -o-transform: skewx(0deg) scalex(-0.9) rotate(1deg);
    -moz-transform: skewx(0deg) scalex(-0.9) rotate(1deg);
    -ms-transform: skewx(0deg) scalex(-0.9) rotate(1deg);
    -webkit-transform: skewx(0deg) scalex(-0.9) rotate(1deg);
    transform: skewx(0deg) scalex(-0.9) rotate(1deg);
}
#mcdonalds .border1 {
    background: #f4cb01;
    height: 15px;
    left:230px;
    position:absolute;
    top:229px;
    awidth:38px;
}
#mcdonalds .border2 {
    background: #cc0001;
    height: 15px;
    left:229px;
    position:absolute;
    top:238px;
    awidth:40px;
}

Mình mong là các bạn sẽ có thể sử dụng logo này cho những trang web của mình, và nếu tìm hiểu kỹ thì các bạn có thể nâng cao trình độ css3 của mình đó.

Chúc các bạn thành công !

Chuyên Mục: Css

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