Thiết kế Logo Windows với chỉ HTML và CSS3

Xem: 837    Tải: 0   Thảo luận: 0   Mục: HTML-CSS template   Lĩnh vực: Nghệ thuật - Nhiếp ảnh

0 điểm   ( 3 đánh giá ) File đã được kiểm thử

Sáng tạo là điều không thể thiếu khi thiết kế web hay làm về các lĩnh vực đồ họa. Nhằm mang lại cho các bạn thêm sức sáng tạo khi sử dụng các thuộc tính mà CSS3 mang lại. Hôm nay chúng ta sẽ tiếp tục thiết kế logo bằng CSS3, và lần này là logo Windows.

Đây là kết quả mà chúng ta sẽ có được khi hoàn thành bài viết :

HTML

Để thiết kế 4 mảnh ghép trong logo windows, chúng ta cần khung html như sau:

<div id="windows">
   <div class="canvas">
       <div class="icon">
 
            <div class="window1">
                 <div class="window-e1"></div>
                 <div class="window-e2 shadow1"></div>
                 <div class="window-e2 shadow2"></div>
                 <div class="window-e2"></div>
                 <div class="window-e3"></div>
                 <div class="window-e4 shadow3"></div>
                 <div class="window-e4"></div>
              </div>
 
              <div class="window4">
                  <div class="window-e1 shadow3"></div>
                  <div class="window-e1"></div>
                  <div class="window-e2 shadow1"></div>
                  <div class="window-e2 shadow2"></div>
                  <div class="window-e2"></div>
                  <div class="window-e3"></div>
                  <div class="window-e4"></div>
               </div>
 
               <div class="window3">
                   <div class="window-e1"></div>
                   <div class="window-e2 shadow1"></div>
                   <div class="window-e2 shadow2"></div>
                   <div class="window-e2"></div>
                   <div class="window-e3"></div>
                   <div class="window-e4 shadow3"></div>
                   <div class="window-e4"></div>
                </div>
 
                <div class="window2">
                   <div class="window-e1 shadow3"></div>
                   <div class="window-e1"></div>
                   <div class="window-e2 shadow1"></div>
                   <div class="window-e2 shadow2"></div>
                   <div class="window-e2"></div>
                   <div class="window-e3"></div>
                   <div class="window-e4"></div>
                </div>
       </div>
   </div>
</div>

CSS

Để logo có thể định hình , chúng ta sẽ cần đoạn css bên dưới :

