• fans
  • 1036 reader
  • followers
Những cách bo tròn góc
  • Tutorial Details
  • Độ khó: Trung Bình
  • Thời gian: 30:39 phút
  • File size: 85 MB
  • Yêu cầu: Căn bản jQuery

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é!

Link trong video: jQuery, jQuery Rounded Corner Plugin

Demon Warlock Website facebook twitter user_email

Tôi được sinh ra ở Việt Nam, nhưng hiện tại đang sống và làm việc tại Mỹ. Ngành tôi học không có liên quan gì đến thiết kế web. Nhưng đây là sở thích từ ngày còn là sinh viên du học, do vậy bây giờ dù cho đang đi làm nhưng tôi vẫn thích dùng thời gian rảnh rỗi của mình để học về thiết kế web. Như các bạn, tôi cũng việc mày mò tự học và khám phá.

  • Quang Huy

    Demon warlock ơi,
    Em mến mộ lắm lắm, giọng hay và thuyết trình rất có duyên, em mong diễn đàn phát triển bền vững. EM rất thích TK web. Khi biết trang của anh em rất thích thú.

  • Nguyễn Minh Phúc

    Cám ơn các anh chị đã giúp đỡ chúng em

  • quangthaivnn

    Chào anh DW em có một thắc mắc muốn cần anh và mọi người chỉ giúp giùm em với. Hiện tại em cty e đang phát triển cái trang này http://dev.mysportsactivities.com và e đang sửa một cái lỗi trên nó không bo góc khi hiển thị trên trình duyệt IE 8, mặc dù trong css em đã có để đoạn css như sau:
    text-align: center;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    behavior: url(css/PIE.htc);

    khi mới chạy lần đầu tiên thì thấy nó có bo góc cho nút button SignIn, nhưng sau khi nhấn F5 hoặc reload lại trang thì nó không có bo góc nữa, mong anh DW và mọi người giúp đỡ giùm e với, cám ơn tất cả mọi người.

    • phuoc

      tag {
      border: bề-dày kiểu mã-màu;
      border-radius: giá trị;
      -moz-border-radius: giá trị;
      -webkit-border-radius: giá trị;
      -ms-border-radius: giá trị;
      -o-border-radius: giá trị;
      }

      Trong đó:
      -moz-animation hỗ trợ cho firefox.
      -webkit-animation hỗ trợ cho Google Chrome và Safari.
      -ms-animation hỗ trợ cho Internet Explorer.
      -o-animation hỗ trợ cho Opera.

  • tuyet man

    sao em làm băng cách đầu không được nhỉ

  • http://chamsocda.khonggianwebviet.com/ cham soc da

    Cách của bạn Hiếu là cách mình hay xài đó. Cách này dễ

    Dùng border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;

  • hieu

    cam on anh nhe! nhung em biet con 1 cach nua co ma !
    Dùng border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;

  • arikatuan

    anh ơi, a chỉ cho e cách lấy góc bo tròn bằng photoshop được không.e không biết sử dụng photoshop.

  • hhoang247

    A DW ơi! Khi nào làm mấy cái như thế này, a nên demo ở IE browser vì IE là thằng khó chịu nhất. Để khi nó có lỗi, a sửa tụi e còn học hỏi theo a. Em là em chán thằng IE nhất. hehe. Cảm ơn a đã có những bài viết rất hay…:D

  • tiger

    Chào a DW,video của anh rất hay và hữu ích,em đang làm video tới phần jquery rồi nhưng em không down được 2 file như trong video của a,không biết server đang bị gì hay sao nữa nên đành dừng lại,nếu a có 2 file đó thì ups lên luôn đi a,thanks a

  • Truong_Nguyen

    Bài viết của anh DW ích bổ ích. xin cảm ơn anh DW.

  • Nguyễn Minh Nguyên

    Anh DW Ơi! Anh có thể làm video về Flash hong. E có thấy anh bảo là ko thích flash và có bài ” 8 Nguyên nhân không dùng Flash cho website” nhưng giờ em thấy rất nhiều web dùng flash và ở Việt Nam giờ hể đi xin việc về thiết kế thì lúc nào cũng yêu cầu kỉ năng về Flash. Thanks

  • http://vuinhon.net nguyen trang dong

    Không hiểu sao nghe anh DW nói hay ghê, hài hài thế nào ấy :)) , mặc dù mình biết bo góc trong bài hết rồi nhưng mà nghe thú vị ghê ^^!

  • Bích Nguyễn

    Huhu, link video bị die rồi anh ơi, help me……

  • http://dulichnamchau.vn hixhix-acac

    thank anh :)

  • http://www.fituct.org khangphamngoc

    Cám ơn bác DW rất nhiều! Hiện tại em đang sử dụng izwebz để học mặc dù em rất thích java. Ai ngờ thấy bác design mà thích quá….

  • wpine2000

    Anh ơi, trong cách thứ 4 dùng Jquery để bo tròn góc. Nhưng anh chỉ cho em khi mình chọn .corner(‘cool 20px’); làm sao để vẫn giữ lại được hình nền mà không bị cắt thành màu trắng xung quanh đường viền của “Cool 20px”.
    Cảm ơn anh.!

  • http://ots,vn blacksheep1135

    Cảm ơn video rất hay và bổ ích của bạn.

  • chan vai

    các bác làm cho em cái video dạy rewriteuurl với các bác em mong quá , mà đang cần chứ ….

  • Tiến

    Cả 2 file nén ở host megaupload và mediafire đều bị lỗi rồi anh ơi

  • http://www.facebook.com/profile.php?id=100000240910636 AthaoDeplao

    Cảm ơn rất nhiều, bám cái site này ma học thôi. thích cái kiểu nói chuyện tếu tếu trong video

  • Monkey.D.Luffy

    thanks kiu bac’ nha tat’ ca? deu` tuyet voi`

    • phongthanh

      cảm ơn anh rất hay .

  • tuyet nhi

    cảm ơn anh rất nhiều qua trang web em học được rất nhiều.

  • Đinh Quốc Toản

    Cảm ơn tất cả. Mình rất thích Web này. có rất nhiều điều hay mình tìm thấy tại đây.

  • ThankPhat

    Chưa xem được nhiều nhưng thấy bài nào cũng hay. Thank Các bác phát

  • Sad Angel

    A ui làm thế nào để khj ta phóng to hay thu nhỏ trang web,nó vẫn bt,k bị thay đổi kích thước vậy a?
    ví dụ như là nút Checkbox chẳng hạn.Sao e thu nhỏ thì nó lại to ra.

  • LazyCat

    Anh ơi cho em hỏi sao dùng cách cuối để bo tròn thì không được nhỉ? Anh cho em đoạn code cuối để em làm lại thử cái thank! Gửi vào dùm luôn vào mail em nha!Thank anh nhiều!^_^

  • http://musvn.blogspot.com/ 1NAD

    Mình đang cần. Cảm ơn

    • thanh

      video hay, thank bác

    • http://chưacó tony cuong

      Anh ơi cho em hỏi sao dùng cách cuối để bo tròn thì không được nhỉ? Anh cho em đoạn code cuối để em làm lại thử cái thank! Gửi vào dùm luôn vào mail em nha!Thank anh nhiều!^_^

  • http://www.saigonsun.com H.Tài

    Mình thì xài CSS :
    -moz-border-radius:15px 15px 15px 15px;

    chỉnh các thông số theo ý muốn

    Nếu Demon Warlock rảnh thì pm nich YH mình tinhphieuduemnhe để mình share mấy cái source của comment web. Hy vọng bạn sẽ làm tutorial về nó.

    • Gà công nghiệp

      Cách này khi Validate CSS nó báo lỗi áh!!!!

      Cái -moz-border-radius hình như là CSS 3 thì phải

      • Minh ngoc

        bài này hay quá, thank nhé

Newbie

Các series nên xem trên izwebz cho newbie

Khi vào izwebz chắc nhiều bạn cho rằng các bài viết trên izwebz đều không có hệ thống gì cả? Thực chất, các bài biết đều đi theo một series của riêng nó, ví dụ như PHP, HTML & CSS, PSD2HTML, Photoshop, illustrator,… Trong bài viết này, mình sẽ tổng hợp lại các series bài viết cần thiết cho một newbie.

Izwebz facebook group

Social connect

Recent Comments

Archives