Thảo Luận

×Close

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.

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

Ở 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://1.bp.blogspot.com/-QSxupUtUUyc/YNrXXByupMI/AAAAAAAAF7Y/xlTrY19BC2MKARHD_0aPo7v11KPefnQfgCLcBGAsYHQ/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

➥ Nhập địa chỉ Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
➥ Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
➥ Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.

1 nhận xét
Hiển thị
Mới hơn Cũ hơn