Css

Examples of creating effects with text using CSS

Below are some examples of creating text effects using CSS. These effects can be applied to headings, paragraphs, or any text element on your webpage.

1. Text Shadow Effect

This effect creates a shadow behind the text, giving it a slight 3D appearance.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Text Shadow Effect</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #282c34;
            color: white;
            font-family: Arial, sans-serif;
        }
        h1 {
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }
    </style>
</head>
<body>
    <h1>Text Shadow Effect</h1>
</body>
</html>

2. Glowing Text

This effect makes the text appear to glow by using text shadows.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Glowing Text Effect</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: black;
        }
        h1 {
            color: #00ff00;
            text-shadow: 0 0 5px #00ff00, 
                         0 0 10px #00ff00,
                         0 0 15px #00ff00;
        }
    </style>
</head>
<body>
    <h1>Glowing Text Effect</h1>
</body>
</html>

3. Typewriter Effect

This effect simulates a typewriter animation, where the text appears letter by letter.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Typewriter Effect</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #222;
            color: #fff;
            font-family: monospace;
            font-size: 2em;
        }
        .typewriter h1 {
            overflow: hidden; /* Ensures the text is not revealed until the animation */            border-right: 4px solid #fff; /* The cursor effect */            white-space: nowrap; /* Keeps text in a single line */            margin: 0 auto; /* Gives the text a centered appearance */            letter-spacing: 0.15em; /* Adds spacing between letters */            animation: typing 4s steps(30, end), blink-caret 0.75s step-end infinite;
        }
        @keyframes typing {
            from { width: 0; }
            to { width: 100%; }
        }
        @keyframes blink-caret {
            from, to { border-color: transparent; }
            50% { border-color: white; }
        }
    </style>
</head>
<body>
    <div class="typewriter">
        <h1>Hello, World!</h1>
    </div>
</body>
</html>

4. Fading Text

This effect gradually changes the opacity of the text, creating a smooth fading effect.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Fading Text</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #282c34;
            color: white;
            font-family: Arial, sans-serif;
        }
        h1 {
            opacity: 0;
            animation: fadeIn 2s forwards;
            animation-delay: 1s;
        }
        @keyframes fadeIn {
            to { opacity: 1; }
        }
    </style>
</head>
<body>
    <h1>Fading Text Effect</h1>
</body>
</html>

5. Text with Background Gradient

This effect uses a gradient as the background for the text, which can create a visually appealing look.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Gradient Text</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #222;
            font-family: Arial, sans-serif;
        }
        h1 {
            background: linear-gradient(to right, #ff7e5f, #feb47b); /* Gradient background */            -webkit-background-clip: text; /* For webkit browsers */            -webkit-text-fill-color: transparent; /* For webkit browsers */            font-size: 4em;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Gradient Text Effect</h1>
</body>
</html>

These examples illustrate different text effects you can achieve using only CSS. You can easily customize them to match your design preferences by changing colors, animation durations, and more. Feel free to explore and combine these effects for even more creative results!

Victoria

Im just a girl who hanging around with her friends ;)

Share
Published by
Victoria

Recent Posts

Building Your Next Project with wp-scripts: A Comprehensive Guide

WordPress development has evolved significantly, and modern tooling plays a crucial role in creating efficient…

1 week ago

Script for automatically informing search engines about new content on website

I. Project Overview The goal is to automate the process of notifying search engines (like…

2 weeks ago

Creating an XML sitemap script with PHP, designed for automated updates via CRON

1. Database Structure (MySQL) We'll need a database table to store information about our website's…

2 weeks ago

Comprehensive guide on building a URL shortening script

This explanation aims to provide a solid foundation for understanding the process and implementing your…

2 weeks ago

Guide on building a real-time website chat script

Okay, here's a comprehensive guide on building a real-time website chat script using PHP, HTML,…

2 weeks ago

Comprehensive guide on creating a simple website analytics system

Comprehensive guide on creating a simple website analytics system using PHP, HTML, CSS, JavaScript, and…

2 weeks ago