Hôm nay mình có viết 1 tiện ích nhỏ chạy trên nền web trong đó có phần phải tải font Awesome để sử dụng một số icon từ font chữ này. Tất cả đều ổn tuy nhiên khi mặc định mình để tải cho tất cả. Vấn đề ở đây xảy ra với các trang
Complete Reading
Một nút bấm có hiệu ứng sẽ gây chú ý hơn cho người truy cập tăng hiệu quả chuyển đổi. Bài viết này sẽ hướng dẫn bạn cách tạo 1 nút bấm với hiệu ứng lắc. Rất đơn giản. Đầu tiên tạo đoạn mã CSS như sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | .btn-shake:hover { animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; } @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } } |
Vậy là xong rồi đó. Giờ bạn muốn
Complete Reading
Hôm nay đụng một yêu cầu là phải xử lý CSS cho đối tượng ở hai màn hình lật ngang và lật dọc. Lúc đầu mình định dùng thuộc tính @media với min-width, max-width. Tuy nhiên vì một số lý do nên không thể sử dụng vì nhiều thiết bị có các kích cỡ màn hình
Complete Reading
Vì một lý do nào đó bạn không muốn cho người truy cập chọn văn bản trên trang của bạn. Việc này là hoàn toàn khả thi chỉ với kỹ thuật CSS. Bạn sử dụng đoạn mã CSS sau đây:
1 2 3 4 5 6 7 8 | .noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } |
Xong, giờ bạn hãy thêm class select vào các vùng mà bạn không muốn
Complete Reading
CSS đã ra đời vào từ rất lâu – khoảng từ năm 1994 – và nó đã trở thành tiêu chuẩn cho bố cục của các trang web. Các thông số kỹ thuật mới (CSS4) tiếp tục bổ sung chức năng mới mẻ với các hiệu ứng animation (hoạt hình), transforms, box shadow (bóng) là
Complete Reading
Khi bạn chèn video trên Youtube vào trang web của mình bạn sẽ nhận được 1 đoạn mã chèn iframe vào trang web hoặc là một đoạn mã chèn flash nếu bạn chọn theo mã cũ. Và thông thường thì với những đoạn mã này bạn sẽ phải cố định kích thước nên rất khó
Complete Reading
Như các bạn đã biết thẻ <a> trong HTML là một siêu liên kết, được sử dụng để liên kết từ trang này sang trang khác. Các thuộc tính quan trọng nhất của phần tử <a> là thuộc tính href, mà chỉ ra điểm đến của liên kết. Mình đã gặp phải vài dự án
Complete Reading
Hiệu ứng Parallax theo mình thấy nó không mang nhiều ý nghĩa lắm nhưng nó tạo cảm giác… mượt mà cho trang web. Nhiều trang web dùng hiệu ứng này làm cho trang web trở nên có thiện cảm cho khách truy cập. Theo tìm hiểu thì mình thấy có nhiều cách để tạo ra
Complete Reading
Nhận nhiệm vụ tối ưu hóa nhắm tăng tốc cho một website của khách hàng nên được dịp tìm hiểu các và triển khai các cách khác nhau để… chiều lòng khách hàng. Một trong các cách mình thực hiện là nén các tập tin CSS, Javascript, hình ảnh… Với hình ảnh thì ta có
Complete Reading
Khi truy cập 1 số website bạn sẽ bắt gặp thấy một số banner quảng cáo trượt theo nội dung bài viết nhưng khi gặp “vật cản” là các banner cố định hoặc chân trang thì nó sẽ dừng lại. Đây là một kỹ thuật hay nó vừa giúp website có hiệu ứng đẹp vừa
Complete Reading