Bài viết này là tôi sưu tầm các đoạn mã css hay dùng:

• Text shadow cho text: khi màu nền và màu text hơi trùng cần làm cho text nổi bật để người xem có thể đọc được thì chúng ta áp dụng hiệu ứng này

text-shadow: 1px 0 1px rgba(0, 0, 0, 1);

• Arrow down: tạo mũi tên quay xuống

Mã html

Quick Fact 1

Mã css:

.QuickFactsBox-heading::after { position: absolute; text-align: center; -webkit-transform: translateX(-50%); transform: translateX(-50%); left: 50%; bottom: -10px; content: ''; display: inline-block; border-style: solid; border-width: 10px 10px 0 10px; border-color: #ffac36 transparent transparent transparent; }

• Sử dụng border color và border widh để tạo ảnh như hình dưới đây

Mã html:

Mã css:

.ImageTextSplit-image::after { content: ''; display: block; position: absolute; right: 0; bottom: 0; border-style: solid; width: 0; height: 0; border-color: transparent transparent #fff transparent; border-width: 0 0 250px 55px; z-index: 200; }