Peeps Avatar

Hello, codestus.

Go back

Những mẹo và thủ thuật sử dụng CSS (Phần 1)

Published at: 27/02/2021

4 mins read

Trong bài viết lần này, chúng ta sẽ tổng hợp những mẹo và thủ thuật thường được sử dụng khi làm việc với CSS để xây dựng trang web tốt hơn. Cũng góp phần cải thiện trải nghiệm người dùng (UX) tốt hơn.

1. Smooth Scrolling

Khi truy cập một số trang web bất kỳ, chúng ta thường thấy ở các bài viết thường sẽ có "Mục lục" để điều hướng người dùng xem nội dung. Khi ấn vào mục bất kỳ, sẽ có trạng thái scroll mượt mà.

Để làm được như vậy, chúng ta cần thêm thuộc tính bên dưới. Khi sử dụng thẻ <a> để truy cập đến vị trí id bất kì sẽ mượt mà hơn.

html {
	scroll-behavior: smooth;
}

2. Truncate text ...

Đôi khi, bạn xây dựng một số component sẽ không yêu cầu hiển thị toàn bộ nội dung. Như card, chúng ta chỉ cho phép hiển thị một phần nội dung tiêu đề và miêu tả như thế này

Truncate text

Chúng ta sẽ sử dụng

width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

3. Caret Color trong input

Để thay đổi màu sắc nội dung nhập vào thẻ input như thế này

Caret color

Bạn có thể thể sử dụng cách này

input {
	caret-color: red;
}

4. Box-shadow và Drop-shadow

Thông thường chúng ta hay sử dụng box-shadow để đổ bóng cho các đối tượng chúng ta xây dựng.

Bạn có biết là chúng ta có thể đổ bóng cho những hình ảnh trong suốt như thế này không ?

Drop-box vs Drop-shadow

Chắc hẵn bạn cũng nhận thấy sự khác biệt giữa 2 bức ảnh trên khi sử dụng 2 thuộc tính box-shadowdrop-shadow

Thử tìm một bức ảnh và triển khai 2 thuộc tính này luôn nhá.

// box-shadow: x y shadows color
box-shadow: 5px 10px 20px black;

// drop-shadow(x y shadows color)
filter: drop-shadow(30px 10px 4px black)

5. Drop cap letter

Bạn có thể đã từng thấy ở những blogs các nhân, thông thường chữ cái đầu tiên sẽ to và chiếm 1 phần kích thước xung quanh nó.

Drop cap

Chúng ta gọi đây là Drop cap. Bạn có thể thực hiện nó bằng cách bên dưới

.drop-cap:first-child {
	font-family: "Source Sans Pro", Arial;
	float: left;
	font-size: 6rem; /** font-size-base * 6 */
	line-height: 0.65;
	margin: 0.1em 0.1em 0.2em 0;
}

6. Căn giữa DIV

Căn giữa phần tử div đôi khi có thể khiến bạn nản lòng, nhưng bạn không còn phải như thế khi bỏ túi thủ thuật này. Bạn có thể căn giữa bất kỳ div nào chỉ với một vài dòng CSS.

body {
	display: grid;
	height: 100vh;
	margin: 0;
	place-items: center center;
}

7. Lấy giá trị thuộc tính thẻ html trong css

Có thể bạn sẽ rất đau đầu vì không kiếm được cách lấy nội dung mình nhập từ thẻ html vào css động, cho phép nó tự thay đổi nội dung dựa trên thẻ html. Và vấn đề của bạn sẽ được giải quyết bằng cách sử dụng hàm attr() mà css đã cung cấp sẵn.

Đừng lo về browser supported, hầu như các trình duyệt đã hỗ trợ hàm này.

Bạn có thế ứng dụng nó để xây dựng đối tượng như bên dưới

/** <div class="separate" data-separate="Already have an account? View more sign in options.
"> */

.separate {
	width: 100%;
	height: 2px;
	background-color: rgba(227, 227, 227);
}

.separate::after {
	content: attr(data-separate);
	padding: 4px;
	background-color: white;
}

Trong phần này, mình đã giới thiệu một vài thủ thuật có thể sẽ giúp bạn giải quyết được vấn đề gặp phải khi làm việc với CSS.

Kết luận

Nếu bạn có biết thêm những thủ thuật nào hay, hãy bình luận bên dưới nha.