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