Nội dung tiếp thị
Các tính năng CSS3 mà bạn có thể không biết: Flexbox, Grid Layouts, Custom Properties, Transitions, Animations và Multiple Backgrounds
Cascading Style Sheets (CSS) tiếp tục phát triển và các phiên bản mới nhất có thể có một số tính năng mà bạn thậm chí có thể không biết. Dưới đây là một số cải tiến và phương pháp chính được giới thiệu với CSS3, cùng với các ví dụ về mã:
- Bố cục hộp linh hoạt (Flexbox): một chế độ bố cục cho phép bạn tạo các bố cục linh hoạt và đáp ứng cho các trang web. Với flexbox, bạn có thể dễ dàng căn chỉnh và phân phối các phần tử trong một vùng chứa. n ví dụ này, các
.container
sử dụng lớp họcdisplay: flex
để bật chế độ bố trí flexbox. Cácjustify-content
tài sản được đặt thànhcenter
để căn giữa phần tử con theo chiều ngang trong vùng chứa. Cácalign-items
tài sản được đặt thànhcenter
để căn giữa theo chiều dọc của phần tử con. Các.item
lớp đặt màu nền và phần đệm cho phần tử con.
HTML
<div class="container">
<div class="item">Centered Element</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.item {
background-color: #ddd;
padding: 20px;
}
Kết quả
Yếu tố trung tâm
- Bố trí lưới: một chế độ bố cục khác cho phép bạn tạo bố cục dựa trên lưới phức tạp cho các trang web. Với lưới, bạn có thể chỉ định các hàng và cột, sau đó đặt các thành phần bên trong các ô cụ thể của lưới. Trong ví dụ này, các
.grid-container
sử dụng lớp họcdisplay: grid
để kích hoạt chế độ bố trí lưới. Cácgrid-template-columns
tài sản được đặt thànhrepeat(2, 1fr)
để tạo hai cột có chiều rộng bằng nhau. Cácgap
thuộc tính đặt khoảng cách giữa các ô lưới. Các.grid-item
lớp đặt màu nền và phần đệm cho các mục lưới.
HTML
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.grid-item {
background-color: #ddd;
padding: 20px;
}
Kết quả
Mục 1
Mục 2
Mục 3
Mục 4
- Chuyển tiếp: CSS3 đã giới thiệu một số thuộc tính và kỹ thuật mới để tạo hiệu ứng chuyển tiếp trên các trang web. Ví dụ, các
transition
có thể được sử dụng để tạo hiệu ứng thay đổi trong thuộc tính CSS theo thời gian. Trong ví dụ này, các.box
class đặt chiều rộng, chiều cao và màu nền ban đầu cho phần tử. Cáctransition
tài sản được đặt thànhbackground-color 0.5s ease
để tạo hiệu ứng các thay đổi đối với thuộc tính màu nền trong hơn nửa giây với chức năng hẹn giờ dễ dàng ra vào. Các.box:hover
lớp thay đổi màu nền của phần tử khi con trỏ chuột di chuyển qua phần tử đó, kích hoạt hoạt ảnh chuyển tiếp.
HTML
<div class="box"></div>
CSS
.box {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 0.5s ease;
}
.box:hover {
background-color: blue;
}
Kết quả
Bay lượn
Ở đây!
Ở đây!
- Ảnh động: CSS3 đã giới thiệu một số thuộc tính và kỹ thuật mới để tạo hoạt ảnh trên các trang web. Trong ví dụ này, chúng tôi đã thêm hoạt ảnh bằng cách sử dụng
animation
tài sản. Chúng tôi đã xác định một@keyframes
quy tắc cho hoạt ảnh, quy định rằng hộp sẽ xoay từ 0 độ đến 90 độ trong khoảng thời gian 0.5 giây. Khi hộp được di chuột qua,spin
hoạt hình được áp dụng để xoay hộp. Cácanimation-fill-mode
tài sản được đặt thànhforwards
để đảm bảo rằng trạng thái cuối cùng của hoạt ảnh được giữ lại sau khi kết thúc.
HTML
<div class="rotate"></div>
CSS
.rotate {
width: 100px;
height: 100px;
background-color: red;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
/* Add animation properties */
animation-duration: 0.5s;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
/* Define the animation */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(90deg); }
}
.rotate:hover {
animation-name: spin;
}
Kết quả
Bay lượn
Ở đây!
Ở đây!
- Thuộc tính tùy chỉnh CSS: Còn được biết là Các biến CSS, thuộc tính tùy chỉnh đã được giới thiệu trong CSS3. Chúng cho phép bạn xác định và sử dụng các thuộc tính tùy chỉnh của riêng mình trong CSS, thuộc tính này có thể được dùng để lưu trữ và sử dụng lại các giá trị trong biểu định kiểu của bạn. Các biến CSS được xác định bằng tên bắt đầu bằng hai dấu gạch ngang, chẳng hạn như
--my-variable
. Trong ví dụ này, chúng tôi định nghĩa một biến CSS có tên là –primary-color và đặt cho nó một giá trị là#007bff
, là màu xanh lam thường được sử dụng làm màu cơ bản trong nhiều thiết kế. Chúng tôi đã sử dụng biến này để đặtbackground-color
thuộc tính của một phần tử nút, bằng cách sử dụngvar()
chức năng và chuyển vào tên biến. Điều này sẽ sử dụng giá trị của biến làm màu nền cho nút.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Nhiều hình nền: CSS3 cho phép bạn chỉ định nhiều hình nền cho một phần tử, với khả năng kiểm soát vị trí và thứ tự xếp chồng của nó. Nền bao gồm hai hình ảnh,
red.png
vàblue.png
, được tải bằng cách sử dụngbackground-image
tài sản. Hình ảnh đầu tiên,red.png
, nằm ở góc dưới cùng bên phải của phần tử, trong khi hình ảnh thứ hai,blue.png
, được định vị ở góc trên cùng bên trái của phần tử. Cácbackground-position
thuộc tính được sử dụng để kiểm soát vị trí của từng hình ảnh. Cácbackground-repeat
thuộc tính được sử dụng để kiểm soát cách hình ảnh lặp lại. Hình ảnh đầu tiên,red.png
, được đặt thành không lặp lại (no-repeat
), trong khi hình ảnh thứ hai,blue.png
, được thiết lập để lặp lại (repeat
).
HTML
<div id="multibackground"></div>
CSS
#multibackground {
background-image: url(red.png), url(blue.png);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
height: 200px;
width: 200px;
}