How to Create a Curve Text using CSS/Canvas ?

Create a Drop Caps Effect using CSS

Last Updated : 24 Jun, 2024

Drop caps are defined as the first capital letter of a paragraph in a 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 a 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.

Syntax:

::first-letter {
    // CSS Property 
}

Approach

The HTML document defines the document type and version.
Within the <head> section, a <style> block is included to define CSS rules for the document, specifically targeting the first letter of elements with the gfg class and all <div> elements.
The <body> section is styled with text-align: center and includes a main heading <h1> with green text explaining the drop caps effect using CSS.
The <p> tag contains multiple <div> elements, each displaying the words "Geeks", "For", and "Geeks" respectively, with the first letter styled to be larger and blue, and bold for <div> elements.
Another <p> element with the class gfg is present, displaying the text "A computer science portal for geeks." with its first letter styled to be larger and green due to the .gfg::first-letter CSS rule.

Example: The example shows the above-explained approach.

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:

How to Create a Curve Text using CSS/Canvas ?

M

manaschhabra2

Improve

Article Tags :

Similar Reads

How to create a drop shadow effect using CSS ?

In this article, we are going to learn how to create a drop shadow effect using CSS. drop-shadow() is an inbuilt function used to create a blurred shadow in a given offset and color. A drop shadow effect adds depth and visual interest to elements on a web page by creating a shadow behind them. This

How to Create a Curve Text using CSS/Canvas ?

Creating curved text using CSS3 or Canvas adds dynamic visual appeal to web design, offering flexible and creative ways to display headings and decorative elements along curved paths. There are several methods to curve text in web technologies. The simplest ways are by using jQuery plugins and SVG,

Create a 3D Text Effect using HTML and CSS

The 3D text effect is one of the most used text effects in the web design world. As a designer or front-end developer, one should know how to create a 3D text effect. Today we will be looking at one of the simplest and easiest methods to create text in a 3D look with HTML and CSS. ApproachCreate an

Create a Button Animation Effect using CSS

It is possible to apply various animation effects to any item using the CSS animation property. In order to get the hover effect, we will design a button and use the animation effect. When the user hovers over the button, the underlining for the text expands till it reaches the end. The hover animat

How to Create a Ribbon using CSS?

In this article, we will learn how to create a ribbon using CSS.PrerequisitesHTMLCSSApproachThe structure consists of a <button> element with the class "btn" containing the text "GFG DSA Course". Inside the button, there is an <span> element with the class "ribbon" containing the text "N

How To Create Carved Text Effect using CSS?

The carved text effect is also known as the embossed effect as it looks like the text has been embossed on a background. It is also known as Neumorphism in CSS. This effect is used when we want to give our website a clean and refreshing look. The embedded text can be of the same color as the backgro

How to Create an Accordion using CSS ?

Accordions are popular UI components used to present collapsible content sections on websites, enhancing user experience by organizing information in a compact and accessible manner. While traditionally implemented with JavaScript, a CSS-only approach offers a lightweight and efficient alternative,

How to Create an Autocomplete using CSS?

Autocomplete is a feature that suggests possible completions for an input field as the user types, typically seen in search boxes. It enhances user experience by providing real-time suggestions and helping users find what they're looking for faster and more efficiently. ApproachCreate the basic webp

How to create a marquee effect using CSS ?

In this article, we will be creating the marquee effect by using HTML and CSS. This effect can be created by using the <marquee> tag in HTML, but we will not use this tag as it is not widely used nowadays. We will create and design a marquee effect by using the CSS classes and styling properti

How to Create Callout Messages using CSS?

Callout messages are used to highlight important information, tips, warnings, or notes in a visually distinctive way. They help in drawing attention to specific parts of a document or webpage. We will explore how to create various types of callout messages using CSS.Preview ImagePreviewApproachFirst