Điện thoại: 0944210999

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.
1.$(document).ready(function(){
2.$(".rounded").load(function() {
3.$(this).wrap(function(){
4.return '<span class="' + $(this).attr('class') + '" style="background: url('/ + $(this').attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
5.});
6.$(this).css("opacity","0");
7.});
8.});
Mã CSS3
01..rounded {
02.display: inline-block;
03.border: solid 1px #000;
04.overflow: hidden;
05.-webkit-border-radius: 10px;
06.-moz-border-radius: 10px;
07.border-radius: 10px;
08.-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
09.-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
10.box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
11.}
Đ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.

0 nhận xét:

Đăng ký: Đăng Nhận xét (Atom)

About

Chúng tôi là đội ngũ làm website, marketting online chuyên nghiệp. Trang thông tin chính thức của chúng tôi là myhoian.com. Đến với chúng tôi , bạn sẽ nhận được sự tư vấn tin cậy, trang web ưng ý, sự hỗ trợ thân thiện.

Nhận xét

Loading...
.loadingxrcm {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1MbDICVINdJ2VOosI42WTFoAQWoWaGfoipWxoo30hNjf_2HyKIijHyswYp7fpxP0suEDXGCBbpdbcz_GRDu31jodI_MaE91rtpc4e1lRMq1hqFTMMHHf7eNFLPKDVinbrMMEvttc_1kM/s1600/progress_ani.gif) no-repeat 50% 50%;width:32px;height:32px;display:block;margin:0 auto;text-indent:-9999px;} ul#kmtranimasi{text-align:left;font:normal normal 11px Verdana,Geneva,sans-serif} ul#kmtranimasi,ul#kmtranimasi li{margin:0;padding:0;list-style:none;overflow:hidden;position:relative} ul#kmtranimasi li{text-indent:0;height:90px;background:whiteSmoke;padding:0 8px;border:1px solid #DFDFDF;border-top:1px solid white} ul#kmtranimasi img{border-radius:9999px;overflow:hidden;background:#383838;border:0;float:left;margin:5px 5px 0 0} ul#kmtranimasi .ketkomt{overflow:hidden} ul#kmtranimasi .ketkomt a{display:block;color:white;font-weight:bold;overflow:hidden;background:#363636;border-radius:2px;float:left;padding:0 5px;margin: 5px 0 0 0;} ul#kmtranimasi .ketkomt span{font-size:8px;position:absolute;z-index:2;top:21px;border-radius:2px;display:block;line-height:14px;padding:0 5px;left:68px;background:white} ul#kmtranimasi p{margin:15px 0 0}

Contact Details

Mr Duan Tell: 0944210999 Email: thietkewebhoian@gmail.com Địa chỉ : 32/9 Nguyễn Duy Hiệu - Hội An