Tạo Drop Caps cho bài viết

Drop Caps là kiểu trang trí với chữ hoa lớn ở đầu bài viết thường được dùng trong các trang báo - tạp chí giúp lôi cuốn người đọc hơn. Trên blog chúng ta cũng có thể dùng để cho các bài viết được bắt mắt hơn.

Sau đây là cách thực hiện với vài dòng css đơn giản...

1. CSS:

.dropcap { 
float: left; 
color: #903; 
font-size: 75px; 
line-height: 60px; 
padding-top: 4px; 
padding-right: 8px; 
padding-left: 3px; 
font-family: Georgia; 
}

2. HTML: dùng thẻ <span> để bao ký tự làm drop cap:

<span class="dropcap">L</span> orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.

3. Kết quả:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.