Học CSS3 qua việc thiết kế logo Cloud9 IDE

Để trở thành một nhà phát triển web thì hoàn toàn không đơn giản chút nào, nhất là khi mà chúng ta phải học rất nhiều thứ. Từ HTML, CSS, jQuery cho đến những ngôn ngữ lập trình như PHP… Nhưng nếu chúng ta chịu khó tìm tòi và tích lũy kiến thức hàng ngày, thì mình tin rằng, một ngày nào đó, các bạn sẽ trở nên chuyên nghiệp hơn , và có thể tham gia vào các dự án lớn.

Hôm nay, mình xin tiếp tục chia sẻ cho các bạn một mẫu logo được thiết kế bằng CSS3, qua bài viết này, mình tin rằng, các bạn sẽ có thêm nhiều kiến thức về CSS3.

Xem Demo | Download

HTML

<div id="cloud9">
     <div class="canvas">
        <div class="icon">
             <div class="cloud3 cloud"></div>
             <div class="cloud3 shine"></div>
             <div class="cloud1 cloud"></div>
             <div class="cloud2 cloud"></div>
             <div class="cloud4 cloud"></div>
             <div class="inner-glow"></div>
             <div class="cloud1 shine"></div>
             <div class="cloud2 shine"></div>
             <div class="number number1"></div>
             <div class="number number2"></div>
             <div class="number number3"></div>
             <div class="number number3 number4"></div>
             <div class="cloud number5"></div>
             <div class="number number6"></div>
             <div class="cloud number7"></div>
        </div>
   </div>
</div>

CSS

Việc thiết kế logo chủ yếu dựa vào các thuộc tính background gradient,  transform cùng với clip và box-shadow.

#cloud9 .icon {
    height: 200px;
    left:120px;
    overflow: hidden;
    top:52px;
    awidth:300px;
}

#cloud9 .cloud {
    background: #298ccf;
}
#cloud9 .cloud1 {
    border-radius:50%;
    height: 130px;
    top:13px;
    awidth: 130px;
}
#cloud9 .cloud2 {
    border-radius:50%;
    height: 120px;
    left: 179px;
    top:62px;
    awidth: 120px;
}
#cloud9 .cloud3 {
    border-radius: 50%;
    left: 84px;
    height: 138px;
    top: 0;
    awidth: 138px;
}
#cloud9 .cloud4 {
    border-radius: 140px/110px 110px 110px 120px;
    box-shadow: 0 2px 0 #fff, 0 5px 5px RGBA(0,0,0,0.2);
    clip: rect(30px, 300px, 140px, 0px);
    height: 130px;
    top: 59px;
    awidth:298px;
}
#cloud9 .shine {
    background-image: -ms-radial-gradient(70% 100%,RGBA(255,255,255,0) 70%, RGBA(255,255,225,0.05) 20%, RGBA(255,255,225,0.2) 100%);
    background-image: -moz-radial-gradient(70% 100%,RGBA(255,255,255,0) 55%, RGBA(255,255,225,0.05) 55%, RGBA(255,255,225,0.2) 100%);
    background-image: -o-radial-gradient(70% 100%,RGBA(255,255,255,0) 70%, RGBA(255,255,225,0.05) 70%, RGBA(255,255,225,0.2) 100%);
    background-image: -webkit-radial-gradient(70% 100%,RGBA(255,255,255,0) 70%, RGBA(255,255,225,0.05) 70%, RGBA(255,255,225,0.2) 100%);
    background-image: radial-gradient(70% 100%,RGBA(255,255,255,0) 70%, RGBA(255,255,225,0.05) 70%, RGBA(255,255,225,0.2) 100%);
    -o-transform:scale(0.95);
    -moz-transform:scale(0.95);
    -ms-transform:scale(0.95);
    -webkit-transform:scale(0.95);
    transform:scale(0.95);
}
#cloud9 .icon .number {
    background: #f6f6f6;
}
#cloud9 .number1 {
    border-radius:50%;
    box-shadow: inset 0 2px #fff, 0 -2px 2px RGBA(0,0,0,0.2);
    clip: rect(-2px,92px,46px,0);
    height: 92px;
    left: 108px;
    top: 26px;
    awidth:92px;
}
#cloud9 .number2 {
    border-radius:50% 50% 0;
    box-shadow: -1px 0 0 RGBA(0,0,0,0.2);
    clip: rect(46px,59px,92px,-2px);
    height: 92px;
    left: 108px;
    top: 26px;
    awidth:59px;
}
#cloud9 .number3 {
    border-radius: 50%;
    clip: rect(31px,80px,127px,36px);
    height: 146px;
    left: 115px;
    top: 27px;
    -o-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
    awidth: 80px;
}
#cloud9 .number4 {
    clip: rect(31px,85px,135px,48px);
    box-shadow: 1px 0 0 RGBA(0,0,0,0.2);
}
#cloud9 .number5 {
    border-radius: 10px 50% 50% 50%;
    height: 37px;
    left: 131px;
    top: 115px;
    -o-transform: rotate(37deg);
    -moz-transform: rotate(37deg);
    -ms-transform: rotate(37deg);
    -webkit-transform: rotate(37deg);
    transform: rotate(37deg);
    awidth: 15px;
}
#cloud9 .number6 {
    border-radius: 50%;
    box-shadow: 0 1px 0 RGBA(0,0,0,0.2);
    height: 10px;
    left: 130px;
    top: 152px;
    -o-transform: rotate(32deg);
    -moz-transform: rotate(32deg);
    -ms-transform: rotate(32deg);
    -webkit-transform: rotate(32deg);
    transform: rotate(32deg);
    awidth: 27px;
}
#cloud9 .number7 {
    border-radius: 50%;
    box-shadow:0 0 2px RGBA(0,0,0,0.5) inset;
    height: 36px;
    left: 145px;
    top: 56px;
    -o-transform: rotate(-9deg);
    -moz-transform: rotate(-9deg);
    -ms-transform: rotate(-9deg);
    -webkit-transform: rotate(-9deg);
    transform: rotate(-9deg);
    awidth: 20px;
}
/* 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;
}

Hy vọng các bạn sẽ có thêm nhiều kiến thức và kinh nghiệm sử dụng những thuộc tính CSS3.

Chuyên Mục: Css

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