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

Anh Trai Nắng
1
Nếu bạn đang sử dụng Blogger, bạn có thể thêm mã CSS trực tiếp vào mẫu của blog hoặc sử dụng phần tùy chỉnh CSS trong Chỉnh sửa HTML.

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 Blogger 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
Drop Cap CSS for Blogger.

Ở 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>

.atn-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/AVvXsEg9zRyRi0WgrGWQgH0xwaJwd0vgvEjfutOvEFdZu_YQPnCN1RXWqq1C6ad42EhnH1Ia7oyw0x4ysSRebsnW_ZHMjasUTalrXH5y3ta6qVg936KL7OUvI-diebcXdvtW3crm9f25fyLTdQ5R/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%;
}
.atn-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="atn-first-character" hoặc class="atn-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="atn-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="atn-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. Hy vọng sẽ giúp ích cho các bạn trong quá trình viết bài.

Đăng nhận xét

HƯỚNG DẪN BÌNH LUẬN

1 Nhận xét

Đăng nhận xét

#buttons=(Thanks!) #days=(7)

À mình có làm website tăng tương tác MXH giá rẻ. Mọi người nếu cần thì ghé sử dụng các dịch vụ thử nha. Ghé xem dịch vụ
Ok, Go it!

HƯỚNG DẪN BÌNH LUẬN

Chèn link

Sử dụng công cụ Tạo link

Chèn hình ảnh

LINK_ANH - sử dụng công cụ upload ảnh. Và chỉ cần lấy link ảnh chèn vào bình luận là ảnh tự động hiển thị.

Định dạng chữ

<b>Chữ in đậm</b>
<i>Chữ in nghiêng</i>
<u>Chữ gạch chân</u>
<strike>Chữ gạch ngang</strike>

Chèn một đoạn Code

Đầu tiên sử dụng công cụ này để mã hóa đoạn code muốn chèn.
Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code]

Khác

Nhập 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.
Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

Đã hiểu