Css Text Effect

What is Text Effect in CSS?

For instance, the text styling and effects that makes the text look better on the website and also interesting for the viewers.

Text Color:

Theretoexample demonstrates setting the text color of a paragraph to #3498db.

                          
                            p {
                                color: #3498db; /* Set text color to a shade of blue */
                            }

Font Weight:

This example makes the text within a <strong> element bold.

                          
                            strong {
                                font-weight: bold; /* Set font weight to bold */
                            }

Text Decoration:

This example adds an underline to the text within anchor tags.

                          
                            a {
                                text-decoration: underline; /* Underline the text within anchor tags */
                            }

Text Transform:

This example transforms the text in an h2 heading to uppercase.

                          
                            h2 {
                                text-transform: uppercase; /* Convert text to uppercase */
                            }

Letter Spacing:

This example increases the spacing between letters in a paragraph.

                          
                            p {
                                letter-spacing: 2px; /* Add 2 pixels of spacing between letters */
                            }

Line Height:

This example adjusts the line height of text in a paragraph.

                          
                            p {
                                line-height: 1.5; /* Set line height to 1.5 times the font size */
                            }

Text Align:

This example center-aligns the text inside a div.

                          
                            div {
                                text-align: center; /* Center-align the text within a div */
                            }

Text Shadow:

This example adds a shadow to the text in an h3 heading.

                      
                        h3 {
                            text-shadow: 2px 2px 4px #888888; /* Add a shadow to text */
                        }

Overflow Ellipsis:

This example adds an ellipsis to text that overflows a paragraph.

                      
                        p {
                            white-space: nowrap; /* Prevent text from wrapping */
                            overflow: hidden; /* Hide overflow text */
                            text-overflow: ellipsis; /* Display ellipsis (...) for overflow text */
                        }

Responsive Font Size:

This example sets the font size of an h1 heading relative to the viewport width.

                      
                        h1 {
                            font-size: 3vw; /* Set font size based on viewport width for responsiveness */
                        }

Text Animation:

This example applies a color-changing animation to the text within a span element.

                      
                        span {
                            display: inline-block;
                            animation: colorChange 3s infinite alternate; /* Apply a color-changing animation */
                        }
                        
                        @keyframes colorChange {
                            0% {
                                color: #3498db;
                            }
                            100% {
                                color: #2ecc71;
                            }
                        }

CSS Text Effect