Thiet Ke Web - Thiết kế web - Thiet ke website - Thiết kế website - Nhat Quang Informatics

 

cho thue may phat dien cho thuê máy phát điện
quan ly xang dau
quan ly xang dau
quan ly xang dau
thiet bi xang dau
thiet bi xang dau
thiet bi xang dau
thiet bi do bon
thiet bi do bon
thiet bi do bon
quan ly tru bom
quan ly tru bom
quan ly tru bom
thiet bi do muc
thiet bi do muc
thiet bi do muc
quản lý xăng dầu
quản lý xăng dầu
quản lý xăng dầu
thiết bị xăng dầu
thiết bị xăng dầu
thiết bị xăng dầu
thiết bị đo bồn
thiết bị đo bồn
thiết bị đo bồn
quản lý trụ bơm
quản lý trụ bơm
quản lý trụ bơm
thiết bị đo mức
thiết bị đo mức
thiết bị đo mức
chuyen cung cap hang nhat chinh hieu, chuyên cung cấp hàng nhật chính hiệu, chuyên cung cấp hàng nhật xách tay, chuyen cung cap hang nhat xach tay, sua bot meji hang nhat xach tay, sữa bột meji hàng nhật xách tay, nước uống trắng da collagen shiseido, nuoc uong trang da collagen shiseido, dầu gội shiseido tsubaki, dau goi shiseido tsubaki, kem dưỡng da q10, kem duong da q10, sữa rửa mặt shiseido, sua rua mat shiseido,
chuyen cung cap thiet bi xang dau sai gon chuyên cung cấp thiết bị xăng dầu sài gòn he thong quan ly do bon tu dong hệ thống quản lý đo bồn tự động he thong quan ly ban hang tru bom hệ thống quản lý bán hàng trụ bơm
Website về trao đổi sản phẩm miễn phí Website ve trao doi san pham mien phi
Thiet Ke Web Pro.vn: Thiết Kế Web | Trang chủ Hướng Dẫn Thiết Kế Website Thủ thuật bo tròn hình ảnh trong thiết kế website mà không phải xử lý photoshop

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

Một vấn đề với thuộc tính border-radius 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.

rounded image corner, bo tron hinh anh, thiet ke website 

Mục tiêu

Mục tiêu là có thể tạo được ảnh như hình bên dưới

rounded image corner, bo tron hinh anh, thiet ke website 

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ị.

rounded image corner 

Thủ thuật CSS

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

rounded image corner, bo tron hinh anh, thiet ke website 

Sử dụng jQuery

rounded image corner, bo tron hinh anh, thiet ke website 

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.

$(document).ready(function(){
  $(".rounded").load(function() {
    $(this).wrap(function(){
      return '<span class="' + $(this).attr('class') + '" style="background: url('/ + $(this').attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
    });
    $(this).css("opacity","0");
  });
});

Mã CSS3

.rounded {
	display: inline-block;
	border: solid 1px #000;
	overflow: hidden;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

Đ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.

Xem Demo | Download

 
Hiện có 56 khách Trực tuyến

Tư vấn thiết kế web trực tuyến 24/7

thiet ke web, thiet ke website, dich vu thiet ke web
Mr. Hải
0909 333 021

Dự án thiết kế web mới thực hiện

Dịch vụ thiết kế web trọn gói

Hướng dẫn thiết kế website

Thiet ke web site pro - Tags Cloud


Khách hàng thiết kế web của NQI