Loading post navigation ...
 
 

Pro page

5
Nhận xét

Bo góc với CSS : Bo 4 góc, 2 góc trên, 2 góc dưới... dùng hình ảnh

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

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


Enter your mail address:

5

Ngankvn ®

Mình muốn bo 4 góc của phần bài biết có làm vầy đc ko ???

Phần bài viết vốn có một boder màu xanh dương bao quanh , nhưng nhìn vuông chành chạn chán quá !!!

fandung-tester

chắc cũng được thôi Ngân à. Nhưng mà thủ thuật này bo góc dùng ảnh kết hợp background. Nếu muốn làm thì Ngân fải đổi lại, hiện bên blog Ngân đang dùng border để trang trí bài viết fải ko?

Ngankvn ®

Uh !! Chỉ là chỉnh CSS vầy thôi :
.post {
border:4px solid blue;
..........

Anh Quý

tình cờ đọc được bài viết của bạn rất hay. Mình cũng đang rất cần cái nầy, nhưng bạn có thể chỉ rõ hơn cho mình chút được ko. Mình chỉ cần bo góc và viền xung quanh thôi thì làm thế nào vậy bạn. Mình mới bắt đầu tìm hiểu về CSS nên chưa biết nhiều lắm.

Vinatc

Bạn ơi có cách nào bô một góc, bo 2 góc trái và Bo 2 góc phải không vậy



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home