It May Appear Odd to Read to an Unused as W3C is Known to Be Too Much Serious. W3C CSS Working Group Has an Updated W3C Draft on Oct 2016 Around Drop Caps CSS For Rules Across Various Devices, Style & Responsiveness. Because CSS part is also of W3C. In this article, we are going to discuss about the basic styling rules, methods we previously described since 2010 and some information from Adobe. We are talking about this : https://drafts.csswg.org/css-inline/#DropInitial.
Drop Caps CSS Update : Our Previous Drop Caps CSS Tutorials
CSS pseudo class selectors are what we normally currently use for Drop Caps. That simply means – adding a tiny piece of CSS will automatically add the effect without any other effort.
Commonly we talk about WordPress for CSS stuffs on this website. Although such example of CSS can be used for any kind of website. Our oldest guide on Drop Caps CSS is more better to read by a newbie. The usage of the linked guide of CSS in practice is not recommended today anymore. Among the other guides, Drop Caps in WordPress Without Plugin is quite recent, so as Drop Caps Without HTML Markup With jQuery Plugin or CSS3. jQuery Plugin for Drop Caps is not exactly great, although Adobe has beautiful open source interactive demo page :
---
1 | http://webplatform.adobe.com/dropcap.js/dropcap-demo.html |
Drop Caps CSS Update : W3C Draft, Oct 2016
Previously, we were using this method :
1 2 | .entry-content>p:nth-of-type(1):first-letter {color:#111;float:left;font-size:3.4em;line-height:0.6em;margin:0.2em 0.2em 0.05em 0px} |
Now, we can use :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | p:nth-of-type(1):first-letter { color: #17A8E3; font-family: Cochin; font-weight: bold; float:left; font-size:3.4em; line-height:0.7em; margin:0.1em 0.1em 0.05em 0px;} p:nth-of-type(1):first-child:first-line { color: #17A8E3; font-size:1.7em; line-height: 1.3em; margin:0.1em 0.1em 0.025em 0px; } p:first-child { padding: 10px; color: #165A72; position: relative; font-size:1.3em; line-height: 1.6em; } |
first-child is the first paragraph marked with p div class, first-child:first-line is the first sentence visible in that paragraph and first-letter is the first letter we want to make drop caps effect. In case of WordPress, we need to mark them with the name of the div of post, like entry-content (for Genesis theme) :
1 | .entry-content>p:nth-of-type(1):first-letter |
Here is a working demo :
See the Pen Drop Caps Demo with First-Line, First-Child by Abhishek Ghosh (@AbhishekGhosh) on CodePen.
