Top 6 đoạn code tạo khung text mẫu HTML CSS đẹp

Top 6 đoạn code tạo khung text mẫu HTML CSS đẹp

Bài viết này sẽ hướng dẫn bạn về 6 đoạn mã HTML và CSS để tạo ra các khung văn bản đẹp mắt trên trang web của bạn. Chúng giúp tạo ra hiệu ứng thú vị và tạo điểm nhấn cho nội dung của bạn. Bạn không cần phải là một chuyên gia về lập trình để sử dụng chúng, chỉ cần sao chép và dán mã vào trang web của bạn.

Top 6 đoạn code tạo khung text mẫu HTML CSS đẹp

Dưới đây là một số đoạn code tạo khung text mẫu HTML CSS đẹp:

Khung text đơn giản

Đoạn code sau sẽ tạo ra một khung text đơn giản với đường viền màu đen, dày 1px:

HTML
<div class="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac ultricies magna.</p>
</div>
.box {
  border: 1px solid black;
  padding: 10px;
}

Đoạn code sau sẽ tạo ra một khung text có góc bo tròn với đường viền màu đen, dày 1px:

HTML
<div class="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac ultricies magna.</p>
</div>
.box {
  border-radius: 5px;
  border: 1px solid black;
  padding: 10px;
}

Đoạn code sau sẽ tạo ra một khung text có màu nền màu xanh nhạt, đường viền màu đen, dày 1px:

HTML
<div class="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac ultricies magna.</p>
</div>
.box {
  background-color: #f0f8ff;
  border: 1px solid black;
  padding: 10px;
}

Đoạn code sau sẽ tạo ra một khung text có chiều rộng và chiều cao cố định là 200px và 100px, đường viền màu đen, dày 1px:

HTML
<div class="box" style="width: 200px; height: 100px;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac ultricies magna.</p>
</div>
.box {
  border: 1px solid black;
  padding: 10px;
}

Đoạn code sau sẽ tạo ra một khung text có vị trí cố định là ở giữa màn hình, đường viền màu đen, dày 1px:

HTML
<div class="box" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac ultricies magna.</p>
</div>
.box {
  border: 1px solid black;
  padding: 10px;
}

Đoạn code sau sẽ tạo ra một khung text có hiệu ứng chuyển động khi di chuột, đường viền màu đen, dày 1px:

HTML
<div class="box" style="transition: all 0.5s;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac ultricies magna.</p>
</div>
.box {
  border: 1px solid black;
  padding: 10px;
}

.box:hover {
  background-color: #ffffff;
}

Câu hỏi thường gặp (FAQs)

  1. Làm cách nào để thêm màu sắc khác vào các khung văn bản này?
    • Bạn có thể thay đổi giá trị background-color trong mã CSS để thay đổi màu nền.
  2. Tôi có thể thay đổi kích thước của các khung văn bản này không?
    • Đúng vậy, bạn có thể sử dụng thuộc tính widthheight trong CSS để điều chỉnh kích thước của chúng.
  3. Làm thế nào để tạo một khung văn bản với nhiều hiệu ứng cùng lúc?
    • Bạn có thể kết hợp các lớp CSS khác nhau trên cùng một phần tử HTML để kết hợp nhiều hiệu ứng lại với nhau.
  4. Có cách nào để làm cho khung văn bản thay đổi màu khi người dùng di chuyển chuột qua nó không?
    • Bạn có thể sử dụng CSS :hover để định rõ các hiệu ứng khi người dùng di chuột qua khung văn bản.
  5. Tôi cần thêm các hình ảnh vào khung văn bản. Làm cách nào để làm điều đó?
    • Bạn có thể thêm các thẻ <img> vào bên trong các khung văn bản để hiển thị hình ảnh.