CSS có rất nhiều thứ hay ho mà bạn khó có thể biết được nếu không đi làm thực tế. Đây là 10 TIP CSS hữu ích sẽ giúp ích cho bạn rất nhiều trong các dự án.
TIP CSS #1. Cuộn mượt mà hơn
Để gia tăng trải nghiệm cuộn mượt mà hơn cho trang web, bạn chỉ cần sử dụng một dòng CSS.
html {
scroll-behavior: smooth;
}
Ví dụ:
TIP CSS #2: Thay đổi kích thước <textarea>
Bạn có thể sử dụng thuộc tính resize để cho phép thay đổi kích thước <textarea> theo từng trục X, Y hoặc ngăn thay đổi kích thước.
/* Chỉ cho phép thay đổi kích thước theo chiều ngang */
textarea.horizontal-resize {
resize: horizontal;
}
/* Chỉ cho phép thay đổi kích thước theo chiều dọc */
textarea.vertical-resize {
resize: vertical;
}
/* Ngăn thay đổi kích thước */
textarea.no-resize {
resize: none;
}
Ví dụ:
TIP CSS #3: Viết HOA chữ cái đầu dòng
Bạn có thể viết HOA chữ cái đầu dòng bằng cách sử dụng phần tử giả ::first-letter
::first-letter {
font-size: 250%;
}
Ví dụ:
TIP CSS #4: Sử dụng drop-shadow()
Sử dụng drop-shadow() thay vì thuộc tính box-shadow để tạo hiệu ứng đổ bóng đẹp hơn
Ví dụ:
TIP CSS #5: Căn giữa mọi <div>
Đôi khi khá khó để căn giữa một phần tử div trên trang, nhưng với mẹo này thì không. Bạn có thể căn giữa bất kỳ phần tử div nào trên trang bằng cách sử dụng một vài dòng code CSS:
body {
display: grid;
place-items: center;
}
Ví dụ:
TIP CSS #6: Đổi màu con trỏ input
Bạn có thể sử dụng thuộc tính caret-color để thay đổi màu của con trỏ trong trường input.
input {
caret-color: red;
}
Ví dụ:
TIP CSS #7: Chặn higlight văn bản
TIP này tương tự như TIP #2, nhưng bạn có thể sử dụng thuộc tính user-select để ngăn người dùng highlight văn bản.
TIP này thường được sử dụng để hạn chế người dùng copy nội dung trên website.
.no-highlight {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
Ví dụ:
TIP CSS #8: Intput Range
Trong tình huống bạn muốn tạo một input mà:
-
Thiết lập khoảng giá trị cho phép
-
Người dùng nhập giá trị trong khoảng hợp lệ (hoặc không hợp lệ) thì thay đổi
border và background tương ứng
Để làm được điều này, bạn có thể nhanh chóng sử dụng thuộc tính min, max để thiết lập khoảng giá trị.
Và sử dụng pesudo class :in-range hoặc :out-of-range để nhanh chóng thay đổi CSS cho thẻ input đó.
Ví dụ:
TIP CSS #9: Thuộc tính object-fit
Bạn có thể sử dụng thuộc tính object-fit để chỉ định cách thay đổi kích thước một hình ảnh hoặc video để vừa với vùng chứa của nó.
-
fill - Mặc định. Hình ảnh được thay đổi kích thước để lấp đầy kích thước đã cho. Nếu cần, hình ảnh sẽ được kéo căng hoặc thu nhỏ để vừa với vùng chứa
-
contain - Hình ảnh giữ nguyên tỷ lệ co, nhưng được thay đổi kích thước để vừa với kích thước đã cho
-
cover - Hình ảnh giữ nguyên tỷ lệ co và lấp đầy kích thước đã cho. Hình ảnh sẽ được cắt bớt để vừa với vùng chứa
-
none - Hình ảnh không được thay đổi kích thước
-
scale-down - Hình ảnh được thu nhỏ xuống phiên bản nhỏ nhất none hoặc contain
Ví dụ:
TIP CSS #10: Thuộc tính transition
Có thể bạn đã biết về transition rồi, nhưng mình nghĩ vẫn cần nhắc lại, tận dụng nó có thể mang lại hiệu quả rất tốt, cả về mặt hiệu ứng và hiệu năng.
Các thư viện hiệu ứng chuyển động hiện đại như Material sử dụng transition rất nhiều.
transition có các thuộc tính:
-
transition: Một thuộc tính viết tắt để thiết lập bốn thuộc tính chuyển tiếp thành một thuộc tính duy nhất
-
transition-delay: Chỉ định độ trễ (tính bằng giây) cho hiệu ứng chuyển tiếp
-
transition-duration: Chỉ định bao nhiêu giây hoặc mili giây để hoàn thành một hiệu ứng chuyển tiếp
-
transition-property: Chỉ định tên của thuộc tính CSS mà hiệu ứng chuyển tiếp dành cho
-
transition-timing-function: Chỉ định đường cong tốc độ của hiệu ứng chuyển tiếp
Trong thuộc tính transition-timing-function chúng ta có thể thiết lập các giá trị khác nhau:
-
ease - chỉ định hiệu ứng chuyển tiếp với bắt đầu chậm, sau đó nhanh, sau đó kết thúc chậm (đây là mặc định)
-
linear - chỉ định hiệu ứng chuyển tiếp có cùng tốc độ từ đầu đến cuối
-
ease-in - chỉ định hiệu ứng chuyển tiếp khởi động chậm
-
ease-out - chỉ định hiệu ứng chuyển tiếp kết thúc chậm
-
ease-in-out - chỉ định hiệu ứng chuyển tiếp với phần bắt đầu và kết thúc chậm
-
cubic-bezier(n, n, n, n) - cho phép bạn xác định các giá trị của riêng mình trong một hàm bậc ba
Ví dụ:
Tổng kết
Như vậy, trên đây là một số 10 TIP CSS hữu ích có thể bạn chưa biết, hi vọng chúng giúp ích cho dự án của bạn.
> Chờ chút: Nếu bạn đang tự học Front end và muốn đi làm nhanh về lĩnh vực này thì hãy tham gia ngay KHÓA HỌC FRONT END chuyên nghiệp với React.js. Đào tạo từ số 0 cho người mới bắt đầu. Hỗ trợ giới thiệu thực tập / Việc làm sau khóa học.
---
HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI
Học Lập trình chất lượng cao (Since 2002). Học thực tế + Tuyển dụng ngay!
Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT: 02435574074 - 0383.180086
Email: hello@niithanoi.edu.vn
Fanpage: https://facebook.com/NIIT.ICT/
#niit #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python