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

Mục lục bài viết

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:

Để 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:

 

Limited
€2
Available for a month

  • 8 team members
  • 6 team playlists
  • Unlimited public playlists
Brilliant
€5
Free 30 day trial

  • Unlimited team members
  • Unlimited team playlists
  • Unlimited public playlists
  • Team analytics
  • Send files
Basic
€0
Totally free

  • 5 team members
  • 3 team playlists
  • Unlimited public playlists

 

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

Đánh giá

Copyright © 2015 - 2021. Designed by Vuong Tran DMCA.com Protection Status