Xem bài viết Tạo hiệu ứng chữ drop cap tuyệt đẹp với CSS3

Tạo hiệu ứng chữ drop cap tuyệt đẹp với CSS3

Jul 19, 2012Zend Framework

1. HTML

Phần HTML của mình chỉ đơn giản là một thẻ p với nội dung giới thiệu blog mình. Mình sẽ dùng selector của CSS3 để làm vì thế mình cũng không cần đặt class hay ID gì cho thẻ p này cũng được, nội dung file HTML như sau:

Tạo hiệu ứng chữ drop cap tuyệt đẹp với CSS3 - 2Cwebvn

Chào mừng bạn đến 2CwebVN.! 2CwebVN là blog chuyên về thiết kế và lập trình website. 2CwebVN hy vọng đây sẽ là sân chơi hữu ích cho các bạn yêu thích 2 lĩnh vực này!

2. CSS

Phần CSS này thì mình reset margin và padding mặc định ở mỗi trình duyệt. Sau đó Add thêm font rockston vào thẻ body để dùng cho toàn trang web. Việc add thêm font là nhờ sự trợ giúp của @font-face trong CSS3, đây cũng là một điểm khá hay mà mình rất thích. Và cuối cùng là canh giữa cho nội dung muốn hiện thị nằm trong thẻ div và h2.
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
	margin: 0; padding: 0; border: 0;
}

body {
	font-family: "rockston", Arial,Sans-Serif; color: #fff;
	background: #566074 
}

@font-face {
	font-family: rockston;
	src: url("rockston.ttf") format("truetype");
}

div {
	width: 730px; margin: 20px auto;
}
h2 {
	width: 850px; margin: 70px auto 70px; color:#FFFCF7;
	border-top:1px solid #FFFCF7;
	border-bottom:1px solid #FFFCF7; padding:10px 0px;
}


Và đây là phần định dạng cho thẻ p
p { 
	font-size: 30px; line-height: 50px;
	text-transform: uppercase; 
	text-shadow: 10px 10px 0 rgba(255,255,255,0.07);
}
Bây giờ mới là tới phần chính của bài viết này, mình sẽ dùng selector trong CSS3 để định dạng cho chữ cái đầu tiên của thẻ p như sau:
p:first-child:first-letter {
	font-size: 160px; float: left; margin: 20px 20px 0 0; line-height: 0.8;
}
Tới đây cơ bản thì đã hoàn thành rồi đấy, nhưng mình muốn cho nó đẹp hơn chút nữa bằng thuộc tình text-shadow trong CSS3, mình sẽ điều chỉnh lại đoạn css trên như sau:
p:first-child:first-letter {
	p:first-child:first-letter {
	font-size: 160px; float: left; margin: 0px 20px 0 0; line-height: 0.8;;
	text-shadow: 4px 4px 0 #566074, 7px 7px 0 #fff;
}
text-shadow mình sử dụng 2 lần, lấn đầu thì mình dùng 4px và cho nó màu xanh, trùng với màu của background luôn, lần thứ 2 thì dùng 7px và cho nó là màu trắng.Bây giờ thì mình vào phần demo để xem kết quả nào.

Kết luận

Bạn có thích bài viết này không? Nếu có hãy giúp mình like bài viết này nhé hoặc bạn có thể chia sẽ bài này đến những người mà bạn nghĩ họ quan tâm, xin cảm ơn!

Mọi ý kiến đóng góp hay thắc mắc bạn có thể gởi về cho chúng tôi qua form bình luận phía dưới. Cám ơn bạn đã ghé thăm web mình và xin chúc bạn thành công!

Nguồn: 2Cweb.vn

 

Leave a Comments