Tạo Drop Cap một cách dễ dàng
11/04/2009 // 17 phản hồi // Xem: 702 lượt // Chuyên mục: Góc Blogmaster, Thiết kế web // Thẻ: css.Drop Cap hiểu nôm na là chữ cái đầu tiên của đoạn đầu tiên của một văn bản. Có thể các bạn không để ý những Drop Cap là một rất đơn giản nhưng hiệu quả để tạo ấn tượng cho website của bạn (Hutek cũng suýt nữa quên mất điều này 
).
Hôm nay tình cờ tìm được bài hướng dẫn nên viết luôn để các bạn tham khảo và áp dụng cho website, blog của mình. Thao tác thì cực kỳ đơn giản.
Các bạn chỉ cần thêm đoạn code sau vào file css của blog hoặc website.
.entry p:first-child:first-letter{float:left; margin-top:3px;font-size:2.3em;padding:5px;background:#000;color:#fff;margin-right:4px;font-weight:bold; font-family:Georgia, "Times New Roman", Times, serif;}
Giải thích qua một chút:
.entry /*là class mà bạn muốn áp dụng hiệu ứng drop cap*/
p:first-child:first-letter /*có nghĩa là sẽ lọc ra chữ cái đầu tiên của đoạn đầu tiên của văn bản để áp dụng css*/
{float:left; margin-top:3px;font-size:2.3em;padding:5px;background:#000;color:#fff;margin-right:4px;font-weight:bold; font-family:Georgia, "Times New Roman", Times, serif;} /*là những thuộc tính CSS mà bạn muốn áp dụng cho Drop Cap, các bạn có thể thay đổi những thông số này cho phù hợp với blog của mình*/
Hiệu ứng này hoạt động tốt trên FF, Safari, Opera, IE7+ còn trên IE 6 thì vẫn … chết như thường lệ
Demo: Các bạn có thể xem ngay tại bài viết này
Theo pixelspread.com
Phản hồi (17) / Gửi một phản hồi
PingBack/TrackBack
Gửi phản hồi
Chúc ...
.-= Tinh´s last ...
tip4pc
08/05/2009
Hay đấy, thanks bác
Blogmaster
08/05/2009
Lâu rồi mới thấy bác ghé thăm tệ xá, dạo này bác thế nào
tip4pc
08/05/2009
Vẫn ra ra vào vào thôi, có điều cũng ít comment ấy mà
Blogmaster
08/05/2009
Thế thì cũng hơi buồn nhỉ, phải trao đổi nhiều mới thích chứ, em thấy trên blog bác lúc nào cũng có khoảng 10 khách cơ mà.
tip4pc
09/05/2009
Mình theo đa số thôi, thường đi thăm thú các blog kiếm thông tin chứ ít khi trả lời, thường là vì không biết nên im
With This Diet I Was Able to Lose Thirty Póunds in Under a Month
06/05/2009
Hi, cool post. I have been wondering about this issue,so thanks for blogging. I’ll probably be coming back to your blog. Keep up great writing
Blogmaster
06/05/2009
Thanks, i’m very glad when you like my blog
storyteller Nguyễn
12/04/2009
Trong theme thì dán mấy cái đó vào đâu bác nhỉ. Mà bác cũng hay, mấy hôm để ý mới thấy, khung comment của Ammin thì khác so với những cái khác.
Blogmaster
12/04/2009
Hihi, dán nó vào file style.css ấy, chỗ nào cũng được.
Cái khung comment giờ mới để ý à, có lâu rồi mà.
Phải như vậy cho nó nổi bật chứ
storyteller Nguyễn
12/04/2009
Thank very much, chắc em cũng phải test thử cái theme bác lại thôi. Thấy bác dùng cũng hay, nhưng mà em dùng free host, up hình lên host chắc nó baned nick luôn.
Blogmaster
12/04/2009
Nếu thử để sau 15/4 đi, anh cho ra bản update còn hay hơn bản bây giờ.
Anh nghĩ về host chắc không sao đâu, cấm up ảnh thì còn gì là host nữa
storyteller Nguyễn
12/04/2009
Đã test thử Dropcap, thành công trên tất cả các theme, cám ơn bác nhiều.
Tinh
11/04/2009
Hay đó, sau khi chuyển host sẽ áp dụng ngay. Cám ơn bác Hưng nhé
Blogmaster
11/04/2009
Có gì đâu bác, mà bác chuyển nhà à, chắc cũng hơi vất nhỉ, cẩn thận kẻo hỏng đồ đạc nhé!
storyteller Nguyễn
12/04/2009
Bác Tinh cũng nên làm đi, rất dễ, không gây hại cho theme đâu.
Tinh
10/05/2009
Chac chan la em se lam, tai dao nay dang ban chi final evaluation cua co quan ma em phai lead nen lam ca T7 va CN, ko co thoi gian nua.
Bài viết mới trên blog của Tinh là: Top WordPress Themes Dùng Để Chơi Adsense Hiệu Quả