Create a newspaper-style dropcap effect with css3
Ever wanted to have that newspaper style effect or otherwise known as Drop cap effect? Well here is how you can use CSS3 to achieve this job. They are used rarely in blogs, web blogs, websites, community websites and articles sites despite the :first-letter selector having been around for quite a number of years. This is you chance to spice it up with some stylish CSS3 text-shadow effects on the way. The design we?ll be creating features a large drop cap at the start of a block of text. The actual drop cap effect will be created with the :first-letter selector, while the extra effects are added with the help of CSS text-shadow.
HTML Code
Almost all Website Projects start with the basic HTML structure similar to the code above. For this code, the HTML is made up of the Doctype and Head elements before the quote is laid out as a basic paragraph element. We?ll be using CSS selectors to create our drop cap so no special IDs or classes are required.
The CSS code begins with a reset to remove any default browser styling, then the main font styling is added to the body. You?ll notice the use of the ?Chunk? font; this custom font is being added with the help of @font-face.
Now the slab-serif font is in place the size and line-height of the typography can be set. The text-transform property helps the text appear in caps despite how it is written in the HTML file. This is helpful because you dont need to worry about editing the HTML every time you need something changed. You can do that with these small CSS snippets. Then after this, the text-shadow property is used along with RGB colour values to add an effect to the text.
Now the main text is in place we can finally get around to styling up the drop cap. The first letter is targeted with the handy :first-letter selector, but to avoid having drop caps on every paragraph on our page we also need to use the :first-child selector to target only the first letter of the first paragraph. Just four CSS declarations are needed to correctly style up the drop cap. First the letter is increased in size so it?s large enough to span across two lines of the paragraph, then it is floated left to allow it to break out of the paragraph?s flow. A touch of margin on the top and right help tweak the drop cap into place and add some space between this first letter and the remainder of the sentence. Everything looks fine in Firefox so far, but if we test it out in WebKit browsers (Safari & Chrome) they both seem to place the drop cap higher than Firefox. We can easily fix this with an extra line-height declaration. This makes no difference to the Firefox version while lining everything up in Safari and Chrome.
The basic drop cap is complete, but traditionally drop caps come along in all kinds of fancy styling. We can add some cool effects of our own with the help of the CSS3 text-shadow property. A duplicate of the text is created and offset by 4px, then a second duplicate is created at 7px. When the first duplicate is set to the same color as the background it creates a cool retro style effect. I hope you enjoyed learning this sweet little trick as there are many more to come… At Jonah & Associates, we do Web Design, Website Development, E-Commerce Online Sales Store and Custom Applications….If you are looking for such services, please dont forget to give us a buzz. We will also be happy to help you with CSS styling for your website.
