Tạo một Drop Cap với CSS

Tạo một Drop Cap với CSS

Thủ thuật tạo một Drop Cap nhằm tạo chữ cái đầu tiên trong văn bản trên blogspot có kích thước lớn và được trang trí đôi chút với đường viền đơn giản.
Thủ thuật này là hoàn toàn tự động khi ta viết bài mới.Nhưng với điều kiện dòng văn bản phải ở trước ảnh đầu tiên.Nếu văn bản ở sau ảnh đầu tiên thì có hướng dẫn cụ thể cuối bài này.

DEMO

Để cài đặt thủ thuật này ta cần thêm đoạn CSS sau vào trước thẻ ]]></b:skin> trong template:
.post-body:first-letter {
font-size:300%;
font-weight:bold;
font-family:Georgia,Serif;
float:left;
margin-right:10px;
padding:2px 5px;
border:3px double #777;
background:#ECE9D8;
}

Lưu ý
Thủ thuật này chỉ tự động khi chữ đầu tiên ở trước ảnh đại diện của bài viết nhưng thường ta hay post ảnh trước sau đó mới tới chữ nên thủ thuật này không làm việc.Vì vậy trường hợp chữ bắt đầu sau ảnh thì ta phải dùng mẫu sau:
Bên HTML ta dùng code sau
<div class='post-body'>Nội dung văn bản</div>
Chỉ cần 1 chữ đầu tiên nằm trong mẫu trên là được.
Chúc vui vẻ
Nhận xét

Không có nhận xét nào :