Thiết Kế Web | Công ty Thiết kế Website Giá rẻ
Chúng tôi sẵn sàng làm việc qua
Phone Viber Zalo Phone

Blogs Thiết Kế Web & Seo Web

05 mẹo vặt CSS mà ít người thường biết tới khi sử dụng

Thứ hai - 03/12/2018 07:37
Đã làm việc trong các agency về web qua nhiều năm, tôi tích lũy được cho mình một số mẹo và thủ thuật. Một số chúng đã được tôi bất giác sử dụng trong tiềm thức hàng ngày. Một số mẹo khá là thường gặp, và những số khác thì bất thường hơn, nhưng tất cả các đoạn code và ví dụ dưới đây là những thứ mà tôi đã sử dụng trên các trang web của khách hàng.
Mẹo vặt css
Mẹo vặt css

Transitions – chuyển đổi


Theo mặc định trên tất cả các trang web do chính tay xây dựng, tôi luôn thêm một CSS transition trên các liên kết và nút cho trạng thái hover state của chúng. Dù nó chỉ là để thêm hiệu ứng đẹp khi bạn di chuyển chuột, và giúp xóa đi sự thay đổi đột ngột khi bạn tương tác với một nút hoặc liên kết.

 

Đối với một nút, tôi rất có thể sẽ thêm quá trình chuyển đổi cho màu background như được hiển thị ở trên, còn đối với một link thì tôi đặt thuộc tính cho tất cả chuyển đổi, transition property, là (transition: all 0.2s ease-in-out). Nhờ đó mà có thể chuyển đổi màu di chuột và đường viền.

Tôi cũng không bao giờ sử dụng text-decoration: underline vì bạn không có nhiều tác động lên nó, trong khi bạn có thể sử dụng bottom border để có được một hiệu ứng đẹp hơn nhiều. Padding cho phép khoảng cách spacing tốt hơn và bạn thậm chí có thể chuyển đổi hoặc tạo hiệu ứng cho đường biên – border nếu muốn.

Background overlay

Giả sử bạn có một số text, phải được đặt hoàn toàn trên đầu hình ảnh. Nhưng hình nền quá sáng, làm cho văn bản không đọc được. Bạn có thể thêm một div khác trong đó đó để tạo ra một lớp phủ tối phía sau văn bản, tuy nhiên điều này lại không được hiệu quả lắm và việc phải thêm một div trống thì quả thực sự không cần thiết.

Thay vào đó hãy dùng Pseudo-element!

Sử dụng phần tử :before có nghĩa là chúng ta cũng có thể áp dụng nó nếu một class nào đó được thêm vào div chẳng hạn.

Hiệu ứng underline cho nhiều dòng

Đây là một trường hợp tôi được yêu cầu làm trên trang web của khách hàng. Nó cho phép khả năng có một hiệu ứng gạch chân đậm mà sẽ kéo dài trên một câu với chiều dài của câu đó, ngay cả khi là nhiều dòng.

Sticky elements

Bạn cần một element để dính vào scroll, nhưng lại không muốn sử dụng JavaScript, hoặc một plugin, hoặc chiều cao của nội dung của bạn là dynamic và có khả năng thay đổi? Hãy sử dụngposition: sticky.

Điều này cực kỳ hữu ích cho tôi khi tôi phải có một sidebar dính bên cạnh một accordion element.Bởi vì việc mở và đóng của accordion, bạn sẽ phải tính toán chiều cao hoặc sử dụng một số phương pháp phức tạp khác, điều mà position: sticky có thể hoàn thành ngay lập tức.Trường hợp ngoại lệ duy nhất để nó không hoạt động là khi phần thân của element được thiết lập để overflow: hidden, và không được hỗ trợ trong IE11.

Ngăn chặn highlighting

Việc có thể chọn văn bản trên một trang web là một tính năng thông dụng, tuy nhiên đôi khi tôi thấy rằng người dùng có thể nhấp nhiều lần trên một phần tử (ví dụ: một mũi tên băng chuyền) và nó sẽ selects/highlight phần tử đó.

Để ngăn chặn điều này, bạn có thể sử dụng đoạn mã sau:

Cảm ơn bạn đã đọc bài viết này! Tôi hy vọng nó sẽ có ích cho một số người trong quá trình học tập và làm việc với CSS.

Tác giả bài viết: Techtalk

Tổng số điểm của bài viết là: 0 trong 0 đánh giá

Click để đánh giá bài viết

  Bình luận hoặc đặt câu hỏi của bạn

Vui lòng để lại số điện thoại trong ô nội dung để được tư vấn liên hệ nhanh nhất!
Dịch vụ thiết kế web giá rẻ, seo web giá rẻ, quảng cáo google giá rẻ hàng đầu Việt Nam. Hãy vượt qua đối thủ cạnh tranh bằng dịch vụ của chúng tôi.
Thietkewebseo.net (phân vùng website mảng thiết kế web, quảng cáo marketing và dịch vụ website của Công ty ZoZo) cung cấp dịch vụ thiết kế web, quảng cáo web và Hosting - Tên miền giá rẻ, chuyên nghiệp hàng đầu Việt Nam.
Bản quyền thuộc về Công ty TNHH Thương Mại Và Dịch Vụ ZoZo - Website: thietkewebseo.net
Giấy phép kinh doanh số: 0201789377 do Sở Kế hoạch và Đầu tư Hải Phòng cấp.
Địa chỉ: 105 Đường Đồng Thiện, Phường Vĩnh Niệm, Quận Lê Chân, Tp. Hải Phòng
Điện thoại: 0965 365 357 - Hotline: 093 6868 893
Email: info@thietkewebseo.net / Website: thietkewebseo.net

Thiết kế web | thiết kế web giá rẻ | thiết kế web hà nội | thiết kế web công ty | thiết kế web bán hàng | thiết kế web theo yêu cầu | thiết kế web bất động sản | thiết kế web chuyên nghiệp | công ty thiết kế web | seo web | seo web hiệu quả | seo web giá rẻ | thiết kế web quảng ninh | thiết kế web thái bình | thiết kế web hải dương |  thiết kế web hải phòng | thiet ke web hai phong | thiết kế website hải phòng | thiet ke website hai phong |  quang cao facebook | facebook ads | Thiet ke web | quảng cáo google

Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây