Create a Drop Caps Effect using CSS
Drop caps are define as the first capital letter of a paragraph in much larger font size that has the depth of two or more lines of normal text.
The task can be done by using the CSS ::first-letter pseudo-element to create beautiful drop caps effect. The ::first-letter selector in CSS is used to apply style to the first letter of the first line of a block-level element, the condition is it should not be preceded by other content ( such as images or inline tables).
Syntax:
::first-letter {
// CSS Property
}Example:
HTML
<!DOCTYPE html><html> <head> <style> .gfg::first-letter { font-size: 250%; color: green; } div::first-letter { font-size: 250%; color: blue; font-weight: bold; } </style></head> <body style="text-align: center;"> <h1 style="color:green;"> How to create drop caps effect using CSS </h1> <p> <div>Geeks</div> <div>For</div> <div>Geeks</div> </p> <p class="gfg"> A computer science portal for geeks. </p></body> </html> |
Output:
Supported Browsers:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Please Login to comment...