CODEWITHSUNDEEP
htmlcssasciiascii-art
aer_0
aer_0

Reputation: 51

How can I change colour in ASCII art letters in HTML between <pre> tags?

In this example I would like to change "y" to blue.

 ,ggggggggggggggg     
dP""""""88"""""""     
Yb,_    88            
 `""    88            
        88            
        88  gg     gg 
        88  I8     8I 
  gg,   88  I8,   ,8I 
   "Yb,,8P ,d8b, ,d8I 
     "Y8P' P""Y88P"888
                 ,d8I'
               ,dP'8I 
              ,8"  8I 
              I8   8I 
              `8, ,8I 
               `Y8P"

Upvotes: 0

Views: 1873

Answers (1)

Tim Gerhard
Tim Gerhard

Reputation: 3607

I think what you're looking for is something like this:

.y-text {
  color: blue;
  position: absolute;
  top: 82px;
  left: 80px;
}
<pre>
  ,ggggggggggggggg     
dP""""""88"""""""     
Yb,_    88            
 `""    88            
        88            
        88  
        88 
  gg,   88  
   "Yb,,8P 
     "Y8P'    
</pre>
<pre class="y-text">
  gg     gg 
  I8     8I 
  I8,   ,8I 
 ,d8b, ,d8I 
 P""Y88P"888
       ,d8I'
     ,dP'8I           
    ,8"  8I 
    I8   8I 
    `8, ,8I 
      `Y8P"         
</pre>

Basically all you need to do is to separate the two letters from each other and put each one in its own <pre> tag. I then used absolute positioning to rearrange the letters like they used to be before.

Upvotes: 4

Related Questions