Nền trang trí co giãn — không dùng ảnh

Ảnh có tỷ lệ cố định, hộp widget thì không. Cách thoát không phải tìm ảnh tốt hơn mà là tách nền ra khỏi hình trang trí: nền là gradient CSS nên co giãn kiểu gì cũng đẹp, hình vẽ là SVG neo vào hai mép và chỉ co theo chiều cao. Hộp rộng ra thì khoảng giữa rộng ra, hình hai bên giữ nguyên tỷ lệ.

1Cùng một thiết kế, ba bề ngang

Đây là thứ không làm được với ảnh. Người tuyết và hộp quà giữ đúng hình dáng ở cả ba kích thước.

280px — cột hẹp / mobile

Nhận hàng 24 – 26 Dec

Giao trước Giáng sinh

480px — theme phổ biến

Nhận hàng 24 – 26 Dec

Giao trước Giáng sinh

760px — layout rộng

Nhận hàng 24 – 26 Dec

Giao trước Giáng sinh

2Và ba chiều cao

Chiều cao widget đổi theo số dòng chữ, cỡ chữ và ngôn ngữ. Hình trang trí co theo chiều cao nên luôn vừa khít, không bị cắt cụt cũng không thừa khoảng trống.

1 dòng

Nhận hàng 24 – 26 Dec

2 dòng

Nhận hàng 24 – 26 Dec

Giao trước Giáng sinh

4 dòng — tiếng Đức, có đếm ngược

Lieferung 24. – 26. Dez

Bestellen Sie innerhalb von 4 Std 12 Min

Kostenloser Versand ab 50 €

Vor Weihnachten garantiert

3So với cách dùng ảnh

Bên trái là cụm trang trí bị kéo giãn theo hộp — đúng thứ xảy ra khi đặt ảnh làm nền. Bên phải là cách neo mép.

✕ Kéo giãn như ảnh — người tuyết bị bè ra

Nhận hàng 24 – 26 Dec

Giao trước Giáng sinh

✓ Neo hai mép — giữ đúng tỷ lệ

Nhận hàng 24 – 26 Dec

Giao trước Giáng sinh

4CSS để dán vào Custom CSS

Không cần sửa HTML của widget — tất cả nằm ở ::before và ::after. SVG nhúng thẳng vào CSS nên không có request ảnh nào, không cần CDN, và nét ở mọi độ phân giải.

Đang dựng…