Tạo Drop Cap chữ cái đầu tiên của bài viết bằng CSS

Drop Cap là thuật ngữ chỉ việc tạo chữ đầu tiên của đoạn văn lớn hơn bình thường và lấn xuống một vài dòng trong đoạn văn. Nếu bạn thường xuyên đọc sách báo thì bạn sẽ thấy rất nhiều Drop Cap này. Hôm nay mình xin hướng dẫn các bạn đưa hiệu ứng Drop Cap phổ biến này vào mỗi bài viết bằng cách sử dụng CSS đơn giản.

Ở bài viết này sẽ chia sẻ đến các bạn 2 mẫu Drop Cap. Tùy chỉnh cũng khá đơn giản thôi, các bạn cùng xem chi tiết hướng dẫn dưới đây:

Hướng dẫn cài đặt Drop Cap

Bước 1: Cài đặt CSS

Chèn đoạn CSS dưới đây vào trước thẻ ]]></b:skin>

.codepro-first-character {
    float: left;
    font-size: 86px;
    line-height: 55px;
    padding-right: 13px;
    padding-bottom: 18px;
    padding-top: 8px;
    font-weight: bold;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3BD4Wua-dTI_k_p9bCnOShAKDLtEjZIe3olaGs0l0oHibWm6fh3BthxkGFlhsv9y2Ug5m_lGPKNwVsiOYb-Z-Dlkx0S5ULJSEm7qZVgQKfec0uzZOzynZLcMF7zhj1sJ33Ra4kh1A5A4X/s0/flower.webp) repeat center center, linear-gradient(to right bottom, yellow, #ff7062, red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 100%;
}
.codepro-first-character-v2 {
    float: left;
    margin: 4px 8px 0 0;
    font-size: 75px;
    line-height: 45px;
}

Bước 2: Sử dụng trong bài viết

Để sử dụng Drop Cap các bạn gọi đến class="codepro-first-character" hoặc class="codepro-first-character-v2"

Ví dụ 1:

Hướng dẫn sử dụng drop cap, hướng dẫn sử dụng drop cap, hướng dẫn sử dụng drop cap, hướng dẫn sử dụng drop cap, hướng dẫn sử dụng drop cap, hướng dẫn sử dụng drop cap, hướng dẫn sử dụng drop cap, hướng dẫn sử dụng drop cap, hướng dẫn sử dụng drop cap, hướng dẫn sử dụng drop cap, hướng dẫn sử dụng drop cap, hướng dẫn sử dụng drop cap, hướng dẫn sử dụng drop cap.

<div><span class="codepro-first-character">H</span>ướng dẫn sử dụng drop cap.</div>

Ví dụ 2:

Hướng dẫn sử dụng drop cap, hướng dẫn sử dụng drop cap, hướng dẫn sử dụng drop cap, hướng dẫn sử dụng drop cap, hướng dẫn sử dụng drop cap, hướng dẫn sử dụng drop cap, hướng dẫn sử dụng drop cap, hướng dẫn sử dụng drop cap, hướng dẫn sử dụng drop cap, hướng dẫn sử dụng drop cap, hướng dẫn sử dụng drop cap, hướng dẫn sử dụng drop cap, hướng dẫn sử dụng drop cap.

<div><span class="codepro-first-character-v2">H</span>ướng dẫn sử dụng drop cap.</div>

Lời kết

Trên đây là hướng dẫn tạo Drop Cap chữ cái đầu tiên của bài viết bằng CSS. Bài viết được tham khảo và trích code từ code.pro.vn.

Xem bài viết gốc: https://www.code.pro.vn/2021/06/drop-cap-chu-cai-dau-tien-cua-bai-viet.html