Nếu bạn cần tạo một background dạng bàn cờ caro thì code dưới đây có thể sẽ giúp được bạn
- CSS
- ...
Giới hạn số dòng bằng CSS line-clamp

Bạn có một cái title nhưng nó quá dài và bạn muốn giơi hạn nó trong 2 dòng với dấu ba chấm như thế này Có nhiều cách để làm được điều này. Các bạn có thể sử dụng CSS hoặc JS để thực hiện. Theo mình, cách dễ thực hiện nhất là sử dụng […]
Làm Front-end có gì vui?

Front-end là gì? Nếu cho rằng một trang web (hay ứng dụng) nào đó là một cơ thể hoàn chỉnh thì Front-end chỉnh là vẻ bề ngoài của cơ thể đó. Đẹp hay xấu là do Front-end cả. Theo mình thấy, có rất nhiều người xem công việc code Front-end này cực kì nhàn và […]
Cách xử lí khi trang web của bạn bị tràn? (overflow)

Một trong những điều cơ bản làm cho một trang web đẹp và dễ nhìn với người dùng, đó là không xuất hiện thanh cuộn ngang (horizontal scrollbar) trong tổng thể body. Tuy nhiên, vô tình chúng ta đôi lúc khiến cho một section hay một element nào đó trong layout có width rộng hơn […]
Có thể bạn chưa biết về CSS background-repeat

Nếu bạn muốn background lặp lại, bạn có thể sử dụng CSS property background-repeat. Có một vài cách viết background-repeat, tùy thuộc vào nhu cầu sử dụng Các kiểu background-repeat Khi sử dụng background-repeat, thỉnh thoảng bạn sẽ gặp trường hợp hình ảnh của bạn sẽ lặp lại nhưng bị cắt mất như ví dụ […]
Modern CSS selectors – :has() Pseudo-Class Selector

:has() Pseudo-Class Selector sẽ chọn những thành phần dựa vào parent của chúng, ví dụ như
Modern CSS selectors – :is()
Pseudo-Class Selector

:is() Pseudo-Class Selector Nếu bạn muốn select nhiều element cùng lúc, bạn có thể sử dụng cách sau: Tuy nhiên, để ngắn gọn hơn, chúng ta có thể sử dụng :is() selector như thế này Dài dòng thêm một xíu, mình có một ví dụ như sau Giờ mình chỉ muốn select những class .text-emphasis […]
CSSgram – filter hình ảnh giống Instagram

Instagram là mạng xã hội lớn, nơi tổng hợp nhiều hình ảnh đẹp cùng với nhiều filter làm người dùng thích thú. Bạn có thể chỉnh sửa nhanh ảnh của mình chỉ qua một cú click. Instagram có rất nhiều filter đẹp, vì vậy, lựa chọn giữa các filter có thể làm bạn tốn khá […]
CSS3 Patterns Gallery

Nếu bạn cần một background đẹp cho website nhưng ngại code hoặc thêm image khiến dự án của bạn phức tạp hơn, trang web CSS3 Patterns Gallery sau đây có thể giúp bạn.