Jul 23
6

Tạo box HTML có góc bo tròn với Curvy Corners

Đăng trong danh mục Javascript, Web Design bởi admin | Tags: , , , ,

Hôm nay mình chia sẽ với các bạn một thư viện khá hiệu quả trong việc thiết kế giao diện cho website trong trường hợp bạn muốn tạo các box có góc bo tròn, nhưng không sử dụng image, đó là sử dụng 1 plugin của jquery, đó là curvy Corner.

Thư viện này có chức năng cũng tương đối hoành tráng, dung lượng đã minify là 27KB, nếu gzip chắc sẽ khoảng 15kB thôi. Còn chức năng cơ bản thì bo tròn các box bạn muốn.

curvycorner


Cách sử dụng mình thấy là đơn giản nhất trong các thư viện tạo góc bo tròn, sau khi include script này:

thì mình chẳng còn đụng gì tới javascript để khởi tạo, hay thiết lập cái gì cả, plugin này sẽ tự động tìm trong CSS các box nào bạn quy định bo tròn góc.
vd thẻ div có “div.test {-webkit-border-radius: 4px; -moz-border-radius: 4px;}”, đối với các trình duyệt mới và không phải IE6,7..thì nó sẽ tự động bo tròn mà không cần sử dụng script này, còn đối với các trình duyệt không hỗ trợ bo tròn, thì script này sẽ bo tròn giúp bạn. Hoàn toàn tự động.

Tuy nhiên, trong một số trường hợp không phải lúc nào cũng hoạt động vì mọi người biết là Browser là trăm hoa đua nở… nhưng mình thấy nó là plugin cung cấp chức năng này khá hữu hiệu.

Website: http://www.curvycorners.net/
Demo: http://www.curvycorners.net/demos/

Bài viết liên quan:

6 Lời bình cho bài viết “Tạo box HTML có góc bo tròn với Curvy Corners”

  • wpviet
    August 16, 2009 at 9:40 pm

    cũng đau đầi hiều khi muốn bo tròn góc đó anh. nhưng em thấy cách tối ưu nhất vẫn là dùng ảnh đó ạ. còn dúng css thì em thấy
    -moz-border-radius: 5px;
    border-radius: 5px;
    là đc rồi. đúng là ie hay google chrome ko đọc đc nhưng ff đọc đc.
    anh tìm xem có cái css nào hay hơn mà đều đọc dc tất không em cam ơn nhiều lắm ạ

    [Reply]

    admin Reply:
    August 16th, 2009 at 10:35 pm

    Hiện tại không có CSS nào mà áp dụng được cho tất cả trình duyệt. Theo mình thấy thì hiện tại cái script ở trên là 1 trong những cái tốt nhất để làm việc này. Script này có cơ chế nhận biết trình duyệt nào không triển khai corner theo CSS thì nó sẽ dùng js để bo tròn, ngược lại thì khỏi cần xử lý js.

    [Reply]

    Reply
  • wpviet
    August 17, 2009 at 9:36 pm

    thank cảm ơn anh

    [Reply]

    Reply
  • WhiteKnight
    June 4, 2010 at 1:37 pm

    Không hoạt động trên IE7, có cách nào hoạt động trên IE không?

    [Reply]

    Tấn Việt Reply:
    August 26th, 2011 at 12:08 pm

    @WhiteKnight,

    Bạn có thể sử dụng thư viện Curved Corner để bo tròn trên IE. Đọc thêm bài viết bo tròn góc này để hiểu hơn. Chúc vui.

    [Reply]

    Reply
  • tuyet nhi
    November 2, 2010 at 2:30 am

    hic hic ko hoạt động trên ie, có cách nào ko ạ em đang cần

    [Reply]

    Reply

Viết lời bình



Bình luận mới nhất

Menu

Danh mục

Lưu trữ



Tags