Chủ đề nổi bật
03/08/2018, 09:40

Bài 03: Học CSS3 - border-image - tạo đường viền bằng hình

Có một số đường viền mang những hoa văn rất đẹp mà ta không thể sử dụng thuộc tính border trong CSS để tạo được. Trường hợp trong CSS thường ta ...

Có một số đường viền mang những hoa văn rất đẹp mà ta không thể sử dụng thuộc tính border trong CSS để tạo được. Trường hợp trong CSS thường ta phải tạo bốn thẻ HTML và thiết lập background và cho nó repeat-x để giả đường viền. Nhưng đến với CSS3 thì bạn không cần sử dụng background nữa mà sẽ sử dụng thuộc tính border-image.

1. Border-image trong CSS3

Với thuộc tính border-image trong CSS3 bạn có thể thiết lập hình ảnh làm đường viền cho thẻ HTML.

Thuộc tính này hỗ trợ ở các trình duyệt:

  • IE > 11.0
  • Chrome > 16.0
  • Firefox > 15.5
  • Safary > 6.0
  • Opera > 15.0

Lưu ý: Chiều cao của đường viền phụ thuộc vào chiều cao của thuộc tính border nên bạn phải tạo border thì mới sử dụng được border-image.

Cú pháp: border-image: url(border-image.png) 25 repeat;

Trong đó:

  • url(border-image.png) (SOURCE) là đường dẫn đến file hình ảnh
  • 25 (OFFSET) đây là kiểu ghi tắt của thuộc tính offset, nếu ghi đầy đủ sẽ là 25 25 25 25 tương ứng với lề trên, lề phải, lề dưới và lề trái.
  • repeat  (REPEAT) cách sử dụng các phần hình ảnh đã cắt đó.

Code Hack CSS cho các trình duyệt:

  • -webkit-border-image đối với Chrome và Safary.
  • -moz-border-image đối với Firefox.
  • -o-border-image đối với Opera.

Chi tiết các thành phần như sau:

SOURCE:

Là đường dẫn đến file hình ảnh dùng để làm border.

OFFSET:

Để cho border được đẹp thì bạn phải tính chuẩn xác từng pixel trong hình ảnh để thiết lập border-awidth và giá trị OFFSET.

Offset chính là khoảng cách tính từ ngoài biên đi vào trong hình ảnh sẽ được lấy để làm border.

Thuộc tính offset gồm có bốn cạnh như hình sau:

Giá trị OFFSET tuân theo quy tắc rút gọn trong CSS như sau:

  • Nếu có 4 giá trị (25 25 25 25) thì tương đương với (cạnh trên, cạnh phải, cạnh dưới, cạnh trái).
  • Nếu có 3 giá trị (25 25 25) thì tương đương với (cạnh trên, cạnh trái + phải, cạnh dưới)
  • Nếu có 2 giá trị (25 25) thì tương đương với (cạnh trên + dưới, cạnh trái + phải)
  • Nếu có 1 giá trị (25) thì tương đương với (cạnh trên + dưới + trái + phải)

Như vậy với bốn đường thẳng kéo dài của bốn cạnh của bốn OFFSET sẽ tạo thành 9 phần như sau:

Lúc này ta chú ý các phần (1, 3, 7, 9) chính là phần border cho bốn góc và nó cố định, phần 5 sẽ là vị trí trung tâm và những phần còn lại sẽ bị ảnh hưởng bởi thuộc tính REPEAT.

REPEAT:

Chúng ta có các giá trị thường sử dụng sau:

  • stretch
  • repeat
  • round

Note: Các giá trị này đều chỉ có tác dụng với các phần 2, 6, 8, 4.

Stretch: kéo giãn hình ảnh cho tương thích với chiều rộng của các cạnh.

Ví dụ: XEM DEMO

