How to Create CSS Drop Caps Effect


hello and welcome to red stapler channel
in this tutorial I’m going to show you how to create a drop effect on the first
letter of the paragraph or drop caps effective in CSS ready let’s check it
out so here is our example page with couple of text paragraphs the first
thing we are going to do is to increase the font size and change the color of
the first letter we can do that easily by using first letter selector I’m going
to also add padding-right for an extra space between the letter and the
paragraph now you see that the styles has been applied to all paragraphs
instead of just the first one we can fix this by adding first child selector and
here’s the key part to drop the first letter just add float left easy as that
looks good now the problem is while it works fine with Firefox and Edge. Chrome
seems to add extra margin when we add float we can fix this by reducing the
line height to offset that I will also change the font to Georgia as well now before we end this tutorial there is
an actual initial-letter property that let you drop caps without using float
and manually adjusting the line height unfortunately it only works with Safari
so we have to stick with a float solution for now probably a couple years
so that’s all for this tutorial if you love this video as always don’t forget
to like to subscribe to stay with us for more thanks for watching and see you
next time bye

9 Comments

Add a Comment

Your email address will not be published. Required fields are marked *