27/05/2014 webmaster Pricing Table thường được dùng để giới thiệu những gói dịch vụ mà trong các trang web chuyên về hosting hay sử dụng. Hôm nay mình xin chia sẻ cho các bạn một mẫu pricing table rất đẹp và được làm bằng CSS3 gadient cùng với những thuộc tính khác như box-shadow và transform(scale).
Xem Demo | Download
HTML
Đầu tiên, chúng ta sẽ xây dựng một bảng giá với các phần tử html như sau :
-
Starter
Free- Premium Profile Listing
- Unlimited File Access
- Free Appointments
- 5 Bonus Points every month
- Customizable Profile Page
- 2 months support
-
Basic
$24 per month- Premium Profile Listing
- Unlimited File Access
- Free Appointments
- 20 Bonus Points every month
- Customizable Profile Page
- 6 months support
-
Premium
$49 per month- Premium Profile Listing
- Unlimited File Access
- Free Appointments
- 50 Bonus Points every month
- Customizable Profile Page
- Lifetime support
Trước hết, chúng ta sẽ định dạng chung cho cả bảng giá :
.pricing_table width: 600px; color: #fff; font-size: 12px; font-family: Ubuntu, arial, verdana; line-height: 150%; text-align: center; margin: 100px auto 0 auto; Sau đó là chi tiết cho các gói :
.pricing_table>li background: linear-gradient(#666, #333); width: 33.33%; float: left; list-style-type: none; /*For smooth hover effects if .active is replaced by :hover*/ transition: all 0.2s; Tất cả các gói đều có chung một màu nền, nhưng chúng ta sẽ làm nổi bật cho riêng một gói ở giữa :
.pricing_table>li.active background: linear-gradient(#F9B84A, #DB7224); transform: scale(1.03); box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.5); Tiêu đề :
.pricing_table h3 text-transform: uppercase; padding: 15px 0; font-size: 14px; font-weight: bold; Phần thân :
.pricing_table .price_body width: 125px; height: 125px; margin: 0 auto 15px auto; border: 2px solid #fff; border-radius: 100%; display: table; Giá :
.pricing_table .price font-size: 30px; font-weight: bold; text-transform: uppercase; /*Lets vertically center align the price now*/ vertical-align: middle; display: table-cell; .pricing_table .price .price_figure display: block; .pricing_table .price .price_term font-size: 11px; font-weight: normal; Tính năng của từng gói :
.pricing_table .features li list-style-type: none; padding: 5px 0; Và cuối cùng là phần footer :
.pricing_table .footer padding: 10px; background: #333; margin-top: 10px; .pricing_table .footer .action_button color: #fff; font-size: 11px; display: inline-block; text-decoration: none; font-weight: bold; background: #000; padding: 4px 20px; border-radius: 15px; background: linear-gradient(#666, #333); .pricing_table li.active .footer .action_button background: linear-gradient(#F9B84A, #DB7224); .clr clear: both; Đây chỉ là những phần cơ bản nhất của một pricing table cần có, từ bài viết này, các bạn có thể áp dụng vào cho website hay blog của mình. Hoặc các bạn có thể tự tay thêm hoặc thay đổi màu sắc để có thể tạo ra nhữn mẫu pricing table đẹp mắt khác.
Chúc các bạn thành công !
0 nhận xét:
Đăng nhận xét