Tạo hiệu ứng Masonry bằng CSS cực đơn giản

0

Bạn đang có ý định làm một gallery ảnh hoặc một trang web có các thành phần được sắp xếp theo dạng Masonry nhưng sử dụng jQuery thì không cần thiết, bởi vì CSS3 đã hỗ trợ sẵn tạo hiệu ứng Masonry bằng CSS rồi.

hiệu ứng masonry

hiệu ứng masonry

Chúng ta sẽ tạo Masonry như sau:

Bạn cần có một div bọc các phần tử có class là  .masonry  với css như sau:

đoạn css trên chi layout thành 4 cột, bạn có thể thay số lượng các cột cho phù hợp.

Và các phần tử con cần sắp xếp Masonry thì ta thêm class .item  vào, với css như sau:

Với đoạn CSS đơn giản trên bạn đã có thể tạo ra hiệu ứng sắp xếp Masonry đơn giản rồi, chúc các bạn thành công!

DEMO:

Tạo hiệu ứng Masonry bằng CSS cực đơn giản
5 (100%) 32 votes
Share.

About Author

Hãy để thứ bạn yêu thích trở thành nghề nghiệp của bạn, khi đó công việc sẽ giống như một trò chơi.

  • WordPress(0)
  • Google Plus(0)
  • Facebook(0)

Leave A Reply