Mẫu bình chọn 5 ngôi sao đơn giản bằng HTML radio & CSS3
Chỉ đơn giản với HTML radio và thuộc tính CSS3 transitions/transforms, chúng ta sẽ tạo một mẫu rating mà hầu hết được bắt gặp ở các website trong và ngoài nước sử dụng chúng.
Xem Demo|Download
HTML
Như đã nói, cấu trúc html cho mẫu rating này chỉ đơn giản như sau :
Các bạn đừng quên chèn thư viện font Awesome để tạo icon cho các ngôi sao.
CSS
Và đoạn css sau sẽ giúp chúng ta tạo hiệu ứng cho các ngôi sao.
div.stars { width: 270px; display: inline-block; } input.star { display: none; } label.star { float: right; padding: 10px; font-size: 36px; color: #444; transition: all .2s; } input.star:checked ~ label.star:before { content: '\f005'; color: #FD4; transition: all .25s; } input.star-5:checked ~ label.star:before { color: #FE7; text-shadow: 0 0 20px #952; } input.star-1:checked ~ label.star:before { color: #F62; } label.star:hover { transform: rotate[-15deg] scale[1.3]; } label.star:before { content: '\f006'; font-family: FontAwesome; }Chúc các bạn thành công !
Tags: css3 star rating
Chuyên Mục: Css
Bài viết được đăng bởi webmaster
Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !
Chia sẻ cho bạn bè
Tweet
Cùng Danh Mục
- Underline Hover Effect với CSS3
- Confirm Pop Up đơn giản với CSS3 và jQuery
- Tạo Button Tooltips bằng CSS3
- Tạo hiệu ứng Image Hover cực đỉnh bằng CSS3
- Tạo menu đa cấp theo chiều ngang bằng CSS3 và jQuery
- Tạo hiệu ứng loading bằng CSS3
- Cách sử dụng CSS3 Border Radius cho IE8 trở xuống
- Tạo hiệu ứng Fixed Background bằng CSS3
- Tạo nút bấm với các Pseudo-elements trong CSS
- Hướng dẫn tạo Chat Bubbles Với CSS3