Windows Metro Style Boxes với CSS3

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.

Xem Demo | Download

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>

Trong bài viết này, mình sử dụng icon từ font, các bạn có thể tham khảo bài viết Tạo icon từ bộ Font Awesome bằng CSS .

CSS

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

/* CSS Document */

.metro-boxes {
		position: relative;
		awidth: 100%;
	}

	.metro-boxes img {
		max-awidth: 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 {
		awidth: 19.2%;
	}

	.metro-box.wide  {
		awidth: 39.2%;
	}

	.metro-box.fullawidth {
		awidth: 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;
		awidth: 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%;
		awidth: 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.fullawidth .metro-box-photo img {
		height: auto;
		awidth: 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 !

Chuyên Mục: Css

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