Ấn tượng với mẫu skewed menu thiết kế bằng CSS

Khi còn ở công ty thiết kế web, điều mình đau đầu nhất là làm sao thiết kế những trang web với những layout hay menu khác nhau, để tạo ấn tượng tốt cho khách hàng của mình. Mình nghĩ , nếu các bạn chưa rành về thiết kế thì cũng sẽ gặp vấn đề tương tự như mình. Chính vì lý do này mà mình xin giới thiệu cho các bạn một mẫu menu đơn giản nhưng không kém sexy. Các bạn sẽ có thêm ý tưởng thiết kế cho những trang web hay blog của mình.

Xem Demo | Download

HTML

Giả sử chúng ta có menu như sau :

<nav class="skew-menu">
  <ul>
    <li><a href="#">Shoes</a></li>
    <li><a href="#">Sandals</a></li>
    <li><a href="#">Shirts</a></li>
    <li><a href="#">Jackets</a></li>
  </ul>
</nav>

CSS

Và đây là toàn bộ đoạn css giúp các bạn tạo menu ấn tượng cho khách hàng.

.skew-menu {
  text-align: center;
  margin-top: 9em;
}
.skew-menu ul {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
  transform: skew(-25deg);
}
.skew-menu ul li {
  background: #fff;
  float: left;
  border-right: 1px solid #eee;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
  color: #555;
  font-weight: bolder;
  transition: all 0.3s linear;
}
.skew-menu ul li:first-child {
  border-radius: 9px 0 0 9px;
}
.skew-menu ul li:last-child {
  border-right: none;
  border-radius: 0 9px 9px 0;
}
.skew-menu ul li:hover {
  background: #eee;
  color: #ff6347;
}
.skew-menu ul li a {
  display: block;
  padding: 1em 2em;
  color: inherit;
  text-decoration: none;
  transform: skew(25deg);
}

That’s it. Mình mong là các bạn có thể sáng tạo thêm nhiều menu khác từ menu này, và hơn hết là các bạn sẽ nắm vững và hiểu rõ về CSS hơn.

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

Chuyên Mục: Css

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