Tin tức

Thủ thuật bo tròn hình ảnh trong thiết kế website mà không phải xử lý photoshop

05/11/2012

Một vấn đề với thuộc tính border-radius trong xây dựng website là Firefox không hiển thị đúng khung tròn ở trên ảnh. Có một cách là sử dụng thẻ span bao quanh thẻ img và sử dụng thuộc tính background-image.

Vấn đề

Các trình duyệt đều không hỗ trợ việc hiển thị mềm và mượt như mục tiêu đưa ra. Webkit hiển thị khung tròn nhưng không hỗ trợ khối đổ bóng, còn firefox thì khung bo tròn không hiển thị.

thu thuat bo anh2 Thủ thuật bo tròn hình ảnh trong thiết kế website mà không phải xử lý photoshop
Mục tiêu là có thể tạo được ảnh phục vụ việc thiết kế website như hình bên dưới

thu thuat bo anh3 Thủ thuật bo tròn hình ảnh trong thiết kế website mà không phải xử lý photoshop

Bạn có thể xử lý vấn đề trên rất đơn giản: bo tròn 1 thẻ span bên ngoài thẻ image. Đặt ảnh là hình nền của span, sau đó ẩn ảnh đi (có thể dùng opacity : 0 hoặc display : none). Tác giả dùng

thu thuat css Thủ thuật bo tròn hình ảnh trong thiết kế website mà không phải xử lý photoshop

Sử dụng JQuery

jquery wrap Thủ thuật bo tròn hình ảnh trong thiết kế website mà không phải xử lý photoshop

Chúng ta sẽ sử dụng jQuery để tự động thêm thẻ span. Đoạn mã dưới sẽ tự động tìm tất cả các phần tử có class .rounded và thêm thẻ span ra bên ngoài. Sau đó sẽ thêm thuộc tính background, width, height và đặt opacity: 0 cho ảnh gốc.

ma css Thủ thuật bo tròn hình ảnh trong thiết kế website mà không phải xử lý photoshop

Đoạn mã trên hoạt động với tất cả các kích thước ảnh, không có yêu cầu đặc biệt khác & bạn có thể sử dụng kèm với các mã CSS khác.

Xây dựng website bán hàng

Xây dựng website giới thiệu sản phẩm

Cách xây dựng website