Tác giả: Dương Nguyễn Phú Cường
Ngày đăng: 2 năm trước
Nội dung
Cho các hình sau:
- https://nentang.vn/wp-content/uploads/2021/10/hoa-28.jpg
- https://nentang.vn/wp-content/uploads/2021/10/hoa-13.jpg
- https://nentang.vn/wp-content/uploads/2021/10/hoa-30.jpg
- https://nentang.vn/wp-content/uploads/2021/10/hoa-14.jpg
- https://nentang.vn/wp-content/uploads/2021/10/hoa-9.jpg
- https://nentang.vn/wp-content/uploads/2021/10/hoa-22.jpg
- https://nentang.vn/wp-content/uploads/2021/10/hoa-11.jpg
Ribbon:
- Dãy ruy băng Ribbon "Mới": https://nentang.vn/wp-content/uploads/2021/10/ribbon_new.png
- Dãy ruy băng Ribbon "Hàng Hot": https://nentang.vn/wp-content/uploads/2021/12/ribbon-1.png
Yêu cầu
1. Sử dụng DIV.
2. Sử dụng CSS Position, Float, Margin, Padding, Border.
3. Sử dụng CSS3 để làm các hiệu ứng:
- "box-shadow": để làm sản phẩm HOT, có bóng mờ màu tím.
- "transform: rorate()": để làm ảnh sản phẩm quay 1 góc và chữ "Hàng HOT" trình bày trong dãy ribbon hot.
- "transform: scale()": để làm sản phẩm phóng to lên gấp N lần.
4. Sử dụng bộ chọn CSS Selector theo trạng thái PSEUDO CLASS:
- Khi người dùng rê chuột vào đối tượng sẽ phóng to sản phẩm lên gấp 1.5 lần.
Kết hợp một cách hợp lý để trình bày giao diện tương tự như hình sau:
Demo