Làm bảng giá cực đẹp bằng CSS3

Lang thang trên mạng lại kiếm được một ví dụ về CSS3 rất hay để giới thiệu tiếp đến cho mọi người, lần này là cách làm bảng giá cực đẹp bằng CSS3 với hiệu ứng rất mượt mà, mang tính chuyên nghiệp rất cao.

Các thủ thuật hay khác:

• Tạo nút Call hiệu ứng Cốc Cốc chạy dọc màn hình
• Tự tạo website chuẩn SEO Google

Để biết mình đang nói về cái gì mời bạn xem ngay demo trực tiếp dưới đây:

Bạn thấy chưa bảng giá nhìn khá chuyên nghiệp phải không nào, khi hover chuột vào một box nào đó thì nó được đẩy lên với hiệu ứng động của CSS3.

Cách làm thì đơn giản, chỉ cần copy và paste các đoạn html và css ở dưới đây vào dự án web của mình thôi:

Code HTML

      <div class="package">
        <div class='name'>Limited</div>
        <div class='price'>€2</div>
        <div class='trial'>Available for a month</div>
        <hr>
        <ul>
          <li>
            <strong>8</strong>
            team members
          </li>
          <li>
            <strong>6</strong>
            team playlists
          </li>
          <li>
            <strong>Unlimited</strong>
            public playlists
          </li>
        </ul>
      </div>
      </div>
      <div class="package brilliant">
        <div class='name'>Brilliant</div>
        <div class='price'>€5</div>
        <div class='trial'>Free 30 day trial</div>
        <hr>
        <ul>
          <li>
            <strong>Unlimited</strong>
            team members
          </li>
          <li>
            <strong>Unlimited</strong>
            team playlists
          </li>
          <li>
            <strong>Unlimited</strong>
            public playlists
          </li>
          <li>
            Team analytics
          </li>
          <li>
            Send files
          </li>
        </ul>
      </div>
      <div class="package">
        <div class='name'>Basic</div>
        <div class='price'>€0</div>
        <div class='trial'>Totally free</div>
        <hr>
        <ul>
          <li>
            <strong>5</strong>
            team members
          </li>
          <li>
            <strong>3</strong>
            team playlists
          </li>
          <li>
            <strong>Unlimited</strong>
            public playlists
          </li>
        </ul>
      </div>

Code CSS:

.package {
  box-sizing: border-box;
  width: 250px;
  height: 380px;
  border: 3px solid #e8e8e8;
  border-radius: 7px;
  display: inline-block;
  padding: 24px;
  text-align: center;
  float: left;
  -webkit-transition: margin-top 0.5s linear;
  transition: margin-top 0.5s linear;
  position: relative;
  margin: 0 5px;background:#FFF
}
.package:hover {
  margin-top: -30px;
  -webkit-transition: margin-top 0.3s linear;
  transition: margin-top 0.3s linear;
    cursor:pointer;
}
.name {
  color: #565656;
  font-weight: 300;
  font-size: 3rem;
  margin-top: -5px;
}
.price {
  margin-top: 7px;
  font-weight: bold;
}
.price::after {
  content: " / month per user";
  font-weight: normal;
}
.package hr {
  background-color: #dedede;
  border: none;
  height: 1px;
}
.trial {
  font-size: 13px;
  font-weight: 600;
  padding: 2px 21px 2px 21px;
  color: #33c4b6;
  border: 1px solid #e4e4e4;
  display: inline-block;
  border-radius: 15px;
  background-color: white;
  position: relative;
  bottom: -32px;
}
.package ul {
  list-style: none;
  padding: 0;
  text-align: left;
  margin-top: 29px;
}
.package li {
  margin-bottom: 15px;
}
.checkIcon {
  font-family: "FontAwesome";
  content: "f00c";
}
.package li::before {
  font-family: "FontAwesome";
  content: "f00c";
  font-size: 1.3rem;
  color: #33c4b6;
  margin-right: 3px;
}
.brilliant {
  border-color: #33c4b6;
}
/* Triangle */
.brilliant::before {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 64px 64px 0 0;
  border-color: #3bc6b8 transparent transparent transparent;
  position: absolute;
  left: 0;
  top: 0;
  content: "";
}
.brilliant::after {
  font-family: "FontAwesome";
  content: "f00c";
  color: white;
  position: absolute;
  left: 9px;
  top: 6px;
  text-shadow: 0 0 2px #37c5b6;
  font-size: 1.4rem;
}

Lưu ý:

Do các đoạn code ở trên mình có sử dụng icon có sẵn của thư viện Awesome nên nếu website của bạn chưa chèn thư viện này thì cần chèn thêm ở trong cặp thẻ header nhé:

<link rel="stylesheet" href="/css/font_awesome.css">

Ở hướng dẫn trên là có 3 cột tương ứng với 3 class là .package với độ rộng 250px, do vậy bạn có thể chỉnh kích thước này lại để phù hợp với trang web của mình, hoặc cho nó độ rộng 100% theo mỗi cột và độ rộng của cột thì do bạn tự thiết kế để Responsive cho đẹp như ở ví dụ của mình nhé.

Còn về màu sắc, cỡ chữ, nội dung... thì tất nhiên bạn sẽ tự tìm hiểu và sửa theo ý của mình.

Vậy là mình đã hướng dẫn xong cách làm bảng giá cực đẹp bằng CSS3 rồi đó, hoàn toàn không sử dụng Javascript nên sẽ không ảnh hưởng tới tốc độ load trang web cũng như không làm tiêu tốn tài nguyên khi khách hàng truy cập website.

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

Nguồn: Web7b