Tạo D-rop-caps thật đơn giản bằng CSS3

D-rop-caps, như bạn đã biết, là việc tạo chữ cái lớn đầu đoạn văn. Trong thiết kế web, nó đơn giản chỉ là phóng to kích thước của kí tự đầu tiên của đoạn văn và làm nổi nó ở phía bên trái. Khá đơn giản.

Bước 1: HTML

Bắt đầu bằng việc tạo đoạn văn mà bạn cần hiển thị.

Bước 2: Tạo D-rop-caps

Tạo d-rop-caps thông qua đoạn mã CSS dưới đây:

1. body {
2.     font: 15px/1.5 arial, helvetica, sans-serif;
3. }
4. p:first-letter {
5.     float: left;
6.     font-size: 45px;
7.     line-height: 1;
8.     font-weight: bold;
9.     margin-right: 9px;
10. }

Ngoài ra, chúng ta còn có thể trực tiếp thay thế kí tự đầu tiên bằng hình ảnh:

1. body {
2.     font: 15px/2 arial, helvetica, sans-serif;
3. }
4. p:first-letter {
5.     width: 40px;
6.     height: 50px;
7.     float: left;
8.     display: block;
9.     text-indent: -999em;
10.     background: url(images/o.gif);
11.     margin: 0 8px 8px 0;
12. }

Chỉ áp dụng với đoạn đầu tiên

Đoạn code trên sẽ là vấn đề khi bạn chỉ muốn tạo d-rop-caps cho kí tự đầu tiên của đoạn đầu tiên. Để làm điều này, bạn sẽ cần thay đổi một chút. Bạn có thể đặt class hoặc id để xác định đoạn đầu tiên, tuy nhiên, sẽ dễ dàng và linh hoạt hơn khi bạn sử dụng :first-of-type, đoạn code sẽ được áp dụng chỉ cho đoạn văn bản đầu tiên.

1. body {
2.     font: 15px/1.5 arial, helvetica, sans-serif;
3. }
4.  
5. p:first-of-type:first-letter {
6.     float: left;
7.     font-size: 45px;
8.     line-height: 1;
9.     font-weight: bold;
10.     margin-right: 9px;
11. }

Ok. Vậy là đã hoàn thành rồi. Thật đơn giản và dễ dàng phải không? Bạn có thể xem qua bài viết Tạo hiệu ứng lật ảnh cho liên kết dạng ảnh bằng CSS3 để biết cách làm cho website của mình trở nên thu hút hơn nữa bằng việc sử dụng hiệu ứng cho liên kết bằng hình ảnh.