Windows Metro Style Boxes với CSS3

Xem: 2979    Tải: 0   Thảo luận: 0   Mục: HTML-CSS template   Lĩnh vực: Khác

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


Tất cả chúng ta đều biết Windows Metro UI rất được các web developers sử dụng bởi giao diện đẹp và rất thân thiện với người dùng, với những màu sắc và hiệu ứng động  bắt mắt. Hôm nay mình sẽ chia sẻ cho các bạn một đoạn CSS3 giúp các bạn có thể thiết kế cho chính trang web hay blog của mình theo phong cách Metro. Điều đặc biệt là nó có khả năng responsive nữa.

HTML

Đầu tiên, chúng ta sẽ cần có khung chuẩn HTML như sau :

<div class="metro-boxes">
     <a class="metro-box blue-gradient wide" href="">
         <div class="metro-box-photo"><img src="1.jpg" alt=""/></div>
         <div class="metro-box-icon"><i class="icon-play"></i></div>
     </a>
     <a class="metro-box blue-gradient normal " href="">
         <div class="metro-box-icon"><i class="icon-facebook"></i></div>
         <div class="metro-box-title"><h5>Facebook</h5></div>
     </a>
     <a class="metro-box yellow-gradient normal " href="">
         <div class="metro-box-icon"><i class="icon-music"></i></div>
         <div class="metro-box-title"><h5>Music</h5></div>
     </a>
      <a class="metro-box red-gradient normal" href="">
         <div class="metro-box-icon"><i class="icon-youtube"></i></div>
         <div class="metro-box-title"><h5>YouTube</h5></div>
     </a>
 
     <a class="metro-box green-gradient normal" href="">
         <div class="metro-box-icon"><i class="icon-windows"></i></div>
         <div class="metro-box-title"><h5>Windows</h5></div>
     </a>
      <a class="metro-box orange-gradient wide last-in-row" href="">
         <div class="metro-box-photo"><img src="2.jpg" alt=""/></div>
         <div class="metro-box-icon"><i class="icon-camera"></i></div>
     </a>
       <a class="metro-box violet-gradient wide first-in-row" href="">
         <div class="metro-box-icon"><i class="icon-skype"></i></div>
         <div class="metro-box-title"><h5>Skype</h5></div>
     </a>
      <a class="metro-box black-gradient normal " href="">
         <div class="metro-box-icon"><i class="icon-music"></i></div>
         <div class="metro-box-title"><h5>Music</h5></div>
     </a>
      <a class="metro-box red-gradient normal last-in-row" href="">
         <div class="metro-box-icon"><i class="icon-pinterest"></i></div>
         <div class="metro-box-title"><h5>Pinterest</h5></div>
     </a>
   </div>

CSS

Đầu tiên, chúng ta sẽ định dang chung cho các boxes.

/* CSS Document */
 