div{
    awidth: 108px;
    height: 108px;
    border-style: solid;
    border-awidth: 27px;
    border-image: url(https://code24h.com/upload/tut_post/images/2015/10/23/477/border.png) 27 stretch;
    -webkit-border-image: url(https://code24h.com/upload/tut_post/images/2015/10/23/477/border.png) 27 stretch;
    -moz-border-image: url(https://code24h.com/upload/tut_post/images/2015/10/23/477/border.png) 27 stretch;
    -o-border-image: url(https://code24h.com/upload/tut_post/images/2015/10/23/477/border.png) 27 stretch;
}

Kết quả:

Repeat: lặp lại hình ảnh cho các cạnh

Lưu ý là nó sẽ lặp từ giữa đi ra hai phía.

Ví dụ: XEM DEMO

div{
    awidth: 108px;
    height: 108px;
    border-style: solid;
    border-awidth: 27px;
    border-image: url(https://code24h.com/upload/tut_post/images/2015/10/23/477/border.png) 27 repeat;
    -webkit-border-image: url(https://code24h.com/upload/tut_post/images/2015/10/23/477/border.png) 27 repeat;
    -moz-border-image: url(https://code24h.com/upload/tut_post/images/2015/10/23/477/border.png) 27 repeat;
    -o-border-image: url(https://code24h.com/upload/tut_post/images/2015/10/23/477/border.png) 27 repeat;
}

Kết quả:

Round: Lặp lại hình ảnh cho các cạnh nhưng nó sẽ fit lần lặp theo tỉ lệ phần trăm, nghĩa là nó sẽ co giãn sao cho lặp vừa khít. Chính vì vậy nếu ta chọn OFFSET chuẩnchọn chế độ round thì sẽ đẹp, tuy nhiên backgroud sẽ bị co giãn nếu chiều rộng không tương thích với hình ảnh.

Vi dụ: XEM DEMO

div{
    awidth: 70px;
    height: 108px;
    border-style: solid;
    border-awidth: 27px;
    border-image: url(https://code24h.com/upload/tut_post/images/2015/10/23/477/border.png) 27 round;
    -webkit-border-image: url(https://code24h.com/upload/tut_post/images/2015/10/23/477/border.png) 27 round;
    -moz-border-image: url(https://code24h.com/upload/tut_post/images/2015/10/23/477/border.png) 27 round;
    -o-border-image: url(https://code24h.com/upload/tut_post/images/2015/10/23/477/border.png) 27 round;
}

 

Lưu ý: Giá trị của repeat có thể chia làm hai phần đó là Vertical và Horizontal

Ví dụ

border-image: url(https://code24h.com/upload/tut_post/images/2015/10/23/477/border.png) 27 round repeat;

Trong đó roundVerticalrepeatHorizontal.

2. Lời kết

Đáng lẽ mình sẽ đưa ra nhiều ví dụ nữa nhưng mình sẽ để dành nó ở một bài thực hành khác, quan trọng ở bài này là bạn hiểu bản chất của nó và sử dụng đúng theo hình ảnh giao diện.

Như vậy là mình đã giới thiệu xong cách sử dụng thuộc tính border-image trong CSS3, đây quả thật là một bài viết khá nhức đàu và nó mất khá nhiều thời gian biên soạn của mình, hy vọng các bạn hiểu.

BÀI KẾ SAU
BÀI KẾ TIẾP

Nguồn: code24h.com

Bài liên quan
Mới nhất

CSS căn bản

BÀI KẾ SAU BÀI KẾ TIẾP

CSS Responsive Web Design

Xin giới thiệu với các bạn series tự học CSS Responsive, đây là một series tự mình biên soạn và viết theo khả năng của mình. Trong series này mình sẽ giới thiệu tất cả các kiến thức cần thiết để học responsive, từ cách sử dụng media cho đến Javascript và từ đó sẽ đưa ra một bài tập nho nhỏ để tự ...

CSS3 căn bản

BÀI KẾ SAU BÀI KẾ TIẾP

Tạo hiệu ứng HTML5&CSS3

DANH SÁCH BÀI HỌC Hiệu ứng bóng đổ với thuộc tính box-shadow của CSS3

Bài 10: Học CSS3 - 2D Transforms

CSS3 2D Transforms là những thuộc tính dùng để xử lý hiệu ứng di chuyển 2D ( không gian hai chiều ), ví dụ bạn có thể dụng CSS3 để quay một thẻ ...

Bài 09: Học CSS3 - Sử dụng @fonf-face

Trước đây nếu bạn muốn website chạy những font chữ độc và lạ mà trên máy tính của Client không cài đặt thì đó là điều không thể, trừ khi client ...

Bài 07: Học CSS3 - Text Shadow - Box Shadow

Thêm một sự bất ngờ nữa dành cho những bạn yêu mến lập trình CSS3 đó là tạo hiệu ứng shadow mà chỉ có CSS3 mới làm được. Với CSS3 bạn có thể ...

Bài 08: Học CSS3 - Xử lý Text

CS3 hỗ trợ một số thuộc tính giúp việc xử lý text hiệu quả hơn. Nếu trước đây chúng ta gặp khó khăn trong việc xử lý một từ quá dài và bị tràn ...

Bài 05: Học CSS3 - Định dạng màu sắc

CSS3 hỗ trợ nhận diện color bằng tên màu , mã hexadecimal và mã RGB . Trong bài này chúng ta sẽ tìm hiểu một số định dạng mã màu thường sử ...

Bài 06: Học CSS3 - Gradient Background

Trong Photoshop bạn có thể tạo một hình ảnh với nhiều màu sắc và chúng trộn lẫn với nhau nhìn rất bắt mắt như hình dưới đây. Thì bạn hoàn ...