Trong CSS, có nhiều cách để bạn tạo ra được một element. Đôi lúc, bạn sẽ cảm thấy nó phức tạp để thực hiện chúng. Do đó, bạn có thể sáng tạo ra nhiều cách để hoàn thành một công việc, miễn là nó tối ưu năng suất làm việc của bạn. Mình xin chia sẻ vài mẹo CSS (CSS tricks) mà có thể bạn cần. Hi vọng chúng có thể giúp bạn giảm đi phần nào workload cũng như khơi gợi được sự sáng tạo của bạn trong công việc.
Mục lục
Tạo backdrop bằng box-shadow
Thông thường, khi mở một popup (hoặc modal) thì đằng sau popup đó sẽ có một backdrop để làm tối tổng thể và nổi bật popup đó. Cách làm đơn giản nhất mà mình tham khảo được là bạn sử dụng box-shadow cho popup đó. Cụ thể code sẽ như thế này:
See the Pen full screen box-shadow by minhchau (@ngocminhxx) on CodePen.
Tuy nhiên, đối với cách này, khi popup hiện ra, các nội dung phía dưới vẫn có thể tương tác được, do đó, tùy nhu cầu sử dụng, các bạn có thể cân nhắc sửa đổi thêm.
Tạo overflow container
Ví dụ bạn có một element nằm trong một container được set width như hình dưới đây
Element này của bạn được yêu cầu phải full width của trình duyệt, nhưng ngặt nỗi là nó lại nằm trong một container khác rồi và bạn thì không thể sửa HTML. Và đây là cách chữa cháy dành cho bạn:
.wrapper {
width: 100vw;
margin-inline-start: 50%;
transform: translateX(-50%);
}Có thể bạn cần thêm overflow: hidden; vào wrapper nếu body xuất hiện scrollbar ngang.
Border-radius 100vmax
Nếu bạn cần tạo một button dạng viên thuốc như dưới đây, thì bạn cần giá trị cho CSS property border-radius bằng hoặc gần bằng một nửa chiều cao của button ấy.
See the Pen border-radius 100vmax by minhchau (@ngocminhxx) on CodePen.
Vì vậy, nếu bạn cần button của bạn luôn luôn có hình dạng viên thuốc và không phụ thuộc vào chiều cao của button thì border-radius: 100vmax sẽ là giải phảp tốt nhất dành cho bạn.
Tổng kết
Những kiến thức này mình sưu tầm được từ kênh youtube này. Bạn có thể tham khảo thêm để biết thêm chi tiết