Breaking News

Tạo thanh cuộn tùy chỉnh với CSS - Custom Scrollbars in WebKit (Chrome)

Bạn đã bao giờ vô tình vào một website và thấy trang web đó khác lại  điều đó có làm bạn thích thú và ở lại trang đó, và điều bạn quan tâm lại là điều đó. Một thanh cuộn tùy chỉnh với cách trang trí và màu sắc hấp dẫn. Bạn tự hỏi họ làm thế nào để có được nó. Dễ hay khó??
Từ IE 5.5 trở lên bạn có thể tùy biến thanh Scrollbars dễ dàng với các mã css mở rộng
Và hôm nay tôi xin giới thiệu và hướng dẫn các bạn có thể tạo ra một thanh Scrollbars theo ý mình 
tạo thanh cuộn tuỳ chỉnh
Tạo thanh cuộn tùy chỉnh với CSS
Hiện nay, tùy biến thanh cuộn được hỗ trợ tốt hơn nhưng đồng thời nó cần một tiền tố riêng để hỗ trợ tốt nhất cho từng trình duyệt. Bởi vì bạn phải cung cấp tiền tố (ví dụ :: - webkit-scrollbar ) và sử dụng các hiệu ứng bóng đổ, gradient để tạo nên nhiều hiệu ứng khác nhau. Điều này đã được phổ biến khoảng một vài năm. Chỉ áp dụng cho một trang ví dụ về mọi sự kết hợp của thanh cuộn bất cứ lúc nào bạn muốn.
*chú ý : 
-webkit là tiền tố để cho các thuộc tính tương thích với trình duyệt Chrome và các ứng dụng phát triển từ mã nguồn Chrome. Tương tự:
-moz là tiền tố áp dụng cho trình duyệt Mozila FireFox
Xem thêm:  Các tiền tố hỗ trợ hiển thị CSS trên các trình duyệt

Các thuộc tính CSS chính của một Scrollbar

Đây là những yếu tố cơ bản. Các bộ phận thực tế của các thanh cuộn.
::-webkit-scrollbar                           { /* 1 */ }
::-webkit-scrollbar-button                { /* 2 */ }
::-webkit-scrollbar-track                  { /* 3 */ }
::-webkit-scrollbar-track-piece        { /* 4 */ }
::-webkit-scrollbar-thumb                { /* 5 */ }
::-webkit-scrollbar-corner               { /* 6 */ }
::-webkit-resizer                              { /* 7 */ }
Các thuộc tính cơ bản của mã CSS Scrollbar
Các thuộc tính cơ bản của mã CSS Scrollbar

Các thuộc tính khác của Scrollbar

Đây là những thuộc tính tạo lớp giả lên các đối tượng trên thanh Scrollbar. Chúng cho phép lựa chọn cụ thể của từng bộ phận, như khi scrollbar là ở các đối tượng khác nhau.
: horizontal
: vertical
: decrement
: increment
: start
: end
: double-button
: single-button
: no-button
: corner-present
: window-inactive
Tôi sẽ lấy toàn bộ phần này từ bài viết trên blog của David trên blog WebKit bởi vì nó giải thích từng phần rất cụ thể các bạn có thể tham khảo:
:horizontal – The horizontal pseudo-class applies to any scrollbar pieces that have a horizontal orientation.
:vertical – The vertical pseudo-class applies to any scrollbar pieces that have a vertical orientation.
:decrement – The decrement pseudo-class applies to buttons and track pieces. It indicates whether or not the button or track piece will decrement the view’s position when used (e.g., up on a vertical scrollbar, left on a horizontal scrollbar).
:increment – The increment pseudo-class applies to buttons and track pieces. It indicates whether or not a button or track piece will increment the view’s position when used (e.g., down on a vertical scrollbar, right on a horizontal scrollbar).
:start – The start pseudo-class applies to buttons and track pieces. It indicates whether the object is placed before the thumb.
:end – The end pseudo-class applies to buttons and track pieces. It indicates whether the object is placed after the thumb.
:double-button – The double-button pseudo-class applies to buttons and track pieces. It is used to detect whether a button is part of a pair of buttons that are together at the same end of a scrollbar. For track pieces it indicates whether the track piece abuts a pair of buttons.
:single-button – The single-button pseudo-class applies to buttons and track pieces. It is used to detect whether a button is by itself at the end of a scrollbar. For track pieces it indicates whether the track piece abuts a singleton button.
:no-button – Applies to track pieces and indicates whether or not the track piece runs to the edge of the scrollbar, i.e., there is no button at that end of the track.
:corner-present – Applies to all scrollbar pieces and indicates whether or not a scrollbar corner is present.
:window-inactive – Applies to all scrollbar pieces and indicates whether or not the window containing the scrollbar is currently active. (In recent nightlies, this pseudo-class now applies to ::selection as well. We plan to extend it to work with any content and to propose it as a new standard pseudo-class.)

Và tất cả cùng nhau thực hành ngay bây giờ

Những yếu tố giả và bộ chọn lớp giả làm việc cùng nhau. Dưới đây là một số ví dụ ngẫu nhiên:
::-webkit-scrollbar-track-piece:start { /* Select the top half (or left half) or scrollbar track individually */ } ::-webkit-scrollbar-thumb:window-inactive { /* Select the thumb when the browser window isn't in focus */ } ::-webkit-scrollbar-button:horizontal:decrement:hover { /* Select the down or left scroll button when it's being hovered by the mouse */ }

Một ví dụ cơ bản về Customize Scrollbar

Cán bạn có thể sử dụng đoạn mã CSS dưới đây
::-webkit-scrollbar { width: 12px;}::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; }::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }

Đây là kết quả bạn nhận được từ đoạn CSS trên. Bạn có thể tùy chỉnh các thông số và các hiệu ứng để có được Scrollbar như ý nhé.
Ví dụ về Tùy chỉnh thanh cuộn web
Ví dụ về Tùy chỉnh thanh cuộn web

Trong thực tế việc sử dụng Customize Scrollbar

Kiểm tra các thanh cuộn rất tinh tế và đẹp trên blog Tim Van Damme của Maxvoltar ( Cập nhật tháng 9 năm 2012 : trang web của Tim không còn sử dụng thiết kế này):
Ví dụ về việc sử dụng tiền tố -webkit-1
Ví dụ về Scrollbar tùy chỉnh
Thêm một ví dụ để các bạn có thể thấy sự khác biệt khi sử dụng tiền tố -webkit
Ví dụ về việc sử dụng tiền tố -webkit
Ví dụ về việc sử dụng tiền tố -webkit
Cuối cùng xin cảm ơn các bạn đã quan tâm theo dõi và đọc bài viết này. Hy vọng nó sẽ giúp ích cho các bạn.

Không có nhận xét nào