Created
April 11, 2016 14:38
-
-
Save dlucero23/0c220605997586a91dc9f2217029ce12 to your computer and use it in GitHub Desktop.
Simple CSS Dropcap for articles and blogposts. Options to have the dropcap automatically set the first character in the article to dropcap, and any other character that has the class: 'dropcap' will be rendered as a dropcap as well. See it live here: http://codepen.io/anon/pen/oIwsr
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <p> | |
| <span class="foo">T</span>his page is built for you. It’s where you and I can leave links and documents to communicate regarding your Budget Tool App. For now, most links will not work, since the majority of the site is still being developed. So I received the application from the Indian Company, and I am less than happy with the end result. You can see what they produced at this link here. This page is built for you. It’s where you and I can leave links and documents to communicate regarding your Budget Tool App. For now, most links will not work, since the majority of the site is still being developed. So I received the application from the Indian Company, and I am less than happy with the end result. You can see what they produced at this link here. | |
| </p> | |
| <p> | |
| <span class="bar dropcap">T</span>his page is built for you. It’s where you and I can leave links and documents to communicate regarding your Budget Tool App. For now, most links will not work, since the majority of the site is still being developed. So I received the application from the Indian Company, and I am less than happy with the end result. You can see what they produced at this link here. This page is built for you. It’s where you and I can leave links and documen<body> | |
| <p> | |
| <span class="foo">T</span>his page is built for you. It’s where you and I can leave links and documents to communicate regarding your Budget Tool App. For now, most links will not work, since the majority of the site is still being developed. So I received the application from the Indian Company, and I am less than happy with the end result. You can see what they produced at this link here. This page is built for you. It’s where you and I can leave links and documents to communicate regarding your Budget Tool App. For now, most links will not work, since the majority of the site is still being developed. So I received the application from the Indian Company, and I am less than happy with the end result. You can see what they produced at this link here. | |
| </p> | |
| <p> | |
| <span class="bar dropcap">T</span>his page is built for you. It’s where you and I can leave links and documents to communicate regarding your Budget Tool App. For now, most links will not work, since the majority of the site is still being developed. So I received the application from the Indian Company, and I am less than happy with the end result. You can see what they produced at this link here. This page is built for you. It’s where you and I can leave links and documents to communicate regarding your Budget Tool App. For now, most links will not work, since the majority of the site is still being developed. So I received the application from the Indian Company, and I am less than happy with the end result. You can see what they produced at this link here.</p> | |
| </body> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| font-size:20px; | |
| line-height:1.5; | |
| font-family:Optima, Segoe, 'Segoe UI', Candara, Calibri, Arial, sans-serif; | |
| -webkit-font-smoothing:antialiased; | |
| text-rendering:optimizeLegibility; | |
| } | |
| body > p:nth-of-type(1):first-letter, .dropcap { | |
| float:left; | |
| font-size:42px; | |
| font-weight:bold; | |
| border-radius:50px; | |
| line-height:25px; /* line-height shares a relationship with border-radius, approximately 2:1 YMMV based on font-family */ | |
| padding:25px; /* padding = border-radius/2 */ | |
| margin:8px 8px 0px 0px; | |
| text-align:center; | |
| background-color:#1a1a1a; | |
| color:#fff; | |
| display:inline-block; | |
| } | |
| /* | |
| p:first-of-type:first-letter { | |
| float: left; | |
| display: block; | |
| width: 50px; | |
| font-family: Arial, Helvetica, sans-serif; | |
| font-size: 40px; | |
| font-weight: bold; | |
| line-height: 50px; | |
| margin: 4px 8px 0px 0px; | |
| text-align: center; | |
| border-radius: 60px; | |
| background-color: #F86B35; | |
| color: white; | |
| } | |
| */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment