Những thủ thuật CSS hay nhất giúp cải thiện bố cục Website

Nếu bạn cảm thấy website của mình bị nhàm chán, trải nghiệm người dùng chưa tốt thì tại sao bạn không thử thay đổi, cải thiện bố cục trang web bằng cách áp dụng những thủ thuật CSS hay và đơn giản dưới đây nhỉ?

Khám phá các chế độ blend CSS

Hình ảnh duotone và hiệu ứng colouriser là một số xu hướng thiết kế web đáng chú ý nhất. Chúng phổ biến rộng rãi là nhờ vào Spotify. Bây giờ bạn cũng có thể tạo ra nhiều phiên bản màu khác nhau trong asset của mình và áp dụng các hiệu ứng trực tiếp trong trình duyệt.

Sử dụng blend CSS không chỉ là một cách tuyệt vời để thống nhất giao diện nội dung trên các trang web, nó còn cho phép bạn cài đặt các phiên bản màu khác nhau của hình ảnh, chỉ thay đổi một giá trị trong CSS: colour. Có 15 giá trị chế độ blend có thể sử dụng, bao gồm màn screen, overlay, làm sáng và làm tối.

Có một vài phương thức thực hiện, tùy thuộc vào loại phần tử bạn muốn áp dụng hiệu ứng. Ví dụ: bạn có thể sử dụng background-image và background-colour trên container background-blend-mode: darken;, hoặc tạo overlay với các phần tử pseudo (ví dụ::before và :after) trên wrapper bọc hình ảnh để có được một hiệu ứng màu sắc.

Để đạt được hiệu ứng duotone tốt, mình khuyên bạn nên sử dụng hình ảnh đen trắng có độ tương phản cao. Bạn có thể làm điều này bằng cách áp dụng các bộ lọc CSS để đặt thang độ xám và mức độ tương phản cao.

Một thuộc tính thú vị khác là mix-blend-mode, cho phép bạn trộn nội dung của phần tử với nội dung hoặc background của cha nó. Điều này đặc biệt áp dụng tốt trên kiểu chữ chồng chéo.

Thêm Mask

Lưu ý rằng không giống như một hình ảnh raster thông thường, SVG có thể được thu nhỏ hoặc biến đổi mà không làm giảm chất lượng đáng kể.

img {

mask-image: url(‘mask.png’) linear-gradient(-45deg,

rgba(0,0,0,1) 20%, rgba(0,0,0,0) 50%);

mask-image: url(#masking); /*referencing to the element generated and defined in SVG code*/

}

Điều quan trọng cần đề cập là Firefox chỉ hỗ trợ cho phiên bản mới nhất, vì vậy chúng ta cần sử dụng mask SVG inline. Vậy điều gì sẽ xảy ra nếu chúng ta sử dụng hình ảnh raster trong suốt? Các phần trong suốt của hình ảnh sẽ không được nhìn thấy - vì vậy nói cách khác, các phần mờ sẽ được hiển thị, ẩn các phần khác.

Masking đặc biệt mạnh mẽ vì nó cho phép bạn áp dụng các thuộc tính tương tự cho hình ảnh nền, xác định vị trí, kích thước và độ lặp lại của chúng.

Một trường hợp tuyệt vời để áp dụng masking CSS là trong các bài viết kết hợp văn bản và hình ảnh. Các container và hình ảnh bất thường rất phổ biến trong in ấn, nhưng lại tẻ nhạt và tốn thời gian để thực hiện trên web. Nhưng nhờ masking, vấn đề đó sẽ không còn nữa!

Sử dụng clipping

Một tính năng tuyệt vời khác là clipping CSS. Ranh giới hình dạng được gọi là clip-path (đừng nhầm lẫn với thuộc tính clip không còn dùng nữa) và clipping xác định vùng hình ảnh nào sẽ được hiển thị. Clipping tương tự như cắt ra một mảnh giấy - mọi thứ bên ngoài đường viền sẽ bị ẩn đi, trong khi mọi thứ bên trong vẫn sẽ hiển thị bình thường.

clip-path: circle(radius at x, y);

clip-path: url(#clipping); /*referencing to SVG element*/

Ví dụ: nếu function cricle đặt clipping mask lên trên đầu hình ảnh, bạn sẽ chỉ thấy phần hình ảnh trong vòng tròn này.

Điều thú vị là chúng ta có thể sử dụng các hàm hình dạng và SVG làm đường dẫn clip, điều này mang lại cho chúng ta rất nhiều lựa chọn - ví dụ, chúng ta có thể biến chúng thành các hình dạng biến hình.

Nếu bạn đang tự hỏi sự khác biệt giữa clipping và mask là gì, thì hãy nhớ rằng mask là hình ảnh và clip chỉ là đường dẫn vector. Điều đáng nói là việc che dấu sẽ tiêu tốn nhiều bộ nhớ hơn, vì bạn đang làm việc với một hình ảnh đầy đủ để mọi thứ phải được thực hiện theo pixel.

Đây là lý do tại sao nó khuyên bạn nên sử dụng mask khi bạn muốn có hiệu ứng trong suốt một phần; Nếu bạn muốn các cạnh sắc nét, tốt nhất bạn nên sử dụng các đường dẫn clip.

Think outside the box

Shape-outside và shape-inside đã tới để giải cứu! Ai nói rằng container text luôn phải là hình chữ nhật? Hãy bước ra khỏi hộp, theo đúng nghĩa đen và khám phá các hình thức mới làm cho bố cục trang của chúng ta phong phú hơn và ít hộp hơn. thuộc tính Shape-outside và shape-inside cho phép bạn bọc nội dung của mình xung quanh các đường dẫn tùy chỉnh trong CSS.

Vậy, làm thế nào để nó hoạt động? Chỉ cần áp dụng mã sau đây cho hình ảnh nổi hoặc container:

shape-outside: circle(50%); /* content will flow around the circle*/

Điều quan trọng cần lưu ý là thuộc tính float và kích thước của phần tử - height và width - phải được đinh nghĩa, nếu không tất cả mọi thứ sẽ không hoạt động. Đối với hình dạng, bạn có thể dùng với circle(), polygon(), inset() hoặc ellipse().

Một giá trị khác có thể là hàm url(). Trong trường hợp này, điều này cho Shape-outside xác định hình dạng phần tử dựa trên hình ảnh. Bạn có thể chọn sử dụng hàm url() thay vì polygon() khi bạn có một đồ họa đặc biệt tinh vi với nhiều đường cong và điểm mà bạn muốn lại nội dung được bao bọc một cách trơn tru.

Nếu bạn muốn tạo thêm khoảng trống giữa phần tử của bạn và nội dung, hãy sử dụng thuộc tính shape-margin, nó sẽ hoạt động giống như một bản lề. Các hàm shape có thể là hoạt hóa, nhưng chỉ đối với các đa giác được xác định - không may là hàm url() không thể hoạt hóa được.

Hiện tại, lượng trình duyệt hỗ trợ cho Shape-outside đang khá hạn chế. Có  lẽ nó sẽ được mở rộng trong tương lai.

Trên đây là một vài thủ thuật CSS hay và đơn giản giúp cải thiện bố cục Website cho bạn tham khảo. Mong rằng chúng sẽ giúp bạn có  một trang web như ý.

Tham khảo Viblo.asia