Nhỏ gọn với mẫu menu đen tuyền bằng CSS3

Hôm nay mình cũng khá là bận nên cũng chỉ tranh thủ post cho các bạn một menu đơn giản, menu này có thể áp dụng cho những trang web hay blog có nền đen. Tuy nhiên, các bạn vẫn có thể tuỳ chỉnh theo ý muốn một khi các bạn hiểu cách tạo ra nó, vì nó được làm hoàn toàn bằng CSS3.

Xem Demo | Download

HTML

Menu này chỉ bao gồm một thẻ div chứa các link cho menu như sau :

<div class="nav">
	<a href="#">Home</a> 
	<a href="#">About</a> 
	<a class="highlight" href="#">Services</a> 
	<a href="#">Portfolio</a> 
	<a href="#">Blog</a>
	<a href="#">Contact</a>
</div>

CSS

Bây giờ, chúng ta sẽ dùng các thuộc tính như border-radius, background và box-shadow để ngăn cách các menu và bo tròn góc cho đẹp mắt.

body {
	background-color:#2b2b2b;
	font-size: 62.5%;
	font-family: open-sans, serif;
}
.nav {
	margin:10%;
}
.nav a {
	margin-left: -3px;
	padding: 12px 20px;
	outline: none;
	border: 1px solid #121212;
	border-right: none;
	background: -moz-linear-gradient(center top, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.34) 100%) repeat scroll 0 0 transparent;
	box-shadow: 0 2px 3px rgba(255, 255, 255, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
	color: #777777;
	vertical-align: top;
	text-decoration: none;
	text-shadow: 0 -1px #0F0F0F;
	font-size: 13px;
	line-height: 21px;
	cursor: pointer;
    -webkit-transition: all .6s ease;
	-moz-transition: all .6s ease;
	-ms-transition: all .6s ease;
	-o-transition: all .6s ease;
	transition: all .6s ease;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}
.nav a:hover {
	color:#f6f6f6;
}
.nav a:first-child {
	border-radius: 6px 0 0 6px;
}
.nav a:last-child {
	border-radius: 0 6px 6px 0;
}
.nav a:active {
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
}
.nav a.highlight {
	background: -moz-linear-gradient(center top, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.44) 100%) repeat scroll 0 0 transparent;
	color: #f6f6f6;
}

.nav a:last-child {
	border-right: 1px solid #121212;
}

Mình mong là bài viết này sẽ giúp ích cho các bạn mới học về CSS và có thêm ý tưởng thiết kế menu cho website 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