How to create a drop shadow effect using CSS ?

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 drop shadow effect using CSS ?

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 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

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

How to create Drawing Effect Animation using CSS ?

Drawing effect animation can be implemented using CSS animation. The used images can be modified or edited as per requirement. Save the images in SVG file format. The animation is created by drawing a simple art using lines and curved lines. The CSS stroke-dashoffset property defines the location al

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 "

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 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 a Menu Icon using CSS ?

The Menu Icon is mostly used on smaller screens, there's limited space to display a full navigation menu. A menu icon helps in hiding the navigation items initially and revealing them when the user needs them. In this article, we will see how To Create a Menu Icon using CSS. There are many ways to c

How to create a bouncing bubble effect using CSS ?

The bouncing bubble effect in CSS creates an animation where elements, typically circles or bubbles, move up and down, simulating a bouncing motion. Using properties like @keyframes, transform, and animation, this effect adds a playful, dynamic visual appeal to the webpage. ApproachContainer Setup: