Khoanglang89
Bạn hãy đăng nhập hoặc đăng ký
Khoanglang89
Bạn hãy đăng nhập hoặc đăng ký
Khoanglang89

NHẬN THIẾT KẾ WEBSITE/ SOFTWARE - LÀM ĐỒ ÁN TỐT NGHIỆP, ĐỒ ÁN CHUYÊN MÔN NGÀNH CÔNG NGHỆ THÔNG TIN


You are not connected. Please login or register

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down  Thông điệp [Trang 1 trong tổng số 1 trang]

1Một vài đoạn CSS bổ ích  Empty Một vài đoạn CSS bổ ích Sun Jul 05, 2015 9:23 pm

Admin

Admin

Admin
Admin
Loading

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ẻ div

Bỏ 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;

}

*/
view raw nooutline.css hosted with ❤ by GitHub
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;

}
view raw noselect.css hosted with ❤ by GitHub
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;

}
view raw select.css hosted with ❤ by GitHub

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

});


view raw smoothscroll.js hosted with ❤ by GitHub
Trong đó

  1. Code:
    .your-image-class
    là class của hình (nút/link) go to top.
  2. 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
, nếu không muốn sử dụng
Code:
ScrollSpy
thì bạn có thể thêm điều kiện chọn

1 $('.another-class a[href*=#]:not([href=#])').click(function () {}
view raw smoothscrollsimple.js hosted with ❤ by GitHub

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);

}
view raw rotate360deg.css hosted with ❤ by GitHub
Kết quả
Updating...

https://khoanglang89.forumvi.com

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

Bài viết mới cùng chuyên mục

    Bài viết liên quan vớiMột vài đoạn CSS bổ ích

      Permissions in this forum:
      Bạn không có quyền trả lời bài viết