Оффлайн
- Регистрация
- 1 Мар 2015
- Сообщения
- 1,481
- Баллы
- 155
?Today I learned how to create a product card using HTML and CSS properties. Product cards are an essential UI component in modern web design. They provide a concise, interactive way to display product details, such as images, titles, prices, and call-to-action buttons. This article demonstrates how to build a responsive and visually appealing product card using HTML and CSS, leveraging flex/grid layouts, transitions, pseudo-classes, hover effects, and relative units like rem.
HTML Structure
The HTML provides a semantic structure for the card. HTML structure separates visual elements clearly and provides flexibility for styling.
CSS Styling
To style the card effectively, we’ll use CSS Flexbox, Grid, and modern features to create a responsive and dynamic experience.
Key Features Explained
? Flexbox Layout:
Use it for: Laying out items in a row or column (1D layout)
Think of Flexbox like a row (or column) of boxes.
You can easily align, space, and order items.
Good when you're arranging items in one direction — horizontal OR vertical.
? Example:
.container {
display: flex;
}
Items inside .container will line up in a row by default.
? Grid Layout:
Use it for: Laying out items in rows AND columns (2D layout)
Think of Grid like a table or spreadsheet.
You can place items anywhere in a grid of rows and columns.
Great for full-page layouts or complex designs.
? Example:
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
This creates two equal-width columns.
?Transition in CSS:
A transition lets you smoothly change a CSS property from one value to another — instead of jumping instantly.
? For example: When you hover over a button, it slowly changes color instead of changing right away.
?️ Hover Effect:
A hover effect changes how something looks when you move your mouse over it.
It's done using the :hover pseudo-class in CSS.
?Pseudo-Classes:
Pseudo-classes are keywords added to selectors that style elements based on their state or position, without needing to add extra classes or IDs in your HTML. The :hover pseudo-class is used to
apply interactive styles.
They always start with a colon :.
? rem:
rem stands for "root em" — it's a unit of measurement in CSS used to size things like text, padding, margins, etc.
? Simple Meaning:
By default, most browsers set this to 16px
(So, 1rem = 16px, 2rem = 32px, 0.5rem = 8px)
HTML Structure
The HTML provides a semantic structure for the card. HTML structure separates visual elements clearly and provides flexibility for styling.
CSS Styling
To style the card effectively, we’ll use CSS Flexbox, Grid, and modern features to create a responsive and dynamic experience.
Key Features Explained
? Flexbox Layout:
Use it for: Laying out items in a row or column (1D layout)
Think of Flexbox like a row (or column) of boxes.
You can easily align, space, and order items.
Good when you're arranging items in one direction — horizontal OR vertical.
? Example:
.container {
display: flex;
}
Items inside .container will line up in a row by default.
? Grid Layout:
Use it for: Laying out items in rows AND columns (2D layout)
Think of Grid like a table or spreadsheet.
You can place items anywhere in a grid of rows and columns.
Great for full-page layouts or complex designs.
? Example:
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
This creates two equal-width columns.
?Transition in CSS:
A transition lets you smoothly change a CSS property from one value to another — instead of jumping instantly.
? For example: When you hover over a button, it slowly changes color instead of changing right away.
?️ Hover Effect:
A hover effect changes how something looks when you move your mouse over it.
It's done using the :hover pseudo-class in CSS.
?Pseudo-Classes:
Pseudo-classes are keywords added to selectors that style elements based on their state or position, without needing to add extra classes or IDs in your HTML. The :hover pseudo-class is used to
apply interactive styles.
They always start with a colon :.
? rem:
rem stands for "root em" — it's a unit of measurement in CSS used to size things like text, padding, margins, etc.
? Simple Meaning:
By default, most browsers set this to 16px
(So, 1rem = 16px, 2rem = 32px, 0.5rem = 8px)