Những cách bo tròn góc
- October 15, 2009
- 60 comments
Bo tròn góc một khái niệm rất phổ biến trong thiết kế web. Có rất nhiều designer khi làm giao diện họ đều có ít nhất một hoặc vài thành phần trong giao diện được bo tròn góc. Đối với các giao diện làm bằng Photoshop thì bo tròn quá đơn giản. Nhưng khi đưa ra để code thì cũng có nhiều điều phải bàn. Trong bài này chúng ta sẽ xem xét một số cách phổ biến dùng để bo tròn góc
Mỗi cách trong video này đều có điểm mạnh và điểm yếu khác nhau, chính vì thế khi sử dụng bạn cũng nên tự hỏi xem thiết kế của mình đòi hỏi cách nào và cách nào phù hợp nhất với hoàn cảnh của bạn. Trong những cách sau đây, không cách nào là hay nhất mà cũng không cách nào là dở nhất. Đơn thuần chúng là những cách có thể sử dụng được để đạt mục đích và sử dụng nó như thế nào thì tùy thuộc vào từng trường hợp cụ thể.
Lưu ý: Trong video có đoạn sử dụng jQuery không biết tại sao nó lại không xuất hiện border >”<. Khi làm xong mới biết nên sorry nhé!
Thời lượng:30:39
Link Download định dạng .avi chất lượng cao: MegaUpload, MediaFire
File Size: 85MB
Link trong video: jQuery, jQuery Rounded Corner Plugin
Xin cho mình hỏi:
nếu 1 cái khung có boder là màu đỏ, nền chuyển gradient từ trên xuống (từ xanh sang đen). vậy những cách đã liệt kê ở trên có tạo được không?
Mình đang test thử trường hợp này, có phải là áp dụng cách thứ 2 nhưng linh động hơn phài không? Nghĩa là ta cắt 1 miếng trên top. 1 miếng ở bottom. 1 miếng bên letf, 1 miếng bên right (dat che do background no-repeat theo từng vị trí top bottom letf va right). Rồi còn phần inside ta cắt 1 miếng dài nhưng mỏng và cho background
repeat-x????
Thanks
Cách làm của bạn phải lưu ý khi thiết kế bên Ps sao cho hợp lý, chúc thành công!
- @ cách này cũng tương tự giống nhau.
- Vì trường hợp của bạn sử dụng id nên cả 2 cái đó tương đối là giống nhau, nhưng nếu bạn dùng class sẽ khác.
- Giải thích qua đôi chút :
Với id :
– #ta và #wrapper #ta : căn bản là giống nhau
+ Với #ta : nó định dạng cho bất cứ thẻ nào chứa id là ‘ta’
+ Với #wrapper #ta : Nó định dạng cho bất cứ thẻ nào có id là ‘ta’ nhưng được nằm trong thẻ cha có id là ‘wrapper’.
– Thuộc tính của id : được khai báo và sử dụng một lần trong code HTML.
Với Class:
– .ta và #wrapper .ta : Căn bản là khác nhau
+ Với .ta : nó định dạng cho bất cứ thẻ nào mang class là ‘ta’
+ Với #wrapper .ta : nó định dạng cho bất cứ thẻ nào mang class là ‘ta’ nhưng thẻ đó phải là thẻ con của thẻ cha có id là ‘wrapper’.
– Thuộc tính của class : được khai báo và sử dụng nhiều lần trong code HTML
- Hy vọng bạn sẽ hiểu thêm đôi chút
Ah`, mih2 còn 1 vấn đề nữa muốn hỏi! Vd như ta có đoạn code trong the như sau:
‘
abcd
efgh
‘
Vậy trong file CSS, khi mình style cho các thẻ div, nên dùng là:
#wrapper
……….
#ta
………
#mh
…….
Hay là:
#wrapper
…….
# wrapper #ta
……….
#wrapper #mh
………..
2 cách này giống nhau hay khác nhau? Và mình không biết nên dùng cách nào là tốt hơn nhỉ ?__? . Thanks before….
Hiii, minh` tòan dùng PS để xuất ảnh ko hà, ko có dùng paint. Mới biết được vấn đề là do minh save ảnh nhầm thành dạng CMYK nên IE nó “không chơi”
. Thanks DW và clackken.smith nhe……
Do cái ảnh của bạn khi định dạng nó có dạng name.JPG nên khi vào IE8 ko hiểu, chắc bạn tạo ảnh bằng Pain của Microsoft ^^. Bạn định dạng ảnh lại xem, mình làm lại ảnh của bạn với định dạng name.jpg chạy tốt ^^
Đảm bảo không chạy được trên IE8 ^^
Uhm, quả thật nói trên comment thì cũng khó giải thích. Để mình gửi qua email file html và images cua mình cho ban xem hen! Thanks before….
Cái này cũng đã có một lần có người hỏi tôi, sau này phát hiện ra là viết sát quá như thế này background: url(back.jgp)top left; lẽ ra phải cách ra một chút là url(back.jpg) top left.
Bạn thử cách dấu ; ra xem sao? tôi cũng không chắc nữa vì nếu bạn đã kiểm tra kỹ đường dẫn thì chịu.
Mà sao trên CSS của bạn lại có display: block; bản thân thẻ div đã là block rồi mà?
Cho mượn link cái ảnh đi bạn, bạn đưa code kiểu này bó tay sao mà chỉnh, mình thử với một hình khác ở IE8 thì ổn mà bạn xem thử nhé
ko post hình được ^^. bạn xem link sau nhé
link : http://bearsharks.com/upload_w/image.gif
Chet, minh ghi nhầm tên bạn rồi! Cho mình xin lỗi…hix… tại viết nhanh quá! T_T
Mà sao web bạn không có phần chỉnh sửa comment vậy……
Video phần tutorial này mình chưa xem nên không biết! Để mình down xem đã! ^^
Ah, mình có 1 đoạn code đơn giản, WC xem dùm mình được không:
`
__abENT__lt;!DOCTYPE html PUBLIC __abENT__quot;-__abENT__#8260;__abENT__#8260;W3C__abENT__#8260;__abENT__#8260;DTD XHTML 1__abENT__#46;0 Transitional__abENT__#8260;__abENT__#8260;EN__abENT__quot; __abENT__quot;http:__abENT__#8260;__abENT__#8260;www__abENT__#46;w3__abENT__#46;org__abENT__#8260;TR__abENT__#8260;xhtml1__abENT__#8260;DTD__abENT__#8260;xhtml1-transitional__abENT__#46;dtd__abENT__quot;__abENT__gt;__abENT__lt;html xmlns=__abENT__quot;http:__abENT__#8260;__abENT__#8260;www__abENT__#46;w3__abENT__#46;org__abENT__#8260;1999__abENT__#8260;xhtml__abENT__quot;__abENT__gt;
__abENT__lt;head__abENT__gt;
__abENT__lt;meta http-equiv=__abENT__quot;Content-Type__abENT__quot; content=__abENT__quot;text__abENT__#8260;html; charset=utf-8__abENT__quot; __abENT__#8260;__abENT__gt;
__abENT__lt;title__abENT__gt;Untitled Document__abENT__lt;__abENT__#8260;title__abENT__gt;
__abENT__lt;style type=__abENT__quot;text__abENT__#8260;css__abENT__quot;__abENT__gt;
#ta{
width: 200px;
height: 200px;
background-image: url(back__abENT__#46;jpg);
background-repeat: no-repeat;
display: block;
}
__abENT__lt;__abENT__#8260;style__abENT__gt;
__abENT__lt;__abENT__#8260;head__abENT__gt;
__abENT__lt;body__abENT__gt;
__abENT__lt;div id=__abENT__quot;ta__abENT__quot;__abENT__gt;sadsad __abENT__lt;__abENT__#8260;div__abENT__gt;
__abENT__lt;__abENT__#8260;body__abENT__gt;
__abENT__lt;__abENT__#8260;html__abENT__gt;`
Chỉ thế thôi mà trong IE8 nó không hiện lên background được! (FF và sầ thì chạy ok) (Đường dẫn đến hình không hề sai). Thế mới lạ……
Cách bạn nói tôi cũng đề cập đến trong video. Nhưng điểm hạn chế của nó là nó chỉ có thể dài ra mà không thể to ra được. Nếu nội dung quá lớn nó sẽ bị vỡ hoặc ẩn nội dung đi.
Theo mình thì thường làm cách đơn giản nhất, Đó là, cắt 2 góc bo ở trên thành 1 hình (đặt chế độ top center), cắt 2 góc bo ở dưới thành 1 hình (đặt chế độ bottom center). Còn phần giữa giống nhau nên ta cho repeat y .Hết..:D
ko thể tin được mình lại tìm ra được trang web này của bác Demon Warlock, nó quá hay luôn, tôi đã mất rất nhiều thời gian để làm giao diện mà nếu tìm được trang của bác sớm hơn thì mọi việc đã nhanh hơn rất nhiều rồi, 1 lần nữa cám ơn bác Demon Warlock rất rất nhiều …
Đọc bài viết này của bác tôi thấy cách thứ 3 hay nhất, trước đây tôi dùng Javascript này: http://www.curvycorners.net/includes/examples/demo5.html. Nó dùng curvyCorners.js để bo tròn chỉ bằng CSS:
-moz-border-radius-topleft:3ex;
-moz-border-radius-bottomright:3ex;
-webkit-border-top-left-radius:3ex;
-webkit-border-bottom-right-radius:3ex;
đảm bảo chạy tốt trên IE 6 mà hay hơn cách 4 bác dùng JQuery (có cả border)
Chính vì thế bây giờ tôi có 1 câu hỏi mong bác Demon giúp đỡ: mình nên dùng ảnh hay Javascript (cách 3 của bác và cách của tôi) để load trang thì sẽ nhanh hơn, tôi ko biết test sao để biết, mong bác giúp đỡ, cám ơn bác rất nhiều
“Property -webkit-border-radius doesn’t exist : 10px ”
lỗi gì đây ???????????
Cái đó là tạo round corner trong Firefox và Safari hoặc Chrome. Nhưng tính năng này chưa được hỗ trợ trong mọi trình duyệt và chỉ có trong CSS3. Do vậy nếu bây giờ bạn Validate CSS thì sẽ bị lỗi đó, nhưng không quan trọng vì đơn giản nó chưa hỗ trợ thôi chứ không phải viết sai.
hi hi, thanks anh nhìu
Bạn có thể xem video về Clear và Float nhé
http://www.izwebz.com/video-tutorials/clear-va-float-video/
Có pác nào biết cách dùng class : clearfix hông, chỉ cho mình dzới. Mình hơi lơ mơ lờ mờ về nó. Hix.(-_-)
Haha bác mà không khó tính thì ai dễ tính đây. Nói thật khi làm tut mà biết có bác sẽ xem cũng camaroon ghớm
. Thực ra coder khó tính viết code rất đẹp.
Vậy tôi là người khó tính đó àh
, có thể lắm .
thanks DW!
Tutoriol này và các bài khác rất hay và dể hiểu.Cám ơn bạn nhiều lắm!Mong bạn sẽ đưa thêm nhiều bài nữa nhé.^^
Yeah. Cũng có rất nhiều tranh luận về việc sử dụng một thẻ div nữa để clear. Nhưng tôi thì hay nghĩ đơn giản, thêm một thẻ div nữa cũng không là ngày tận cùng của thế giới đó mà.
Còn những ai khó tính thì tìm ra nhiều cách để work around
.
Còn về chuyện `
clear`.Thực ra nếu như có 2 div. Div thứ 1 bạn cho nó `
float: left`. Bạn không muốn div thứ 2 bị đẩy lên trên cùng với div thứ 1.Bạn vẫn có thể dùng “clear: both” cho div 2 mà ko cần thêm 1 div ở giữa với `
clear: both` nữa .Còn nếu xét trường hợp div 1 bạn cho `
float: left`. Và div 2 bạn muốn cho nó `float: left` hoặc `float: right` mà ko muốn bị đẩy lên trên với div 1 vẫn có cách để làm mà ko cần thêm 1 thẻ div .-Nếu bạn muốn div 2 nó ở bên trái : không cần phải có `
float: left` cho thẻ div 2 vì mặc định nó nằm sát lề trái và trên (nếu bạn reset `margin: 0px;`)-Nếu bạn muốn div 2 nó ở bên phải :
không cần phải có `
float: right` cho thẻ div 2, bạn có thể dùng `clear: both` rồi set `margin-left`. Các div sau bạn có thể set `position: absolute` và `top` `left`.Như vậy vẫn tạo ra hiệu ứng như mình mong muốn mà phần HTML rất sạch sẽ rõ ràng.
Nói chung có nhiều cách nhưng bạn đừng bỏ cuộc sớm là dc
Gian lận bằng cách bỏ thẻ `
__abENT__lt;img__abENT__gt;` thực ra cũng ko hay và ko nên coi là 1 cách cho lắm. Vì thực tế nếu xét “Tại sao chúng ta tuân theo nguyên tắt phần HTML toàn là nội dung hạn chế phần cấu trúc và dàn trang ?”- Vì muốn tách biệt 2 phần này 1 cách rõ ràng. Trang HTML chỉ có nội dung : tức là văn bản và hình ảnh (những hình cần thiết ví như trong 1 trang bán hàng cần hình sản phầm).Trang CSS dùng để định dạng giao diện (nên hình ảnh trong trang nếu có tốt nhất nên thiết lập bg để tránh dùng thẻ `
__abENT__lt;img__abENT__gt;`).-Tại sao như vậy, vì hướng đến nhiều mục đích .Nếu như ko sử dụng CSS hoặc trình duyệt không hổ trợ CSS (1 só thiết bị di động chẳng hạn) thì trang web vẫn hiển thị tốt phần nội dung cần truyền tải (lúc này chỉ có HTML thôi ).
Nên trong thiết kế CSS kiểu j cũng phải chú ý điểm này và đừng nên làm nữa vời .
1 điểm cần chú ý nếu bạn sử dụng menu dạng hình ảnh có nhiều cách để hiển thị đúng theo ý muốn, nhưng bạn nên làm theo cách vẫn đặt các menu trong thẻ list sau đó cho ẩn nội dung bằng `
text-indent` hoặc `display: none` sau đó thiết kế bg trong css.Tránh dùng cách chèn các thẻ `
__abENT__lt;img__abENT__gt;` trong list hoặc để list trống. Vì nếu ko có css thì cái menu đó có thể mất nội dung .Yeah yeah! đúng là kẹt lắm mới phải thêm những div vô nghĩa vô mã html. Ví dụ như khi clear float chẳng hạn
.
Thực ra nếu mà không muốn thêm `
.
__abENT__lt;div__abENT__gt;` vào code như cách đó thì có thể “gian lận” chút bằng cách sử dụng trực tiếp thẻ `__abENT__lt;img__abENT__gt;` thì cũng okKiểu j thì kiểu, tùy tình huống mà xử lý, nhưng căn bản trong đầu phải luôn nghĩ tìm mọi cách để đạt được hiệu ứng mà không phải thêm vào những thẻ trống để định dạng. Kẹt lắm mới phải làm vậy . Lúc đó code HTML mới ngắn gọn và chuyên nghiệp dc. Phải ko DW
À! Tôi cũng nghĩ kiểu gì cũng phải cho hình top thật dài nếu không khó mà đạt được. Cái này cũng có thể tính là một cách dùng để bo tròn góc.
À để tôi giải thích thêm. VD box hiện tại của bạn có height là 100px, bạn dự đoán mức độ của nó co giản khoảng tới 200px chẳng hạn, lúc này `
top-box__abENT__#46;jpg` bạn sẽ tạo ra độ dài là 220px chẳng han (thường bạn kéo dài đoạn giữa).Nếu thực tế box của bạn co giản đến 150px chẳng hạn lúc này `
div` chỉ thể hiện chiều dài 150px của bg thôi.Sau đó bg của thẻ `p` hiện lên trên tao thành 1 box hoàn chỉnh.Đó là lý do tại sao ko có repeat bất cứ bg nào, bạn cũng phải chú ý vị trí của bg của `
div` và `p` .Bạn lưu ý thường box có chi tiết hơi phức tạp như vân hay hoa văn thì cách set background và border ko thể áp dụng dc nhưng cách tôi giới thiệu vẫn hiệu quả .
Bạn lo lắng là nếu như vậy thì phải crop `
top-box__abENT__#46;jpg` với kích thước tuơng đối lớn, có ảnh hường tới việc load trang ko. Thực tế thì box thường dc thiết kế ko quá phức tạp và khi bạn save as `__abENT__#46;jpg` thì dung lượng file cũng bình thường thôi.Xem qua có vẻ cách của bác thiếu sót gì đó. Vì tôi không thấy bác cho hình nào repeat thì khi nội dung dài xuống làm sao nó có thể bao lấy được? Tất nhiên bác có thể sử dụng background color nhưng nếu hộp cần border thì sao? bác có thể giải thích thêm được không?
Các cách mà DW đưa ra với bạn khá hay và cũng là những phuơng pháp thường dùng nhất. Ở đây tôi muốn cung cấp cho các bạn 1 cải tiến mới trong cách thứ 2.Cách thứ 2 rõ ràng ta biết chiều rộng là cố định bạn muốn phần nội dung trong tag `
__abENT__lt;p__abENT__gt;`co giản theo chiều dọc mà box vẫn ổn. Cách DW làm là thêm vào 3 thẻ `__abENT__lt;div__abENT__gt;` top,bottom,inside.Nhưng thực tế ra 3 thể này ko chứa nội dung và mục đích chỉ là để định dạng và thể hiện box.Điều này chúng ta hoàn toàn ko muốn đưa vào code HTML. Có 1 cách khác để cái tiến với mã lệnh HTML như sau :
`
__abENT__lt;div id=__abENT__quot;second__abENT__quot;__abENT__gt;`__abENT__lt;p__abENT__gt;Bo tròn góc một khái niệm rất phổ biến trong thiết kế web__abENT__#46;__abENT__lt;__abENT__#8260;p__abENT__gt;
__abENT__lt;__abENT__#8260;div__abENT__gt;
với CSS
`
#second {`width: 360px;
background: url(__abENT__quot;images__abENT__#8260;top-box__abENT__#46;jpg__abENT__quot;) no-reapeat top left;
}
#second p {
width: 100%;
padding: 10px;
background: url(__abENT__quot;images__abENT__#8260;bottom-box__abENT__#46;jpg__abENT__quot;) bottom left no-repeat;
}
Với `
top-box__abENT__#46;jpg` bạn phải crop gần hết cái box trong PS bỏ đi 2 góc bo ở dưới.`
bottom-box__abENT__#46;jpg` bạn crop 2 góc bo ở dưới thôi.Nhưng cách này cũng có khuyết điểm là bạn ko dc xử dụng `
margin`cho `__abENT__lt;p__abENT__gt;`.Cũng tuơng tự vậy bạn có thể tận dụng các thành phần có sẳn như trong div second như h1,h2,p… để style. Hạn chế tấp nhất tình trạng thêm thẻ div trống để định dạng trang web.