.metro-boxes {
        position: relative;
        width: 100%;
    }
 
    .metro-boxes img {
        max-width: none !important;
    }
 
    /* Metro box
    -----------------------------------------------------*/
 
    .metro-box  {
        position: relative;
        height: 170px;
        margin-right: 1%;
        margin-bottom: 1%;
        float: left;
        text-align: center;
        color: rgb(255,255,255);
        overflow: hidden;
        display: block;
    }
 
    .metro-box.normal {
        width: 19.2%;
    }
 
    .metro-box.wide  {
        width: 39.2%;
    }
 
    .metro-box.fullwidth {
        width: 100%;
        margin-right: none !important;
        clear: both;
    }
 
    .metro-box.first-in-row {
        position: relative;
        clear: left;
    }
 
    .metro-box-title {
        position: absolute;
        bottom: 0;
        left: 0;
    }
 
    .metro-box-title h5 {
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
        border-left: 5px solid rgb(255,255,255);
        padding: 0 10px;
        margin: 14px 0;
        line-height: 10px;
        transition: all 0.1s ease-in-out;
        -moz-transition: all 0.1s ease-in-out;
        -webkit-transition: all 0.1s ease-in-out;
        -o-transition: all 0.1s ease-in-out;
        text-align: left;
    }
 
    .metro-box-icon {
        position: relative;
        display: inline-block;
        margin-top: 28px;
        width: 80px;
        height: 80px;
        border: 3px solid rgb(255,255,255);
        border-radius: 50%;
        transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -webkit-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
    }  
 
    .metro-box-icon i {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 30px;
        height: 30px;
        margin-top: -15px;
        margin-left: -15px;
        font-size: 30px;
        text-align: center;
        color: rgb(255,255,255);
        transition: all 0.6s ease-in-out 0.2s;
        -moz-transition: all 0.6s ease-in-out 0.2s;
        -webkit-transition: all 0.6s ease-in-out 0.2s;
        -o-transition: all 0.6s ease-in-out 0.2s;
    }  
 
    .metro-box-photo,
    .metro-box-video {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
    }
 
    .metro-box .metro-box-photo img {
        opacity: .5;
        transition: opacity 0.3s ease-in-out, transform 1.5s ease-in-out 0.25s;
        -moz-transition: opacity 0.3s ease-in-out, transform 1.5s ease-in-out 0.25s;
        -webkit-transition: opacity 0.3s ease-in-out, -webkit-transform 1.5s ease-in-out 0.25s;
        -o-transition: opacity 0.3s ease-in-out, transform 1.5s ease-in-out 0.25s;
    }
 
    .metro-box.normal .metro-box-photo img {
        height: 100%;
    }
 
    .metro-box.wide .metro-box-photo img,
    .metro-box.fullwidth .metro-box-photo img {
        height: auto;
        width: 100%;
    }
 
    .metro-box:hover .metro-box-photo img {
        transform: scale(1.4,1.4);
        -ms-transform: scale(1.4,1.4);
        -webkit-transform: scale(1.4,1.4);
        opacity: 1;
    }
 
    .metro-box:hover .metro-box-icon i {
        transform: rotate(360deg) scale(1.2,1.2);
        -ms-transform: rotate(360deg) scale(1.2,1.2);
        -webkit-transform: rotate(360deg) scale(1.2,1.2);
    }
 
    .metro-box:hover .metro-box-icon {
        transform: scale(1.1,1.1);
        -ms-transform: scale(1.1,1.1);
        -webkit-transform: scale(1.1,1.1);
    }

Kế đến là màu nền :

