Home
blogger

Drop Cap chữ cái đầu tiên của bài viết

drop cap, drop cap css, drop cap chữ cái đầu tiên, viết chữ đầu tiên to, code drop cap, tạo drop cap, tạo drop cap trong bài viết, viết chữ hoa to

Drop Cap chữ cái đầu tiên của bài viết

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.

Drop Cap chữ cái đầu tiên của bài viết
Drop Cap chữ cái đầu tiên của bài viết

Ở bài viết này mình sẽ chia sẻ cho các bạn 2 mẫu Drop Cap mà mình hay sử dụng nhất. Hy vọng là các bạn cũng thích nó!

Hướng dẫn

Source code

  • Copy embedded code dưới đây:

<link rel="stylesheet" href="https://cdn.leanhduc.pro.vn/utilities/drop-cap-ver-1.0/style.css"/>
<link rel="stylesheet" href="https://cdn.leanhduc.pro.vn/utilities/drop-cap-ver-2.0/style.css"/>
  • Dán embedded code đã copy phía trên vào trước thẻ đóng </head> hoặc </body>
  • Lưu lại

Cách sử dụng

Để đử 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à toàn bộ code và hướng dẫn sử dụng Drop Cap trong bài viết. Nếu có bất cứ thắc mắc hay khiếu nại về bản quyền hãy comment ngay phía dưới cho mình biết nhé. Chúc các bạn thành công và có một ngày làm việc thật hiệu quả!

Copyright © Code Pro
Sống hết mình !