Selection - Màu mè cho website với CSS

Đăng bởi clvin trong mục Hướng dẫn vào 15 tháng 7, 2011 | Comments

Seletion là 1 tùy chỉnh của css có sẵn trong trình duyệt nhưng ít được biết được bởi tính năng của nó chẳng quan trọng gì lắm kèm theo màu mặc định của nó là xám xịt. Bạn có thể dễ dàng thấy nó khi bôi đen 1 đoạn văn bản hoặc 1 vùng trang web hoặc nhanh gọn hơn là Ctrl+A. Đây là 1 tùy chỉnh rất hay dùng để thay đổi màu khu vực select, tuy tính năng đơn giản nhưng nó dễ dàng đánh vào thị giác của người xem nếu họ lỡ tay dính bẫy. Smile

Demo

Bôi đen hoặc Ctrl+A để thấy kết quả.

Đây là đoạn văn bản với ::selection.

Đây là đoạn văn bản với ::-moz-selection.

Đây là đoạn văn bản với ::-webkit-selection.

Cách sử dụng

Thêm các class sau vào file css của bạn, sau đó gọi lại các class này ở những yếu tố mà bạn muốn, hoặc bạn có thể dùng cho cả trang web. Tuy khá phiền phức vì phải tùy chỉnh cho các trình duyệt nhưng Selection rất nhỏ gọn và độ đẹp của nó nếu được dùng đúng cách sẽ rất tuyệt vời.

/* Cho từng phần tử bạn muốn quy định */
p.normal::selection {
	background:#cc0000;
	color:#fff
}

p.moz::-moz-selection {
	background:#cc0000;
	color:#fff
}

p.webkit::-webkit-selection {
	background:#cc0000;
	color:#fff

/* Dùng cho toàn trang web */
::selection {
	background: #9f9
}
::-webkit-selection {
	background: #9f9
}
::-moz-selection {
	background: #9f9
}

Hi vọng với tay nghề gõ phím thần sầu và bộ não nhăn nheo của các designer có thể tạo ra nhiều điều hay ho với Selection Smile

css

Bạn có thích bài viết này?

clvin