#windows .canvas, .window-e4 {
    background: #4192d1;
}
#windows .icon {
    left:211px;
    top:24px;
    -o-transform: rotate(16deg);
    -moz-transform: rotate(16deg);
    -ms-transform: rotate(16deg);
    -webkit-transform: rotate(16deg);
    transform: rotate(16deg);
}
.window-e1,.window2,.window3,.window4 {
    position:absolute;
}
.window-e1 {
    border-radius:100px/67px;
    clip: rect(0px 77px 67px 0);
    height: 67px;
    left: 9px;
    position: absolute;
    top: 11px;
    width:102px;
}
.window-e2 {
    height: 85px;
    left: 0;
    position: absolute;
    top:27px;
    -o-transform:skewy(-30deg);
    -moz-transform:skewy(-30deg);
    -ms-transform:skewy(-30deg);
    -webkit-transform:skewy(-30deg);
    transform:skewy(-30deg);
    width:25px;
}
.window-e3 {
    height: 41px;
    left: 24px;
    position: absolute;
    top: 64px;
    width: 62px;
}
.window-e4 {
    opacity:1;
    border-radius:100px/67px;
    clip:rect(0 77px 12px 16px);
    height: 67px;
    left: 9px;
    position: absolute;
    top: 96px;
    width:100px;
}
.window1 {
    left:0;
    position: absolute;
    top:0;
}
.window1 .window-e1,.window1 .window-e2 {
    background: #d53407;
}
.window1 .window-e3 {
    background-image: -ms-radial-gradient(100% 100%, circle, #ebbd2c, #D53407 60%);
    background-image: -moz-radial-gradient(100% 100%, circle, #ebbd2c, #D53407 60%);
    background-image: -o-radial-gradient(100% 100%, circle, #ebbd2c, #D53407 60%);
    background-image: -webkit-radial-gradient(100% 100%, circle, #ebbd2c, #D53407 60%);
    background-image: radial-gradient(100% 100%, circle, #ebbd2c, #D53407 60%);
}
.window2 {
    left: 183px;
    position:absolute;
    -o-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    top: 119px;
}
.window2 .window-e1 {
    background-image: -ms-radial-gradient(100% 0%, circle, #c7d78e, #7dae1c 50%);
    background-image: -moz-radial-gradient(100% 0%, circle, #c7d78e, #7dae1c 50%);
    background-image: -o-radial-gradient(100% 0%, circle, #c7d78e, #7dae1c 50%);
    background-image: -webkit-radial-gradient(100% 0%, circle, #c7d78e, #7dae1c 50%);
    background-image: radial-gradient(100% 0%, circle, #c7d78e, #7dae1c 50%);
}
.window2 .window-e2,.window2 .window-e3 {
    background: #7dae1c;
}
.window3 {
    left: 0;
    position: absolute;
    top:95px;
}
.window3 .window-e1,.window3 .window-e2,.window3 .window-e3 {
    background: #3576ac;
}
.window3 .window-e1 {
    background-image: -ms-radial-gradient(100% 0%, circle, #b7d7ec, #3576ac 50%);
    background-image: -moz-radial-gradient(100% 0%, circle, #b7d7ec, #3576ac 50%);
    background-image: -o-radial-gradient(100% 0%, circle, #b7d7ec, #3576ac 50%);
    background-image: -webkit-radial-gradient(100% 0%, circle, #b7d7ec, #3576ac 50%);
    background-image: radial-gradient(100% 0%, circle, #b7d7ec, #3576ac 50%);
}
.window4 {
    left: 183px;
    position:absolute;
    -o-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    top: 214px;
}
.window4 .window-e1,.window4 .window-e2 {
    background: #fac112;
}
.window4 .window-e3 {
    background-image: -ms-radial-gradient(100% 100%, circle, #f5e2a8, #fac112 70%);
    background-image: -moz-radial-gradient(100% 100%, circle, #f5e2a8, #fac112 70%);
    background-image: -o-radial-gradient(100% 100%, circle, #f5e2a8, #fac112 70%);
    background-image: -webkit-radial-gradient(100% 100%, circle, #f5e2a8, #fac112 70%);
    background-image: radial-gradient(100% 100%, circle, #f5e2a8, #fac112 70%);
}
#windows .registered {
    left:190px;
    position: absolute;
    -o-transform: rotate(-16deg);
    -moz-transform: rotate(-16deg);
    -ms-transform: rotate(-16deg);
    -webkit-transform: rotate(-16deg);
    transform: rotate(-16deg);
    top:160px;
}
#windows .shadow1,#windows .shadow2,#windows .shadow3 {
    background: #3c86c0;
}
.window1 .window-e4,.window3 .window-e4 {
    top:101px;
}
.window1 .shadow1,.window3 .shadow1 {
    left: 65px;
    clip: rect(0px 30px 94px 21px);
    -o-transform: skewy(30deg);
    -moz-transform: skewy(30deg);
    -ms-transform: skewy(30deg);
    -webkit-transform: skewy(30deg);
    transform: skewy(30deg);
    top: 16px;
}
.window1 .shadow2,.window3 .shadow2 {
    clip:rect(50px 40px 90px 5px);
    top:30px;
    width:32px;
}
.window1 .shadow3,.window3 .shadow3 {
    clip: rect(0 77px 12px 16px);
    top:96px;
}
.window2 .shadow1,.window4 .shadow1 {
    clip:rect(0px 10px 90px 5px);
    left: -10px;
    top: 28px;
}
.window2 .shadow2,.window4 .shadow2 {
    clip:rect(70px 40px 90px 5px);
    left:-6px;
    top:-44px;
}
.window2 .shadow3,.window4 .shadow3 {
    clip:rect(0 73px 22px 0px);
    left:9px;
    top:6px;
}
/* general styles */
.canvas {
    display: block;
    overflow: hidden;
    position: relative;
    top: 0px;
    text-indent:-9999px;
    z-index: 10;
    height: 304px;
    width:540px;
}
.icon, .icon * {
    display: block;
    position: absolute;
}

Xong bài viết này, chắc hẳn là các bạn cũng sẽ cảm thấy giống như mình, công nghệ thì không có giới hạn, chỉ có sức sáng tạo của chúng ta là chưa đạt tới thôi. Hãy cố sáng tạo thêm nhiều mẫu logo thật đẹp nha các bạn.

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

Thiết kế Logo Windows với chỉ HTML và CSS3

Thiết kế Logo Windows với chỉ HTML và CSS3 Đăng ngày 08-08-2014  Sáng tạo là điều không thể thiếu khi thiết kế web hay làm về các lĩnh vực đồ họa. Nhằm mang lại cho các bạn thêm sức sáng tạo khi sử dụng các thuộc tính mà CSS3 mang lại. Hôm nay chúng ta sẽ tiếp tục thiết kế logo bằng CSS3, và lần này là logo Windows. 5/10 837

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 
Hỗ trợ kỹ thuật cho thành viên:
Tổng đài: (+84) 246. 32.979.36
Số di động (Hotline): 0969.091.265
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn
File gợi ý cho bạn
File tải nhiều nhất
Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: (+844) 6. 32.979.36;