1 Một vài đoạn CSS bổ ích Sun Jul 05, 2015 9:23 pm
Admin
Admin
Một vài đoạn CSS bổ ích
Đây là những đoạn CSS mình tự viết, sưu tầm và tìm kiếm. Do đó nguồn thì xin chịu.
Căn giữa thẻ div trong thẻ div
Đọc bài này: Căn giữa thẻ divBỏ viền bao quanh link trong firefox
Trong firefox hay có viền đứt bao quanh hình ảnh hoặc link, dưới đây là đoạn css bỏ qua viền đó1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | /* * new version *******************/ img, img:focus, img::-moz-focus-inner, a::-moz-focus-inner,:-moz-any-link:focus,a:hover, a:active, a:focus { border: 0; outline: none; -moz-outline-style: none; } /* * old version **************/ /* *, *:focus { outline: none; } img, img:focus, img::-moz-focus-inner, a::-moz-focus-inner { border: 0; outline: none; } a:hover, a:active, a:focus, img, img:focus { outline: none; -moz-outline-style: none; } :-moz-any-link:focus { outline: none; } */ |
Mình dồn cả đống nên thẻ chọn nào trùng cứ bỏ ra
Không cho phép chọn chữ trong trình duyệt
1 2 3 4 5 6 7 8 | .no-select{ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } |
Và cho phép chọn trong trình duyệt
1 2 3 4 5 6 7 | .select { -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -o-user-select: text; user-select: text; } |
Cuộn mượt lên đầu trang
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | $(document).ready(function () { $(window).scroll(function () { if ($(this).scrollTop()) { $('.your-image-class:hidden').stop(true, true).fadeIn(); } else { $('.your-image-class').stop(true, true).fadeOut(); } }); // scroll-to-top $(function () { $('a[href*=#]:not([href=#])').click(function () { if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); }); // smooth-scroll }); |
Trong đó
-
- Code:
.your-image-class
- Thời gian cuộn là 1000 ms
Chú ý
Nếu bạn sử dụng Bootstrap có thể sẽ bị đè bởi
- Code:
ScrollSpy
- Code:
ScrollSpy
1 | $('.another-class a[href*=#]:not([href=#])').click(function () {} |
Hiệu ứng xoay image 360 độ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | img { max-width: 200px; height: 200px; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; transition: transform .5s ease-in-out; -webkit-transition: transform .5s ease-in-out; -moz-transition: transform .5s ease-in-out; -ms-transition: transform .5s ease-in-out; } img:hover { transform:rotate(360deg); -webkit-transform:rotate(360deg); -ms-transform:rotate(360deg); -moz-transform:rotate(360deg); } |
Kết quả
Updating...