Để hỗ trợ cho trình bày trên các trang web, thông thường chúng ta thấy có 2 phương pháp chính hay được sử dụng
+ Sử dụng thuần css.
+ Sử dụng CSS hỗ trợ với hình ảnh.
Tuy nhiên, mỗi phương pháp có ưu và nhược điểm khác nhau. Nếu sử dụng thuần css thì đôi khi trang web của bạn hiển thị tốt trên trình duyệt này nhưng lại gặp không ít khó khăn khi người dùng sử dụng trình duyệt khác (IE là 1 minh chứng trong các phiên bản IE.6 IE.7). Trong khi đó viêc sử dụng hình ảnh để hỗ trợ dựa trên nguyên tắc ghép nhiều mảnh hình ảnh vào để tạo ra hiệu ứng trình bày tại 4 góc thường mất thời gian, tốc độ nạp trang chậm (so với phương pháp thuần css) .
Với kinh nghiệm và vốn hiểu biết của mình, trong bài viết này tôi xin giới thiệu với bạn cách bo góc và đổ bóng cho khung dựa vào thẻ DIV bằng cách sử dụng các thuộc tính border-radius và box-shadow của CSS3.
Các hiệu ứng bo góc và đổ bóng mờ của CSS3 chỉ áp dụng cho trình duyệt web có hỗ trợ CSS3 như Chrome, Firefox , Safari, Opera , IE 9.
I. Bo góc cho khung DIV với thuộc tính border-radius.
Đầu tiên , bạn hãy tạo ra 1 trang html, tiếp theo trong thẻ BODY, bạn tạo 1 khung DIV và đặt ID cho nó theo ý của mình. Trong ví dụ dưới đây, ID tôi sẽ sử dụng là “khung1”
Sau đó tại phần mã lệnh css cho khung DIV chúng ta sử dụng thuộc tính border-radius theo cách như sau
border-radius: 15px ( thuộc tính css để bo góc cho khung DIV với 4 góc có độ lượn là 15 chấm điểm).
Mội số trình duyệt không nhận dạng được thuộc tính này nhưng nhận dạn được thuộc tính tương đương: -moz-border-radius (Ví dụ FireFox) Đối với thuộc tính border-radius này có thể 1 vài phiên bản của FireFox không hiểu nên khung DIV sẽ không có hiệu ứng bo, vì vậy để khắc phục tình trạng đó các bạn có thể nhập thêm 1 dòng border-radius khác với 1 vài ký tự đặc biệt sau
Kết quả cho những dòng css trên sẽ như sau
Để bo tròn cho từng góc của khung DIV, các bạn có thể dùng những lệnh mở rộng sau :
- border-radius : bo 4 góc.
- border-top-left-radius : bo góc phía trên bên tay trái.
- border-top-right-radius : bo góc phía trên bên tay phải.
- border-bottom-left-radius : bo góc phía dưới bên tay trái.
- border-bottom-right-radius : bo góc phía dưới bên tay phải.
Đối với trình duyệt FireFox :
- -moz-border-radius : bo 4 góc.
- -moz-border-radius-topleft : bo góc phía trên bên tay trái.
- -moz-border-radius-topright : bo góc phía trên bên tay phải.
- -moz-border-radius-bottomleft : bo góc phía dưới bên tay trái.
- -moz-border-radius-bottomright : bo góc phía dưới bên tay phải.
II. Đổ bóng cho khung DIV với thuộc tính box-shadow.
Đối với khung DIV , CSS3 hỗ trợ hiệu ứng bóng mờ với thuộc tính box-shadow.
Thuộc tính box-shadow nhận vào 4 tham số.
Tham số thứ 1 : kích thước của bóng mờ ở vị trí bên phải của khung div, nếu mà bạn muốn bóng mờ ở vị trí bên trái thì thêm dấu trừ vào trước tham số( như ví dụ : -5px).
Tham số thứ 2 : kích thước của bóng mờ ở vị trí phía dưới của khung div, nếu mà bạn muốn vị trí của bóng mờ nằm phía trên khung DIV thì chỉ cần thêm dấu trừ vào trước tham số( như ví dụ : -3px)..
Tham số thứ 3 : là độ nhòe của bóng mờ, tham số truyền vào này càng cao thì độ nhòe của bóng càng cao.
Tham số 4 : màu của bóng.
Chỉ cần đặt thêm thuộc tính inset trước các tham số của thuộc tính box-shadow, thì vị trí của bóng mờ sẽ hiển thị vào bên trong khung DIV.
Lưu ý : Để hiệu ứng có thể chạy trên Firefox, và Safari , các bạn cần truyền thêm phía trước thuộc tính box-shadow.
- FireFox :-moz-box-shadow : 5px 3px 5px #ccc;
- Safari :-webkit-box-shadow: 5px 3px 5px #ccc;
+ Sử dụng thuần css.
+ Sử dụng CSS hỗ trợ với hình ảnh.
Tuy nhiên, mỗi phương pháp có ưu và nhược điểm khác nhau. Nếu sử dụng thuần css thì đôi khi trang web của bạn hiển thị tốt trên trình duyệt này nhưng lại gặp không ít khó khăn khi người dùng sử dụng trình duyệt khác (IE là 1 minh chứng trong các phiên bản IE.6 IE.7). Trong khi đó viêc sử dụng hình ảnh để hỗ trợ dựa trên nguyên tắc ghép nhiều mảnh hình ảnh vào để tạo ra hiệu ứng trình bày tại 4 góc thường mất thời gian, tốc độ nạp trang chậm (so với phương pháp thuần css) .
Với kinh nghiệm và vốn hiểu biết của mình, trong bài viết này tôi xin giới thiệu với bạn cách bo góc và đổ bóng cho khung dựa vào thẻ DIV bằng cách sử dụng các thuộc tính border-radius và box-shadow của CSS3.
Các hiệu ứng bo góc và đổ bóng mờ của CSS3 chỉ áp dụng cho trình duyệt web có hỗ trợ CSS3 như Chrome, Firefox , Safari, Opera , IE 9.
I. Bo góc cho khung DIV với thuộc tính border-radius.
Đầu tiên , bạn hãy tạo ra 1 trang html, tiếp theo trong thẻ BODY, bạn tạo 1 khung DIV và đặt ID cho nó theo ý của mình. Trong ví dụ dưới đây, ID tôi sẽ sử dụng là “khung1”
Mội số trình duyệt không nhận dạng được thuộc tính này nhưng nhận dạn được thuộc tính tương đương: -moz-border-radius (Ví dụ FireFox) Đối với thuộc tính border-radius này có thể 1 vài phiên bản của FireFox không hiểu nên khung DIV sẽ không có hiệu ứng bo, vì vậy để khắc phục tình trạng đó các bạn có thể nhập thêm 1 dòng border-radius khác với 1 vài ký tự đặc biệt sau
- border-radius : bo 4 góc.
- border-top-left-radius : bo góc phía trên bên tay trái.
- border-top-right-radius : bo góc phía trên bên tay phải.
- border-bottom-left-radius : bo góc phía dưới bên tay trái.
- border-bottom-right-radius : bo góc phía dưới bên tay phải.
Đối với trình duyệt FireFox :
- -moz-border-radius : bo 4 góc.
- -moz-border-radius-topleft : bo góc phía trên bên tay trái.
- -moz-border-radius-topright : bo góc phía trên bên tay phải.
- -moz-border-radius-bottomleft : bo góc phía dưới bên tay trái.
- -moz-border-radius-bottomright : bo góc phía dưới bên tay phải.
Đối với khung DIV , CSS3 hỗ trợ hiệu ứng bóng mờ với thuộc tính box-shadow.
Thuộc tính box-shadow nhận vào 4 tham số.
Tham số thứ 2 : kích thước của bóng mờ ở vị trí phía dưới của khung div, nếu mà bạn muốn vị trí của bóng mờ nằm phía trên khung DIV thì chỉ cần thêm dấu trừ vào trước tham số( như ví dụ : -3px)..
Tham số thứ 3 : là độ nhòe của bóng mờ, tham số truyền vào này càng cao thì độ nhòe của bóng càng cao.
Tham số 4 : màu của bóng.
Chỉ cần đặt thêm thuộc tính inset trước các tham số của thuộc tính box-shadow, thì vị trí của bóng mờ sẽ hiển thị vào bên trong khung DIV.
Lưu ý : Để hiệu ứng có thể chạy trên Firefox, và Safari , các bạn cần truyền thêm phía trước thuộc tính box-shadow.
- FireFox :-moz-box-shadow : 5px 3px 5px #ccc;
- Safari :-webkit-box-shadow: 5px 3px 5px #ccc;
