Trong bài này mình sẽ sưu tầm một số mẫu (template) Drop Caps, và code sẵn để anh em dánh chèn vào những bài viết tâm cmn đắc hoặc landing page ha.
Mẫu 1 của css-tricks.com
WordPress 5.3 will be the final major release of 2019 and aims to polish current interactions and make the UIs more user friendly. Matt Mullenweg is the Release Lead for 5.3, Francesca Marano is the Release Coordinator, David Baumwald is the Triage PM, Riad Benguella is the Editor Tech Lead, Mark Uraine is the Editor Design Lead, Andrew Ozz is the Core Tech Lead, Anders Norén is the Default Theme Design Lead, Ian Belanger is the Default Theme Wrangler, Justin Ahinon is the Docs Coordinator, JB Audras is the Accessibility Lead, Mike Reid is the Marketing Lead, and Mike Schroder is the Media Focus Lead. All release decisions will ultimately be theirs to make and communicate while gathering input from the community. There will be a new bundled theme included in 5.3.
Code để chèn
<span style="color: #903; float: left; font-family: Georgia; font-size: 550%; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px;"><strong>W</strong></span>
ordPress 5.3 will be the final major release of 2019 and aims to polish current interactions and make the UIs more user friendly. Matt Mullenweg is the Release Lead for 5.3, Francesca Marano is the Release Coordinator, David Baumwald is the Triage PM, Riad Benguella is the Editor Tech Lead, Mark Uraine is the Editor Design Lead, Andrew Ozz is the Core Tech Lead, Anders Norén is the Default Theme Design Lead, Ian Belanger is the Default Theme Wrangler, Justin Ahinon is the Docs Coordinator, JB Audras is the Accessibility Lead, Mike Reid is the Marketing Lead, and Mike Schroder is the Media Focus Lead. All release decisions will ultimately be theirs to make and communicate while gathering input from the community. There will be a new bundled theme included in 5.3.
Cách dùng: là anh em bê nguyên đoạn code trên dán ngay vào codepen.io để xem kết quả nó như nào. Sửa lại chữ W thành chữ mà anh em mong muốn. Nó là cái chữ cái đầu đoạn văn, còn cái đoạn phía sau thích thay gì thay thôi.
Cuối cùng là đem dán nó ngay vào trình soạn thảo của WordPress, Blogspot chẳng hạn. Nhớ là trong chế độ HTML nhen.
Mẫu 2 của Dumet_School
What is this ?
Quá đẹp và cổ cổ đúng không nào, bây giờ để chèn anh em dán code đây vào trình soạn thảo ở chế độ HTML. Sau đó chuyển sang chế độ trực quan (Visual – trong WordPress) và sửa lại theo ý muốn nhé.
<hr class="border" style="background-color: #d35400; border: none; font-family: Pacifico, cursive; font-size: 16px; height: 2px; margin: 0px; padding: 0px; width: 100%;" /> <h1 style="color: #222222; font-family: Pacifico, cursive; font-size: 2.618rem; font-weight: 400; line-height: 0.573rem; margin: 3rem 0px 1.5rem; padding: 0px;">What is this ?</h1> <div style="color: #444444; font-family: Pacifico, cursive; font-size: 16px; line-height: 1.5rem; margin-bottom: 30px; margin-top: 3rem; padding: 0px; text-align: justify;"><span class="dropcap" style="background-color: #95a5a6; color: #d35400; float: left; font-size: 50px; margin: 0.25rem 5px 0px 0px; padding: 20px 10px;">L</span>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> <hr class="border" style="background-color: #d35400; border: none; font-family: Pacifico, cursive; font-size: 16px; height: 2px; margin: 0px; padding: 0px; width: 100%;" />
