Text does not display correctly to glow


Joined
Sep 16, 2022
Messages
3
Reaction score
0
I am trying to get my text to glow with the following code, not sure if I have done it correctly for css.

CSS:
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-bottom: 0.5rem;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.2;
  color: inherit;
}

h1, .h1 {
  font-size: 2.5rem;
}

h2, .h2 {
  font-size: 2rem;
}

h3, .h3 {
  font-size: 1.75rem;
}

h4, .h4 {
  font-size: 1.5rem;
}

h5, .h5 {
  font-size: 1.25rem;
}

h6, .h6 {
  font-size: 1rem;
}

h1 .a{ /* use to make text glow in index.php */
    
 background-image: url("move.gif");
  background-size: cover;
  color: transparent;
  -moz-background-clip: text;
  -webkit-background-clip: text;
  text-transform: uppercase;
  font-size: 80px;
  margin: 5px 0;   
    }
h2 .b {  /* use to make text glow in index.php */
  background-image: url("move.gif");
  background-size: cover;
  color: transparent;
  -moz-background-clip: text;
  -webkit-background-clip: text;
  text-transform: uppercase;
  font-size: 40px;
  margin: 10px 0;
    }   
    
h3 .c { /* use to make text glow in index.php */
  background-image: url("move.gif");
  background-size: cover;
  color: transparent;
  -moz-background-clip: text;
  -webkit-background-clip: text;
  text-transform: uppercase;
  font-size: 40px;
  margin: 10px 0;
    }       

.title3 { /* use to make text glow in index.php */
  font-family:  'Kanit', sans-serif;
  text-align: center;
  color: #FFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 10vh;
  letter-spacing: 1px;
  line-height:2
}
.hoof { /* use to make text glow index.php */
        background-image: linear-gradient(to left, Lime, DarkCyan, Crimson, MediumVioletRed, DarkOrange, Fuchsia, DarkSlateBlue, SteelBlue, MediumBlue);
        -webkit-background-clip: text;
        -moz-background-clip: text;
        background-clip: text;
        color: transparent;
 }
 
  .kripto { /* use to make text glow in index.php */
        background-image: linear-gradient(to left, MediumVioletRed, MediumBlue, Lime, DarkOrange, DarkCyan, Crimson, SteelBlue, Fuchsia, DarkSlateBlue, SteelBlue);
        -webkit-background-clip: text;
        -moz-background-clip: text;
        background-clip: text;
        color: transparent;
 }
 
  .uit { /* use to make text glow in index.php */
        background-image: linear-gradient(to left, DarkSlateGray, Maroon, Goldenrod, Blue, LawnGreen, Aqua, BlueViolet, MediumBlue);
        -webkit-background-clip: text;
        -moz-background-clip: text;
        background-clip: text;
        color: transparent;
 }

HTML:
<div class="row">
        <div class="col-12 col-sm-6 col-md-5">
            <div class="info-box">
                <div class="info-box-content">
                    <h1 class="a" "title1">testing text glow</h1>
                </div>
            </div>
        </div>
            <div class="col-12 col-sm-6 col-md-5">
                <div class="info-box mb-3">
                    <div class="info-box-content">
                        <h2 class="b" "title2">1111111111111111111</h2>
                    </div>
                </div>
            </div>
    </div>
        <div class="col-12 col-sm-6 col-md-4">
            <div class="info-box mb-3">
              
                <div class="ms-3">
                    <h3 class="c" "title3">222222222222222222222222</h3>
                </div>
            </div>
        </div>
 
Ad

Advertisements

Ad

Advertisements

Joined
Sep 16, 2022
Messages
3
Reaction score
0

Attachments

  • Screenshot_8.png
    Screenshot_8.png
    9.7 KB · Views: 0
  • Screenshot_7.png
    Screenshot_7.png
    9.6 KB · Views: 0

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top