Chào mọi người.
Bài viết này mình sẽ hướng dẫn mọi người tạo Drop Cap chứ cái đầu tiên khi soạn văn bản.
Ở 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>
.hung1 {
float: left;
font-size: 86px;
line-height: 55px;
padding-right: 13px;
padding-bottom: 18px;
padding-top: 8px;
font-weight: bold;
background: url(https://d.hung.pro.vn/img/kytudau.webp) repeat center center, linear-gradient(to right bottom, yellow, #ff7062, red);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 100%;
}
.hung-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="hung1" hoặc class="hung-v2"
Ví dụ 1:
Mọi người có thể xem thêm tại đây
