Gói thiết kế website Thiết kế website công ty Thiết kế website du lịch Thiết kế website bán hàng Thiết kế website bất động sản Thiết kế website nhà hàng Thiết kế website xây dựng Thiết kế website thuê xe ôtô Thiết kế website nội thất Thiết kế website trọn gói Thiết kế website sim số đẹp, bán sim online
Dịch vụ khác Nâng cấp website Quản trị website Thiết kế giao diện website Đăng tin rao vặt Thiết kế Logo Quảng cáo Google Ads hiệu quả
Drop cap là một trong những typography hay được dùng trong các tạp chí trên giấy cũng như các tạp chí điện tử. Nó thường được dùng ở đầu mỗi bài báo với font chữ lớn và màu sắc nổi trội. Theo quy luật nhìn của mắt nếu một đối tượng nổi bật hơn các đối tượng xung quanh, nhì nó sẽ có tác động mạnh tới thị giác của người quan sát. Chính vì lý do đó mà người ta vẫn thường dùng cách này cho các bài báo nổi bật cần sự chú ý cao.
Drop cap là một trong những typography hay được dùng trong các tạp chí trên giấy cũng như các tạp chí điện tử. Nó thường được dùng ở đầu mỗi bài báo với font chữ lớn và màu sắc nổi trội. Theo quy luật nhìn của mắt nếu một đối tượng nổi bật hơn các đối tượng xung quanh, nhì nó sẽ có tác động mạnh tới thị giác của người quan sát. Chính vì lý do đó mà người ta vẫn thường dùng cách này cho các bài báo nổi bật cần sự chú ý cao.
Tuy nhiên trong khuôn khổ của lĩnh vực nghiên cứu chúng ta sẽ đi tìm hiểu một số kỹ thuật làm chữ hoa đầu dòng (Drop cap).
Đầu tiên chúng ta sẽ đi tìm hiểu cách làm Drop cap chính thống. Trong cách này chúng ta sẽ sử dụng đến kỹ thuật selectors trong CSS . cụ thể là chúng ta sẽ dùng đến thuộc tính :first-letter.
Ta có định dạng HTML:
Lorem ipsum dolor sit amet consectetuer at et Aenean ac dolor. Ligula nulla ac id pede sit consectetuer ipsum malesuada convallis habitant. Neque at pellentesque pharetra Aenean accumsan orci Proin leo tellus eu. Dictumst Integer ut adipiscing porttitor dolor Morbi ut id lorem auctor. Massa tellus Morbi enim tellus pede vel suscipit hac sapien Cras. Cursus velit hendrerit lobortis elit elit sed ut In.
Định dạng CSS :
p.pdropcap:first-letter { float: left; padding: 4px 8px 0 0; display: block; color: #336699; font: 60px/50px Georgia, Times, serif; }
Kết quả hiển thị:
Lorem ipsum dolor sit amet consectetuer at et Aenean ac dolor. Ligula nulla ac id pede sit consectetuer ipsum malesuada convallis habitant. Neque at pellentesque pharetra Aenean accumsan orci Proin leo tellus eu. Dictumst Integer ut adipiscing porttitor dolor Morbi ut id lorem auctor. Massa tellus Morbi enim tellus pede vel suscipit hac sapien Cras. Cursus velit hendrerit lobortis elit elit sed ut In.
Chúng ta cần phải đặt class cho thẻ
nhằm mục đích phân biệt nó với các thẻ
khác trong trang. Trong trường hợp bạn không đặt class thì toàn bộ các ký tự đầu dòng của thẻ
trong trang sẽ hiển thị định dạng chữ hoa, mà điều đó thì không phải là điều mong muốn.
Trong cách thứ hai này ta sẽ dùng thêm một thẻ để bao ký tự chữ hoa ở đầu dòng
Định dạng HTML:
Norem ipsum dolor sit amet consectetuer at et Aenean ac dolor. Ligula nulla ac id pede sit consectetuer ipsum malesuada convallis habitant. Neque at pellentesque pharetra Aenean accumsan orci Proin leo tellus eu. Dictumst Integer ut adipiscing porttitor dolor Morbi ut id lorem auctor. Massa tellus Morbi enim tellus pede vel suscipit hac sapien Cras. Cursus velit hendrerit lobortis elit elit sed ut In.
Định dạng CSS:
.dropcap { float: left; padding: 4px 8px 0 0; display: block; color: #336699; font: 60px/50px Georgia, Times, serif; }
Kết quả hiển thị:
Norem ipsum dolor sit amet consectetuer at et Aenean ac dolor. Ligula nulla ac id pede sit consectetuer ipsum malesuada convallis habitant. Neque at pellentesque pharetra Aenean accumsan orci Proin leo tellus eu. Dictumst Integer ut adipiscing porttitor dolor Morbi ut id lorem auctor. Massa tellus Morbi enim tellus pede vel suscipit hac sapien Cras. Cursus velit hendrerit lobortis elit elit sed ut In.
Cách này có một ưu điểm là ký tự hoa đó có thể đặt ở bất cứ đâu trong bài viết miễn là chúng ta thêm thẻ vào ký tự mà ta muốn chuyển thành dang drop cap.
Để cho phong phú chúng ta cũng có thể thêm một số các thuộc tính như màu nền, màu chữ,… vào cho thêm sinh động. Ta có ví dụ như sau:
Ac dolor. Ligula nulla ac id pede sit consectetuer ipsum malesuada convallis habitant. Neque at pellentesque pharetra Aenean accumsan orci Proin leo tellus eu. Dictumst Integer ut adipiscing porttitor dolor Morbi ut id lorem auctor. Massa tellus Morbi enim tellus pede vel suscipit hac sapien Cras. Cursus velit hendrerit lobortis elit elit sed ut In.
Tag: Thiết kế web , thiết kế website
Tổng đài tư vấn miễn phí 100% cho khách hàng Tam Nguyên.
Hãy gọi cho chúng tôi!