Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
10 Product Card CSS Trong Thiết Kế Web

10 Product Card CSS Trong Thiết Kế Web


Ngày 15 Tháng 4 Năm 2020

Xin chào các bạn quay lại blog của mình. Hôm nay chúng ta sẽ đi tìm hiểu các product card (thẻ miêu tả sản phẩm) bằng cách kết hợp HTML, CSS, Javascript và Bootstrap 4 . Nào hãy cũng mình tìm hiểu nhé!

Product Card Là Gì?

Product card (thẻ miêu tả sản phẩm) là một thành phần không thể thiếu trong các trang web bán hàng, nó cũng góp phần vào yếu tố quyết định người dùng có nên mua sản phẩm của bạn không. Product card (thẻ miêu tả sản phẩm) chia thông tin sản phẩm thành nhiều khác nhau phần bao gồm hình ảnh, nội dung, giá cả... giúp người dùng có cái nhìn trực quan cũng như tổng quát hơn về sản phẩm của bạn. Ngoài ra nó còn giúp chúng ta hiển thị nhất quán trên nhiều màn hình thiết bị khác nhau.

Theo mình thấy thì hình ảnh là một yếu tố hết sức quan trọng vì nó là yếu tố đầu tiên thu hút ánh mắt của người dùng khi xem sản phẩm của chúng ta do đó bạn cần làm sao để hình ảnh rõ ràng và chân thật nhất có thể. Bạn cũng không nên sử dụng qua nhiều font chữ và nội dung không quá nhiều vì người dùng sẽ lười đọc nên bạn chỉ cần miêu tả các đặc điểm nổi bật nhất của sản phẩm cho product card.

Sau đây mình sẽ giới thiệu một số component Product Card (thẻ thông tin sản phẩm) được thiết kế sẵn bằng HTML, CSS, Bootstrap và Javascript giúp bạn có thể đa dạng lựa chọn phù hợp với bố cục cũng như thiết kế của trang web.

Các Ví Dụ Product Card Trong Phát Triển Web

Trong phần này chúng ta sẽ đi vào tìm hiểu các ví dụ về product card xây dựng bằng HTML CSS Javascript nhé!

Thiết Kế Product Card Bằng HTML CSS:

Thiết Kế Product Card Bằng HTML CSS

Product card này được xây dựng theo phong cách 3D với màu nền của tiêu đề thẻ tương ứng với màu sản phẩm tạo nên sự đồng nhất cho thẻ. Ngoài ra nó còn hiển thị đánh giá sản phẩm theo sao giúp người dùng có thể biết được mức độ bền và tốt của sản phẩm. Và giá tiền được thiết kế bắt mắt cũng là một điểm cộng cho component này. Bây giờ để hiểu rõ hơn bạn xem đoạn code sau đây nhé:

See the Pen UI Design - Product Card by CodeFrog (@CodeFrogShow) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé.

Nguồn

Thiết Kế Product Card UI :

Thiết Kế Product Card UI

Product card này được xây dựng hình ảnh theo phong cách 3D với hình ảnh được chụp ở nhiều góc độ khác nhau giúp miêu tả độ chân thật và chất lượng của sản phẩm. Nhưng do chỉ thiết kế bằng HTML, CSS nên không thể kích hoạt các nút trong thẻ sản phẩm nếu bạn muốn thì có thể thêm Javascript để tạo nhé. Giá và nút đặt hàng được làm nổi bật trong thẻ để nhấn mạnh nội dung cũng như kích thích khách hàng đặt hàng. Bây giờ để hiểu rõ hơn bạn xem đoạn code sau đây nhé:

See the Pen E-commerce Product (Delicious Apples) by John Mantas (@john-mantas) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Do đây sử dụng SCSS nếu bạn muốn sử dụng CSS thì có thể xem tại đây nha : SCSS to CSS.

Nguồn

Cách Tạo Jquery Product Card:

Cách Tạo Jquery Product Card

Nếu bạn muốn lựa chọn một product card thiết kế đơn giản thì có thể chọn component này. Ngoài ra nó còn có hiệu ứng thay đổi màu sắc để người dùng có thể chọn màu phù hợp với sản phẩm mà họ muốn. Nó cũng sử dụng font Roboto giúp tạo thêm phong cánh hiện đại và giàu cảm xúc hơn. Bây giờ để hiểu rõ hơn bạn xem đoạn code sau đây nhé:

See the Pen Daily UI #012 - Ecommerce Single Item by Immanuel Pandiangan (@nuel) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Do đây sử dụng SCSS nếu bạn muốn sử dụng CSS thì có thể xem tại đây nha : SCSS to CSS.