/* Background colors
    -----------------------------------------------------*/
 
    .blue-gradient {
        background: rgb(47,128,227); /* Old browsers */
        background: -moz-linear-gradient(45deg,  rgb(47,128,227) 0%, rgb(109,192,254) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgb(47,128,227)), color-stop(100%,rgb(109,192,254))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(45deg,  rgb(47,128,227) 0%,rgb(109,192,254) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(45deg,  rgb(47,128,227) 0%,rgb(109,192,254) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(45deg,  rgb(47,128,227) 0%,rgb(109,192,254) 100%); /* IE10+ */
        background: linear-gradient(45deg,  rgb(47,128,227) 0%,rgb(109,192,254) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2f80e3', endColorstr='#6dc0fe',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    }
 
    .green-gradient {
        background: rgb(125,188,29); /* Old browsers */
        background: -moz-linear-gradient(45deg,  rgb(125,188,29) 0%, rgb(211,224,54) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgb(125,188,29)), color-stop(100%,rgb(211,224,54))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(45deg,  rgb(125,188,29) 0%,rgb(211,224,54) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(45deg,  rgb(125,188,29) 0%,rgb(211,224,54) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(45deg,  rgb(125,188,29) 0%,rgb(211,224,54) 100%); /* IE10+ */
        background: linear-gradient(45deg,  rgb(125,188,29) 0%,rgb(211,224,54) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7dbc1d', endColorstr='#d3e036',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    }
 
    .orange-gradient {
        background: rgb(247,124,23); /* Old browsers */
        background: -moz-linear-gradient(45deg,  rgb(247,124,23) 0%, rgb(255,186,46) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgb(247,124,23)), color-stop(100%,rgb(255,186,46))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(45deg,  rgb(247,124,23) 0%,rgb(255,186,46) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(45deg,  rgb(247,124,23) 0%,rgb(255,186,46) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(45deg,  rgb(247,124,23) 0%,rgb(255,186,46) 100%); /* IE10+ */
        background: linear-gradient(45deg,  rgb(247,124,23) 0%,rgb(255,186,46) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f77c17', endColorstr='#ffba2e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    }
 
    .yellow-gradient {
        background: rgb(255,180,29); /* Old browsers */
        background: -moz-linear-gradient(45deg,  rgb(255,180,29) 0%, rgb(255,229,62) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgb(255,180,29)), color-stop(100%,rgb(255,229,62))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(45deg,  rgb(255,180,29) 0%,rgb(255,229,62) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(45deg,  rgb(255,180,29) 0%,rgb(255,229,62) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(45deg,  rgb(255,180,29) 0%,rgb(255,229,62) 100%); /* IE10+ */
        background: linear-gradient(45deg,  rgb(255,180,29) 0%,rgb(255,229,62) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb41d', endColorstr='#ffe53e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    }
 
    .violet-gradient {
        background: rgb(127,60,184); /* Old browsers */
        background: -moz-linear-gradient(45deg,  rgb(127,60,184) 0%, rgb(174,108,254) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgb(127,60,184)), color-stop(100%,rgb(174,108,254))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(45deg,  rgb(127,60,184) 0%,rgb(174,108,254) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(45deg,  rgb(127,60,184) 0%,rgb(174,108,254) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(45deg,  rgb(127,60,184) 0%,rgb(174,108,254) 100%); /* IE10+ */
        background: linear-gradient(45deg,  rgb(127,60,184) 0%,rgb(174,108,254) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f3cb8', endColorstr='#ae6cfe',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    }
 
    .red-gradient {
        background: rgb(200,36,27); /* Old browsers */
        background: -moz-linear-gradient(45deg,  rgb(200,36,27) 0%, rgb(254,112,69) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgb(200,36,27)), color-stop(100%,rgb(254,112,69))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(45deg,  rgb(200,36,27) 0%,rgb(254,112,69) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(45deg,  rgb(200,36,27) 0%,rgb(254,112,69) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(45deg,  rgb(200,36,27) 0%,rgb(254,112,69) 100%); /* IE10+ */
        background: linear-gradient(45deg,  rgb(200,36,27) 0%,rgb(254,112,69) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8241b', endColorstr='#fe7045',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    }
 
    .black-gradient {
        background: rgb(0,0,0); /* Old browsers */
        background: -moz-linear-gradient(45deg,  rgb(0,0,0) 0%, rgb(76,76,76) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgb(0,0,0)), color-stop(100%,rgb(76,76,76))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(45deg,  rgb(0,0,0) 0%,rgb(76,76,76) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(45deg,  rgb(0,0,0) 0%,rgb(76,76,76) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(45deg,  rgb(0,0,0) 0%,rgb(76,76,76) 100%); /* IE10+ */
        background: linear-gradient(45deg,  rgb(0,0,0) 0%,rgb(76,76,76) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#4c4c4c',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    }
 
    .empty {
        background: none !important;
    }

Thế là xong, bây giờ là các bạn đã có ngay một phong cách Metro tuyệt đẹp cho chính trang web hay blog của mình.

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

Windows Metro Style Boxes với CSS3

Windows Metro Style Boxes với CSS3 Đăng ngày 06-10-2014  Tất cả chúng ta đều biết Windows Metro UI rất được các web developers sử dụng bởi giao diện đẹp và rất thân thiện với người dùng, với những màu sắc và hiệu ứng động bắt mắt. Hôm nay mình sẽ chia sẻ cho các bạn một đoạn CSS3 giúp các bạn có thể thiết kế cho chính trang web hay blog của mình theo phong cách Metro. Điều đặc biệt là nó có khả năng responsive nữa. 3.2/10 2979

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

 

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;
logo megacode

Megacode đã đăng ký với Bộ Công Thương
Thư viện mã nguồn mở lớn nhất Việt Nam.



Hỗ trợ khách hàng trên Megacode
Hỗ trợ kỹ thuật cho thành viên:
Tổng đài: (+844) 6. 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