Trong những năm gần đây, CSS đã phát triển đáng kể. Các phiên bản mới nhất của CSS, chẳng hạn như CSS3 và CSS4, cung cấp nhiều tính năng và khả năng mới giúp bạn có thể tạo ra các trang web đẹp và hiện đại hơn. Trong bài viết này, Boomco sẽ giới thiệu cho bạn những hiệu ứng CSS đơn giản và dễ áp dụng trong nhiều trang web.

CSS là gì?

Trước tiên, chúng ta cần hiểu những thông tin cơ bản về CSS. CSS, viết tắt của Cascading Style Sheets, là một ngôn ngữ định kiểu dùng để định dạng các tài liệu viết bằng HTML và XHTML. Ngôn ngữ cho phép bạn kiểm soát cách văn bản, hình ảnh và các thành phần khác trên trang web của bạn xuất hiện.

CSS là một phần quan trọng của thiết kế web. Nó cho phép bạn tạo các trang web hấp dẫn và dễ sử dụng. Một số điểm chính của CSS:

• Phân Tách Nội Dung và Trình Bày: CSS giúp phân tách nội dung (HTML) và cách trình bày của nó. Điều này làm cho việc quản lý và bảo trì trang web trở nên dễ dàng hơn.
• Kiểm Soát Bố Cục: CSS cho phép bạn kiểm soát bố cục của nhiều trang web cùng một lúc.
• Tùy Biến Giao Diện: CSS cho phép tùy chỉnh màu sắc, font chữ, khoảng cách giữa các phần tử, và nhiều thuộc tính khác của một trang web.
• Đáp Ứng và Linh Hoạt: CSS hỗ trợ tạo ra các trang web đáp ứng, tức là có thể thích ứng với kích thước màn hình và độ phân giải khác nhau.
• Tiết Kiệm Thời Gian: Khi sử dụng CSS, các thay đổi về thiết kế có thể áp dụng nhanh chóng và đồng bộ trên nhiều trang chỉ bằng cách chỉnh sửa một tập tin CSS.
• Tương Thích Trên Nhiều Trình Duyệt: CSS giúp đảm bảo rằng trang web hiển thị đúng cách trên các trình duyệt web khác nhau.

Hiệu ứng CSS phổ biến

Có nhiều hiệu ứng CSS đơn giản mà bạn có thể thêm vào trang web của mình để làm cho nó trở nên sống động và thú vị hơn. Dưới đây là một số hiệu ứng phổ biến:

• Hover Effects: Thay đổi màu sắc, kích thước, hoặc nền của một phần tử khi người dùng di chuột qua nó.
• Transition Effects: Tạo hiệu ứng chuyển đổi mượt mà cho các thuộc tính như màu sắc, kích thước, vị trí, và nhiều hơn nữa.
• Text Effects: Thay đổi kiểu chữ, ví dụ như bóng chữ hoặc chữ nổi.
• Box Shadows: Thêm bóng vào các khối (boxes), tạo cảm giác độ sâu.
• Transforms: Quay, co giãn, hoặc di chuyển các phần tử.
• Animations: Tạo các hoạt ảnh động phức tạp bằng cách sử dụng @keyframes.
• Opacity Effects: Thay đổi độ trong suốt của phần tử.
• Border Effects: Tạo các kiểu viền độc đáo, như viền tròn hoặc viền đứt.
• Gradients: Tạo nền từ các màu sắc chảy vào nhau.

Những hiệu ứng này có thể kết hợp với nhau để tạo ra các trải nghiệm người dùng phong phú và hấp dẫn. Điều quan trọng là phải sử dụng chúng một cách cân nhắc để không làm giảm tốc độ tải trang hoặc làm cho giao diện trở nên rối rắm.

Ví dụ các hiệu ứng đơn giản trong CSS

*Hiệu ứng Bounce:

<style>
  img {
    width: 200px;
  }
.boomco {
    display: flex;
    justify-content: center;
  animation: boomcoBounce 1s ease-in-out infinite;

}
.cover {
background-color: #D2E0FB;
padding-top: 100px;
padding-bottom: 120px;
}
.wrap {
   position: relative;
   margin: -60px;
}
 .shadow {
      width: 196px;
      height: 20px;
      border-radius: 50%;
      position: absolute;
      top: 270px;
      left: 340px;
      background-color: rgba(0, 0, 0, 0.3);
      animation: shadowGrow 1s ease-in-out infinite;
   }
@keyframes boomcoBounce {
   0%, 100% {
     transform: translateY(0);
   }
   50% {
     transform: translateY(-25px);
   }
 }
@keyframes shadowGrow {
   0%, 100% {
      transform: scale(1.1);
      filter: blur(9px);
      background-color: rgba(0, 0, 0, 0.3);
   }
   50% {
      transform: scale(1);
      filter: blur(12px);
      background-color: rgba(0, 0, 0, 0.2);
   }
 }
</style>
        <div class="cover">
            <div class="wrap">
                <div class="boomco">
                    <img src="https://blog.boomco.org/wp-content/uploads/2023/12/Artboard-2.png" />
                </div>
                <div class="shadow"></div>
            </div>
        </div>

*Hiệu ứng Block Reveal:

Welcome to

Boomco Labs

<h1 class="block-effect" style="--td: .6s">
  <div class="block-reveal text" style="--bc: #293CB7; --d: .1s">Welcome to</div>
  <div class="block-reveal" style="--bc: #D9292B; --d: .5s">Boomco Labs</div>
</h1>

<style>
/* reset */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;

  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 20px;

  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}



/* block-$ */
.block-effect {
  font-size: calc(8px + 6vw);
}

.block-reveal {
  --t: calc(var(--td) + var(--d));

  color: transparent;
  padding: 4px;

  position: relative;
  overflow: hidden;

  animation: revealBlock 0s var(--t) forwards, infinite;
}

.block-reveal::after {
  content: '';

  width: 0%;
  height: 100%;
  padding-bottom: 4px;

  position: absolute;
  top: 0;
  left: 0;

  background: var(--bc);
  animation: revealingIn var(--td) var(--d) forwards, revealingOut var(--td) var(--t) forwards infinite;
}
.text {
  font-size: 80px;
  font-weight: 200;
  line-height: 80px;
}

/* animations */
@keyframes revealBlock {
  100% {
    color: #0f0f0f;
  }
}

@keyframes revealingIn {

  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

@keyframes revealingOut {

  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(100%);
  }

}

</style>

Kết luận

CSS là một ngôn ngữ định kiểu mạnh mẽ và linh hoạt có thể được sử dụng để tạo ra các trang web hấp dẫn và dễ sử dụng. Với sự phát triển của CSS, các nhà thiết kế web ngày nay có nhiều khả năng hơn để tạo ra các trang web đẹp và hiện đại hơn.

Hãy theo dõi Boomco Blog để cập nhật các xu hướng CSS mới nhất nhé! Ngoài ra bạn có thể tìm hiểu thêm về hiệu ứng Button CSS để có thêm những kiến thức thú vị!

Tham gia khóa học tại Boomco Academy để có thể làm chủ các kĩ năng lập trình và mở rộng cơ hội việc làm trong tương lai.