Rounded corners with Image
[FD's BlOg] - Bài viết trước mình có giới thiệu về cách bo góc với CSS dùng lệnh margin, và thủ thuật đó hơi phức tạp. Hôm nay mình sẽ giới thiệu 1 các khác đó là dùng ảnh để bo góc, thủ thuật này đơn giản hơn nhiều. Rất dễ để các bạn trang trí cho các widget cho blog của mình.Với thủ thuật này bạn có thể bo tùy ý các góc, ví dụ bo cả 4 góc, bo 2 góc trên, bo 2 góc dưới.
Ở đây mình sẽ giới thiệu cho các bạn đủ 3 thủ thuật bo góc trên. Còn các thủ thủ thuật bo từng góc (ví dụ bo 1 trong 4 góc - thủ thuật này sẽ có 1 chút khác biệt) thì mình ko giới thiệu ở đây (do ít được dùng), các bạn có thể tìm hiểu thêm. Nếu ko rõ có thể hỏi mình.
Trước tiên thực hiện thủ thuật, bạn phải có 1 tấm ảnh có màu tương tự như hình nền ta muốn hiển thị, và tấm ảnh này đã được bo sẵn 4 góc (có thể dùng các soft đồ họa để thực hiện việc này). Sau đó ta cắt lấy 4 góc này ra, và ta sẽ được 4 tấm hình nhỏ, có thể xem hình mẫu bên dưới như bên dưới:
Và khi cắt ra ta sẽ được 4 ảnh:
Top-Left:
Top-Right:
Bottom-Left:
Bottom-Right:
Sau khi đã có ảnh, ta bắt đầu tiến hành thủ thuật:
1. Đăng nhập blog.
2. Vào Bố cục - chỉnh sửa code HTML
3. Chèn đọan code CSS sau vào ngay trên dòng ]]></b:skin>
.roundcont {
width: 250px;
background-color: #f90;
color: #fff;
}
.roundcont p {
margin: 0 10px;
}
.roundtop {
background: url(link Top-Right.gif) no-repeat top right;
}
.roundbottom {
background: url(link Bottom-Right.gif) no-repeat top right;
}
img.corner {
width: 15px; height: 15px;
border: none;
display: block !important;
}
Với vài lưu ý nhỏ:
- width: 250px; : là độ rộng của không gian cần bo góc.
- width: 15px;
height: 15px; là kích thước của các ảnh của 4 góc cắt ra (các ảnh này phải có kích thước hòan tòan giống nhau).
- background-color: #f90; : màu nền
- link Top-Right.gif : link của ảnh Top-Right.gif
4. Save template lại.
5. Tiếp theo là chèn đọan code HTML bên dưới vào widget(văn bản) cần bo góc.
<div class="roundcont">
<div class="roundtop">
<img src="link ảnh Top-Left.gif" alt=""
width="15" height="15" class="corner"
style="display: none" />
</div>
CODE WIDGET - VĂN BẢN MUỐN HIỂN THỊ
<div class="roundbottom">
<img src="link ảnh Bottom-Left.gif" alt=""
width="15" height="15" class="corner"
style="display: none" />
</div>
</div>
Với đọan HTML trên, thì widget sẽ được bo với 4 góc, (hình minh họa bên dưới):
Khi muốn bo 2 góc trên thì ta bỏ đọc code màu xanh trong đọan code HTML trên là xong (xem ảnh minh họa bên dưới)
Khi muốn bo 2 góc dưới thì ta bỏ đọc code màu cam trong đọan code HTML trên là xong (xem ảnh minh họa bên dưới)
Như vậy đã hòan thành, ta thấy là việc bo góc bằng hình ảnh thì đơn giản và linh họat hơn nhiều so với bo góc dùng lệnh margin.
Chúc các bạn thành công.
Tham khảo từ Blog kalsey