Hướng dẫn 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.
Drop Cap 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/AVvXsEiZKIhWAU6MSu_OI5PMWitX9mf2d0dhPgJdVLq8ltms5W_rdMRTjh9G9KKrLfAI-o8SxU4ZSv9ywbrZOqdIPLjGzLgEFhd5nmxgcTneXxAu5OHmuvy0Ihr3H5ixpg2WNtU6kO0JNWcY41ce/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.
Post a Comment