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ọc display: flex để bật chế độ bố trí flexbox. Các justify-content tài sản được đặt thành center để căn giữa phần tử con theo chiều ngang trong vùng chứa. Các align-items tài sản được đặt thành center để 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ọc display: grid để kích hoạt chế độ bố trí lưới. Các grid-template-columns tài sản được đặt thành repeat(2, 1fr) để tạo hai cột có chiều rộng bằng nhau. Các gap 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ác transition tài sản được đặt thành background-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!
  • Ả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ác animation-fill-mode tài sản được đặt thành forwards để đả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!
  • 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 để đặt background-color thuộc tính của một phần tử nút, bằng cách sử dụng var() 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.pngblue.png, được tải bằng cách sử dụng background-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ác background-position thuộc tính được sử dụng để kiểm soát vị trí của từng hình ảnh. Các background-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;
    }

    Kết quả

    Douglas Karr

    Douglas Karr là CMO của mởINSIGHTS và người sáng lập ra Martech Zone. Douglas đã giúp hàng chục công ty khởi nghiệp MarTech thành công, đã hỗ trợ thẩm định hơn 5 tỷ USD trong các thương vụ mua lại và đầu tư của Martech, đồng thời tiếp tục hỗ trợ các công ty triển khai và tự động hóa các chiến lược tiếp thị và bán hàng của họ. Douglas là một chuyên gia và diễn giả về chuyển đổi kỹ thuật số và MarTech được quốc tế công nhận. Douglas cũng là tác giả đã xuất bản sách hướng dẫn của Dummie và sách lãnh đạo doanh nghiệp.

    Bài viết liên quan

    Back to top
    Đóng

    Đã phát hiện ra khối quảng cáo

    Martech Zone có thể cung cấp cho bạn nội dung này miễn phí vì chúng tôi kiếm tiền từ trang web của mình thông qua doanh thu quảng cáo, liên kết đơn vị liên kết và tài trợ. Chúng tôi sẽ đánh giá cao nếu bạn xóa trình chặn quảng cáo của mình khi bạn xem trang web của chúng tôi.