Có thể bạn quan tâm
Responsive HTML bằng một dòng CSS
Tạo lại bố cục bài viết của Medium với CSS Grid
5. Parallax Images
Hiệu ứng bắt mắt này ngày càng phổ biến và nó có thể được sử dụng để mang lại sự thú vị cho một trang khi người dùng cuộn qua nó.
Mặc dù hình ảnh bình thường của một trang di chuyển khi người dùng cuộn, parallax image dường như vẫn cố định – chỉ cửa sổ mà nó có thể nhìn thấy di chuyển.
CSS-only Example Thuộc tính bắt buộc phải có cho phiên bản đơn giản nhất của hiệu ứng này là background-attachment: fixed, cố định vị trí hình nền trên nền trong view-port. (Hiệu ứng ngược lại đạt được bằng cách sử dụng background-attachment: scroll).
CSS + JavaScript Example Để có hiệu ứng nâng cao hơn, bạn có thể sử dụng JavaScript để thêm chuyển động cho hình ảnh khi người dùng cuộn.
6. Animation with Cropped Images
Giống như phần chân trang, rất khó để cắt ảnh trước phiên bản CSS3. Bây giờ, chúng ta có hai thuộc tính giúp cắt xén dễ dàng, object-fit và object-position, phép bạn thay đổi kích thước hình ảnh mà không ảnh hưởng đến tỷ lệ khung hình.
Trước đây, luôn có thể cắt hình ảnh của bạn trong trình chỉnh sửa ảnh, nhưng một lợi thế lớn của việc cắt xén chúng trong trình duyệt là khả năng thay đổi kích thước hình ảnh như một phần của hoạt hình.
Ví dụ sau đây kích hoạt hiệu ứng bằng cách sử dụng thẻ <input type=”checkbox”>. Bằng cách đó, chúng ta có thể tận dụng pseudo-class :checked và chúng ta không cần sử dụng bất kỳ đoạn code JavaScript nào:
7. Blend Modes
Nếu bạn có kinh nghiệm sử dụng Photoshop, bạn có thể biết các chế độ blend khác nhau của nó có thể mạnh đến mức nào để tạo ra các hiệu ứng thú vị. Nhưng bạn có biết rằng hầu hết các chế độ hòa trộn (blend) trong Photoshop cũng có sẵn trong CSS không?
Ở đây, trang chủ của Medium trông như thế nào khi background-color của các hình ảnh là lightblue và blend-mode khác biệt:
Thêm vào đó, backgrounds là cách duy nhất bạn có thể tận dụng các blend-mode. Thuộc tính mix-blend-mode cho phép bạn trộn các phần tử với background hiện có của chúng. Vì vậy, ví dụ, bạn có thể tạo các hiệu ứng như thế này, bằng cách sử dụng mix-blend-mode của color-dodge và background của lightalmon.
Trước CSS3, thật khó để tin rằng các trang web có thể trông như thế này!
8. Pinterest-style Image Board
CSS Grid và Flexbox đã giúp chúng ta dễ dàng tạo được nhiều loại bố cục đáp khác nhau và cho phép chúng ta dễ dàng căn giữa các yếu tố theo chiều dọc trên một trang – điều này rất khó khăn trước đây.
Tuy nhiên, một kiểu bố cục khá đặc biện được sử dụng bởi Pinterest, trong đó vị trí dọc của từng thành phần thay đổi dựa trên chiều cao của phần tử phía trên nó.
Cách tốt nhất để đạt được điều này là sử dụng thuộc tính column. Chúng thường được sử dụng nhất để tạo nhiều cột văn bản theo kiểu báo, nhưng đây là một trường hợp sử dụng tuyệt vời khác.
Để làm việc này, bạn cần wrap các phần tử của mình trong một div và cung cấp cho wrapper một thuộc tính column-width và column-gap.
Sau đó, để ngăn chặn bất kỳ phần tử nào được phân chia giữa hai cột, thêm thuộc tính column-break-inside: avoid cho các phần tử riêng lẻ.