Nguồn

Thiết Kế Product Card Template CSS3 Javascript:

Thiết Kế Product Card Template CSS3 Javascript

Product card này khá là thú vị khi sử dụng hiệu ứng hover để hiển thị thông tin sản phẩm. Nó giúp giảm được diện tích chiếm trang khi trang web chúng ta có nhiều sản phẩm. Khi click(nhấn) vào "VIEW DETAILS" thì nó sẽ hiện các sản phẩm tương ứng với màu sắc khác nhau. Bây giờ để hiểu rõ hơn bạn xem đoạn code sau đây nhé:

See the Pen Product Card by Virgil Pana (@virgilpana) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Do đây sử dụng Less nếu bạn muốn sử dụng CSS thì có thể xem tại đây nha : Less to CSS.

Nguồn

Ví Dụ Về Product Card:

Ví Dụ Về Product Card

Product card này sử dụng thiết kế đơn giản miêu tả những thông tin cần có về một sản phẩm. Do chỉ viết bằng HTML, CSS nên bạn dễ thay đổi cũng như áp dụng cho nhiều loại bố cục trang web khác nhau. Bây giờ để hiểu rõ hơn bạn xem đoạn code sau đây nhé:

See the Pen Product Card by Alexandra K (@ff0004-red) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé.

Nguồn

Thiết Kế Product Card HTML5:

Thiết Kế Product Card HTML5

Product card này cũng có thiết kế giống ở trên nhưng điểm đặc biệt của nó là khi người dùng hover vào ảnh có thể xem chi tiết thông tin của sản phẩm. Ngoài ra nó còn có xếp hạng đánh giá sao và tự động chuyển sang đặt hàng khi người dùng hover vào giá tiền hoặc nút mua hàng. Bây giờ để hiểu rõ hơn bạn xem đoạn code sau đây nhé:

See the Pen Product Card UI / CSS by Omar Dsooky (@linux) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé.

Nguồn

Cách Tạo Product Card Bootstrap:

Cách Tạo Product Card Bootstrap

Đây có thể xem là product card điển hình hay được sử dụng trong các trang web bán hàng đặc biệt là hàng điện tử. Nó còn có hiệu ứng tự động chuyển đổi các hình ảnh khác của sản phẩm và chức năng giúp xem đánh giá của người dùng sau khi mua sản phẩm trong component này. Bây giờ để hiểu rõ hơn bạn xem đoạn code sau đây nhé:

See the Pen Product Detail Page(Source from Snippet) by haycuoilennao19 (@haycuoilennao19) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé.

Nguồn

Thiết Kế Product Card Responsive:

Thiết Kế Product Card Responsive

Thiết kế Product card này được nổi bật bởi sự thiết kế đơn giản cùng với việc phối màu cũng như sắp xếp các thành phần trong component. Nó chú trọng vào làm nổi bật tiêu đề và giá thành bằng việc sử dụng font chữ lớn cộng thêm tô đậm và hiển thị số người review cũng như số sao của sản phẩm để khách hàng có thể đánh giá về chất lượng và tiêu chí phù hợp với họ. Bây giờ để hiểu rõ hơn bạn xem đoạn code sau đây nhé:

See the Pen Product card by George V. (@GeorgeGedox) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé.

Nguồn

Cách Tạo Product Card CSS3:

Cách Tạo Product Card CSS3

Thiết kế Product card này đơn giản không cầu kì về màu sắc cũng như hiệu ứng trong component này. Nó chú trọng vào hai yếu tố chính đó là tiêu đề và giá của sản phẩm. Bây giờ để hiểu rõ hơn bạn xem đoạn code sau đây nhé:

See the Pen E-Commerce Card by Jacob Sauerhoefer (@jacobsauerhoefer) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé.

Nguồn

Thiết Kế Product Card Javascript:

Thiết Kế Product Card Javascript

Thiết kế Product card này cũng y chang ở trên nhưng nó có hiệu ứng click(nhấn) để xem thêm các hình ảnh khác của sản phẩm. Nó phù hợp với đa số thiết kế và bố cục của nhiều loại trang web bán hàng. Bây giờ để hiểu rõ hơn bạn xem đoạn code sau đây nhé:

See the Pen Product by Katherine Kato (@kathykato) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé.

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ giúp bạn rút ngắn thời gian trong việc thiết kế giao diện Product Card (thẻ sản phẩm) trong Bootstrap 4 và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!