Thủ thuật blogspot - Dautoblog

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

Tạo một Drop Cap với CSS
Thủ thuật này nhằm tạo chữ cái đầu tiên trong văn bản có kích thước lớn và được trang trí đôi chút với đường viền đơn giản.Định không chia sẻ nhưng nghĩ chẳng giữ làm gì nên post ra đây ai thích thì lấy dùng
Demo là bài viết luôn đó


Để 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;
}
Thủ thuật này là hoàn toàn tự động khi ta viết bài mới.
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ẻ
Comments blogger

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