gallery of original ASCII-art works by llizard aka ejm

Category: ASCII-art

GeoC: rarity

As a protest, this is what I left behind after moving away from GeoC.

llizard -ejm

my self portrait

llizard portrait

and here is a rare photo of me

rarity (a photo of me)

go back home….


Because I don’t pay money for this page and GeoCities (Free Home Pages) attaches Adbox/pop-up advertisements on any GeoPage without the GeoGuide, I am compelled to choose the lesser of the two evils and install the GeoGuide with its advertisements below, over which I have NO control. They are the cost of having GeoCities host the pages. If you have any comments about any of these advertisement ploys, please direct them to GeoCities (GeoCities Comment Submission Form).

GeoC: Looking for me?

As a protest, this is what I left behind after moving away from GeoC.

reasons for leaving….

    . . . . . . . . . . . . . . . . .            
   .         ______                  .  _______ 
   .        |popups|                 . |       |
   .        |galore|                 . | I'VE  |
   .        |on_NS3|_I_    _______   . | MOVED |
   .  ^    ___ | /\-_--\  |Y!Geo  |  . |_______|    
   . /|\  [Buy]|/  \_-__\ |ad goes|  .     |       
   . /|\    |   |[]| [] | |here __|  .     |  ,^%---
   .        |                 |      .     | <   \ The neighbourhood
   .           (`   |         |      .     \/ >\   became too commercial
   .   ejm     ,) ()|)()      |      .        >/ 
    . . . . . . . . . . . . . . . . .        /\^^
                                             \ \

I understand the need for advertising to pay for space on Y!Geo. I do not understand the need for excessive advertising. Please contact GeoCities (GeoCities Comment Submission Form) to tell them what you think of their ads.


The page you are looking for has been
moved to a new home.

I beg your pardon for the runaround….

  ___|___
 |       |
 |  __H  |
 | /\- \ | ~---,        
 |/::\=-\|      \_,^%--- 
 ||::|[]||       />  \ Please use the   
_|_______|_  ___/ >    link to the right...  [home]
    /|\     (# o) >
   / | \     '-~ /|^^
  /  |  \ ejm    | \

links to many ASCII-art pages

links to ASCII-animation pages

(Y!Geo does not allow me to point to where my page has moved. Go to the above links pages and search for “llizard” if you are looking for my page)

my ASCII-art:



my Javascript ASCII-animations:


  • Javascript animations (frames)
  • Javascript animations (NO frames)

my illustrations and gif animations:


grey home page
coloured home page

(old GeoC homepage) gallery of original art by llizard aka ejm

As a protest, this is what I left behind after moving away from GeoC.

Jump over the ads and disclaimers
to get to what’s left of

Gallery of original
illustrations, gif animations, ASCII-art, ASCII-animation
by llizard aka ejm

Advertisement on these pages are how I pay for the webspace provided by GeoCities (Free well sort of…Home Pages). I have NO control over the advertisements put there. All advertisements and images on the GeoGuide have been chosen by GeoCities. Short of taking the pages away from GeoCities (which is what I have finally done – here are my reasons for moving), I have NO control over any of these GeoCities advertisements. They are the cost of having GeoCities host the pages. If you have any comments about any of these advertisement ploys, please direct them to GeoCities (GeoCities Comment Submission Form.)

Do you need help with your Y!Geo site?

NEWSFLASH!! Spring 2009: Y!Geo sites are going to disappear. Y! will not be offering another free hosting service for those who have sites hosted on geocities. Check out cwahi.net‘s FREE web hosting service. Do it now while you can still retrieve your files….

On October 26, 2009, your GeoCities site will no longer appear on the Web, and you will no longer be able to access your GeoCities account and files.

If you’d like to move your web site, or save the images and other files you’ve posted online, please act now by downloading your files […].

-excerpt from Y!Geocities

Go to Y!Geo Bulletin Boards and choose “help and support” (well, of course, you can only do that if the bulletin boards haven’t been shut down). If you are really in despair, you might also like to look at another alternative.



  . . . . . . . . . . . . . . . . .
 .         ______                  . 
 .        |popups|                 .
 .        |galore|                 . 
 .        |on_NS3|_I_    _______   .
 .  ^    ___ | /\-_--\  |Y!Geo  |  .    
 . /|\  [Buy]|/  \_-__\ |ad goes|  .       
 . /|\    |   |[]| [] | |here __|  .   ,^%---
 .        |                 |      .  <   \ Is it just
 .           (`   |         |      .\/ >\   me, or are
 .   ejm     ,) ()|)()      |      .   >/   there too
  . . . . . . . . . . . . . . . . .   /\^^  many ads?
                                      \ \
Is it any wonder that I moved?

my reasons for leaving GeoC

As a protest, this is what I left behind after moving away from GeoC.

reasons for leaving….

In early July 1999, GeoCities merged with Yahoo! There are new terms of service so even though my gifs and gif animations are ridiculously useless, I have REMOVED them from the GeoCities site. I am tired of all the advertisements at the bottom of every page so I have moved absolutely all my ridiculously useless art to another site.
This site will remain here for a while until people have changed their bookmarks. You can find the new address by going to alt.ascii-art and looking at the signature of any message I have posted after 12 July.

To celebrate the move, I made new gif animations and updated my ASCII-art gallery.

In order to access my account after the Yahoo! takeover of Geocities, I had to sign acceptance of a new Terms of Service. I am not thrilled with it (please look at #7) and have REMOVED all gifs and animated gifs that I created from my GeoPages. Y!Geo has listened to the concerns and has altered the first TOS we had to sign to a certain extent. However, I do not like the idea that it appears that I have signed over to Y!Geo the right to alter and/or manipulate anything on my Y!Geo site. Or at least that’s what I understand from this Y!Geo statement: “By submitting Content to Yahoo for inclusion on your Yahoo GeoCities Site, you grant Yahoo the world-wide, royalty-free, and non-exclusive license to reproduce, modify, adapt and publish the Content“.

    . . . . . . . . . . . . . . . . .
   .         ______                  .  _______ 
   .        |popups|                 . |       |
   .        |galore|                 . | So I  |
   .        |on_NS3|_I_    _______   . | MOVED |
   .  ^    ___ | /\-_--\  |Y!Geo  |  . |_______|    
   . /|\  [Buy]|/  \_-__\ |ad goes|  .     |       
   . /|\    |   |[]| [] | |here __|  .     |  ,^%---
   .        |                 |      .     | <   \  The neighbourhood
   .           (`   |         |      .     \/ >\    became too commercial.
   .   ejm     ,) ()|)()      |      .        >/ 
    . . . . . . . . . . . . . . . . .        /\^^
                                             \ \

GeoCitizens can chose between the geoguide and a new design called the Ad Square. The AdSquare is smaller and can be closed. However, that is not necessarily good news… as you can see from the following quote from the page about the ad square. “If a visitor views your page with a browser that isn’t at least version 4.0, a Pop-Up ad will appear. Unfortunately, older browsers are incapable of understanding the Ad Square’s technology.” This is indeed unfortunate news. Go to Ad Square for more information and GeoCities Comment Submission Form to express your views.

Every page on this site is adjusted so you should not be plagued by those hideous Geocities popups anywhere on this site. But on other GeoSites, people can choose between the popup stopping Geoguide or the AdSquare. If you have less than version 4 browser, you will get popups on any GeoSite with the AdSquare. If you have version 4 browser (or higher) you’ll get a really “nifty” ad that will hover over top of part of these words. See if you can figure out how to close it down…. And I thought the Geocities watermark was annoying. The iffy coding that is employed by Y!Geo causes page loading errors to occur and inexplicable letters to appear, disappear and reappear depending on which ad is in the loop. While I’m the first to admit that I’m no rose geranium and have been known to make a coding error or two myself, at least when I find out about it, I fix it. Y!Geo seems incapable of admitting to any errors (unless they have been fixed) and will hold onto poor coding for a ridiculous length of time. Perhaps Y!Geo will change this policy of denial some day but that day has not yet arrived. Is it any wonder that I moved?

rarity

This photo was taken on October 5th 1997 at the Chateau de Biron.

EBiron

                ha
          ,^%---  ha
      _.__<  \ ha
     (_.-- >        That's me on the bicycle by
     -   __>,^-      the sign for the chateau.
   ( * ) \  ( * )
ejm  -   ~    -

 

©ejm/TPH 1998

ridiculous colour test

colour test using nonstandard colours
(poorly colourized ASCII art)

In 1995, when we got our first computer, before I understood anything at all about hexadecimal numbers, my sister and I regaled ourselves by seeing what would happen when we used entirely non-standard colours on an HTML page. The following is the body tag we used.

<body alink="#silly" bgcolor="#tomfoolery" link="#llizard" 
text="#colour" vlink="#ridiculous">

Not surprisingly, the page will NOT be rendered “correctly” here. WordPress does not like “tomfoolery” as a background colour… I had to cheat and use a real hexadecimal number for the background.

In 1995, I wrote:

1995

I decided to play this HTML colour game that my sister thought of.

But it isn’t a good idea to USE these colours because they aren’t hexadecimal and they won’t work everywhere. In fact, they probably only work here in Netscape if you’re running Windows95!

           ,---~
          /_,^%---  ha
           />  \ ha
      ____/ >     ha
     (#  o) >
      '--~ /|^^
ejm        | \

What a beautiful colour! (On my machine it is, anyway.) It is called “#LLIZARD”. And this colour is called “#BBUNNY”. I just randomly put names into the colour slots. This colour is called “#VKSBEST”. T will be so relieved that he has a colour other than black. !!!!!! I am still trying to blunder my way onto a yellow or white with an “#0SC11WEE”. This sister would be quite pleased with her colour. How disappointing for my sister that her name makes such an awful colour. And this is lovely and quite pleasing for the sister it’s named for. My niece would like that her name turns pink. My mother would be quite happy with this colour.

“#PANCAKES” are one of my favourite breakfasts. We decided not to use “#OATMEAL” in the batter. oooooo (How ironic that “#CRANBERRY” is correct.) But we thought that this would be a good addition to the pancakes. We thought that “#PECANS” would also be good in the pancakes. With plenty of “#MAPLESYRUP”. And of course we’ll have #COFFEE too. (I certainly hope that it doesn’t turn out to be the same colour as “#COFFEE”!) With plenty of “#CREAM”. (The background colour for this page is appropriately named #TOMFOOLERY)

Here is a screenshot that I took of the page when it was on the previous server:

tomfoolery


to llizards

birthday llizard

            `'.
       .`' ` * .
      ;  *  *|  ;
       ' |  || '           ha 
        `|~'||'     ,^%---   ha
        v~v~v~v  \_<   \ ha     A cake? For me????
        !@!@!@!   _/>
       _|_!_!_|_    >
      |  ||    ||   >
      |  ||   ||| /\>,^
      }{{{{}}}{{{  |
 ejm97   __||__     \


To llizards
to javascript animation of a birthday llizard

ASCII-art Christmas Card ’97 (angels)

ASCII-art Christmas Card ’97

                 (   (      )  )  (   (       )(
               <>>8<<>8<><>8<>8<<>>8<<>8<><<>8<>8<>
                  V   V    V  V    V   V     V  V

                           (\  _  /)
                           ( \ O / )
                            (//J\\)
                               X
                              / \
                             /___\
                               "

                        And suddenly,
          there was with the angel a multitude of the
    heavenly host praising God and saying, Glory to God in the
       highest, and on earth peace, good will toward men."

                                      _  /)
     (\  _  (\  _         (\  _  /)   o / )         _  /)
     ( \ c  ( \ c         ( \ O / )  \/)\)   _  /)  o / )
(\  _ (/(\/  (/(\/ (\  _   (//J\\)    |\     o / ) \/)\)   _  /)
( \ c   /|     /|  ( \ c      X       | \   \/)\)   |\     o / )
 (/(\/ / |    / |   (/(\/    / \      |__\   |\     | \   \/)\)
   /| /__|   /__|     /|    /___\      "     | \    |__\   |\
  / |   "      "     / |      "              |__\    "     | \
 /__|               /__|            _  /)     "     =_     |__\
   "          (\  _   "             o / )  _  /)    ||\     "
(\  _  (\  _  ( \ c  (\  _         \/)\)   o / )    |||\ _ /)
( \ c  ( \ c   (/(\/ ( \ c    _  /) |\    \/)\)     ||||\O/  )
 (/(\/  (/(\/    /|   (/(\/   o / ) | \    |\       ||||\/\   )
   /|     /|    / |     /|   \/)\)  |__\   | \      ||||// \  )
  / |    / |   /__|    / |    |\     "     |__\     |||/  __\|
 /__|   /__|     "    /__|    | \           "       |__: //| |
   "      "      (\  _  "     |__\
    (\  _        ( \ c         "  !                   -
    ( \ c  (\  _  (/(\/            \ _  /)          (   )
     (/(\/ ( \ c    /|          ___ \O /  )           -\ _  /)
       /|   (/(\/  / |         /   \/|)   )           - \O / )
      / |     /|  /__|        |   ./||\  )   _____  ( & )/)\)
     /__|    / |    "          \___/ | \    /\ | (_)  -\/|\ 
       "    /__|                /|\  |__\   -- |         | \
    (\ _      "                       "       /|\        |__\
   (  \O     ______________    (\ _ /)                    "
  (   /\/  (\_-_____________) (  \O/@ )                 (\_  /)
  (  /  \_(  \O /___________| (  _|/_ ) \  _ /)        (  O @  )
   |/__    ( /_oo-#=        |  (/( )_\   \-O/  ) _ /)  (   \|_ )
   | |\\  :|(/| \/      _ /)  ;/_)_(_     \_\  ) O/  )  ( / |_\
 (\ _        ||__      |O/  )  _(   )      \|\) /|   )   / ( )
(  \O /      | |\\ =#-@@|   ) /  /  /     __\  / |\ )  ;/__)_(
( /_oo-#=            \/ |\ )     _  /)   //| | __||V      (   )
 (/| \/  (\ _         __||V   ___O / )        //| | _  /) /_|_|
  ||__  (  \O /      //| |     \ \/  )  _ /)    )>==O / ) '  '
  | |\\  ( /_oo-#=               |\ )   O/  )      \/)\)   _ /)
 (\ _     (/| \/               __||V   /|   )        |   .-O/  )
(  \O /    ||__     ejm97     //| |   / |\ )       __|| (=) )  )
 ( /_oo-#= | |\\                      __||V       //| |  \(/|\)
  (/| \/                            //| |               ___||
   ||__                                               // | |
   | |\\


                 (   (      )  )  (   (       )(
               <>>8<<>8<><>8<>8<<>>8<<>8<><<>8<>8<>
                  V   V    V  V    V   V     V  V



    %        @     |V| [ |) |) \ /  /` |_| |) | (` 'T` |V|  /\  (`
   /)\  *   / \    | | [ |\ |\  |   \_ | | |\ | _)  |  | | /--\ _)
   7.~   \  mmm
  /o "\   \,^^%--- |_|  /\ |) |) \ /  |\ | [ \   /  \ / [  /\  |)
  7 & ~    <   \   | | /--\|  |   |   | \| [  \^/    |  [ /--\ |\
 / @ ; \  _/>      
 7` o  ~   __>          'T` /\    /\  |  |     [ |) /\ |V|
/# " 97 \ _\_ \^^        |  \/   /--\ |_ |_    | |\ \/ | |
  <EJM>  [___] \
                                 llizard aka ejm
                                       1997

ASCII Christmas Card 97

To Christmas ASCII art
To my ascii-art index

©ejm 1997, 2004

Advent candles

 

Advent Wreath:

              ,
              |
        ,  ,  |  ,  ,
        |  |  |  |  |
        |  |  |  |  |
        |) | (|( |  |)
      <>8<<<>8<<<8<>>8<>
ejm97   V    V   V   V
1st Sunday in Advent:

              ,
              |
        @  ,  |  ,  ,
        |  |  |  |  |
        |  |  |  |  |
        |) |( |( |  |)
      <>8<<<>8<<<8<>>8<>
ejm97   V    V   V   V

2nd Sunday in Advent:

              ,
              |
           @  |  ,  ,
        @  |  |  |  |
        |  |  |  |  |
        |) |( | (|  |)
      <>8<<<>8<<<8<>>8<>
ejm97   V    V   V   V

3rd Sunday in Advent:

              ,
              |
              |  @  ,
           @  |  |  |
        @  |  |  |  |
        | )|( | (|  | )
      <>>8<<>8<<<8<>>8<>
ejm97   V    V   V   V

4th Sunday in Advent:

              ,
              |
              |     @
              |  @  |
           @  |  |  |
        @ )|( | (|  | )
      <>>8<<>8<<<8<>>8<>
ejm97   V    V   V   V

Christmas Day:

              @
              |
              |
              |     @
              |  @  |
        @ )@( | (|  | )
      <>>8<<>8<<<8<>>8<>
ejm97   V    V   V   V

To Christmas ASCII art
To Christmas gif art
To Advent and Christmas Calendars

HTML for ASCII-art

llizard (aka ejm)So… you want to use ASCII-art on your website & aren’t sure of the HTML coding?

revised August 2000, October 2003, March 2007, August 2008

               /
       \\      \,^%---
       |\\      <_ \ Fear not. It's quite simple....
      ---- ==   >/
     [_____]  __>,^
ejm   |   |  //| |

Warning! I do not claim to be an expert in HTML. But the following HTML and CSS instructions for placing ASCII-art on an HTML page do work, as well as passing the rigorous XHTML and CSS validation tests. They have been checked in Firefox 1.5, 2.0 & 3.0, MSIE 5.5, 6.0 & 7.0, Opera9.5, Navigator 9, Safari 2 & 3 for Windows, Linux and Mac OS’s as well as whatever Lynx version the Toronto Freenet uses. In short, this coding method should work for all the later browsers and many of the earlier ones. (Of course, the colours most definitely do not work in Lynx.)

Even if you don’t plan to draw any pictures with ASCII characters, this technique is particularly good for displaying charts, such as the ASCII character chart on this site….

Your             
                 
  /\ (`/`|| _     +
 /--\,)\,||   (||`|
                 
        goes here

To get the above, here is what you type into your html document:

<pre>

Your             
                 
  /\ (`/`|| _     +
 /--\,)\,||   (||`|
                 
        goes here

                
</pre>   

To display the following characters > (greaterthan), & (ampersand) and < (lessthan), you should replace them with character entities:

type > instead of >
type & instead of &
type < instead of <

Here is an example of ASCII-art using the characters >, & and <

     "", &&&
     / && * >
    /  && _C ,""     EEeeee
    \  )(    /
     \   \__/
      ) (
     (  |
  |   \ |
  |    \|
  |   /_|
  |  /  |
  |__)__)__
  |        |  
  |        |             oo__
  |        |            <;___)------
  | ejm    |       oo__   " "
                  <;___)------     oo__
                    " "           <;___)------
                                    " "

To get the above drawing, copy the text below into your html document. Don’t worry that it looks distorted in your text editor. It will come out correctly on the web.

<pre>
     "", &amp;&amp;&amp;
     / &amp;&amp; * &gt;
    /  &amp;&amp; _C ,""     EEeeee
    \  )(    /
     \   \__/
      ) (
     (  |
  |   \ |
  |    \|
  |   /_|
  |  /  |
  |__)__)__
  |        |  
  |        |             oo__
  |        |            &lt;;___)------
  | ejm    |       oo__   " "
                  &lt;;___)------     oo__
                    " "           &lt;;___)------
                                    " "

</pre>

Please take a look at a chart of the standard ASCII characters.


If you want to center the whole thing, like this,

 

: Your                :
:                     :
:   /\ (`/`|| _     + :
:  /--\,)\,||   (||`| :
:                     :
:         goes here   :

 

Ensure that all your lines are the same length – including any white space. (This will not center in Lynx.)

Here is what you should type into your HTML document.

<center>
<pre>
: Your                :
:                     :
:   /\ (`/`|| _     + :
:  /--\,)\,||   (||`| :
:                     :
:         goes here   :
</pre>
</center>

But as I said, it won’t necessarily be centered in all browsers. Why? … just because.

You may be able to center it in some stubborn browsers by using CSS:

 

! Your                !
!                     !
!   /\ (`/`|| _     + !
!  /--\,)\,||   (||`| !
!                     !
!         goes here   !

 

The following coding would be placed in your stylesheet (more on that in the following section on adding colour). As long as the width is set to less than 100%, and the margins are set to "auto", the ASCII-art should become centered on the page.

.center_me_on_page {text-align:center; width:99%; margin:auto;}

And the following class="center_me_on_page" would be added to the coding on your HTML page:

<pre class="center_me_on_page">
! Your                !
!                     !
!   /\ (`/`|| _     + !
!  /--\,)\,||   (||`| !
!                     !
!         goes here   !
</pre>

Heh, as I said, it should become centered…. However, once again, there is still no guarantee that it will be centered in all browsers. That’s just the way that computers are. There isn’t really much sense in breaking your back to get it to work in every possible situation. All you can do sensibly is get it to look the way you want in as many browsers as you have access to (concentrate on the most popular, such as Firefox, Internet Explorer, Safari, etc. and hope for the best. To help you, there is a wonderful service at http://www.browsershots.org that will give you screenshots of your page in several different browsers.


And if you want to add colour, you can do it with style sheets as well.

It can only be viewed by the later MSIE and Netscape browsers (version 4 and up) that have “style sheets” enabled. Some code goes between <head> and </head> and there is a little additional coding in the body section as well.

To get the following,

  Your                 
                       
    /\ (`/`|| _     +  
   /--\,)\,||   (||`|  
                       
          goes here    

Here is what you should type for your html document. Please note that this is a three step process.

  1. First, open up a text file to create your stylesheet.
    pre {font-family:monospace !important;}
    
    .red {background:transparent; color:#f00;}
    .green {background:transparent; color:#060;}
    .blue {background:transparent; color:#009;}
    
    .white {
    background:#fff;color:#000;
    width:45%;
    margin:auto;
    padding:5px;
    text-align:center;
    border:10px double #ff0;
    }
    

    Save this as “ascii-art_style.css” and place the file in your ascii-art folder. You may have noticed pre {font-family:monospace !important;} at the top there. This probably isn’t absolutely necessary. However, there are some wags out there who play fast and loose with font choices. It’s absolutely essential that <pre> renders a fixed width font so that ASCII-art doesn’t just look like a jumbled mess of characters.

  2. Second, open your HTML file in a text editor. Somewhere between <head> and </head>, type the following code that you see between the double dotted lines.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head>
    <title>coloured ASCII-art</title>
    :::::::::::::::::::double dotted line:::::::::::::::::::
    
    <link rel="stylesheet" href="/ascii-art/ascii-art_style.css" type="text/css" />
    
    :::::::::::::::::::double dotted line:::::::::::::::::::
    </head>
    
    

    Please remember to add the final slash in the style tag with doctype XHTML so your page will validate. Note that when you call up the file with href="/ascii-art/ascii-art_style.css" (note the included leading slash and folder name along with the file name), you can use this stylesheet on any page and in any folder of your site and the ascii-art_style stylesheet will take effect.

  3. Third, still in the HTML file, somewhere under <body>, type the following code that you see between the double dotted lines. Save the file as “ascii-art.html” (or whatever name you like; just ensure that the extension is “.html”) and place the file in your ascii-art folder.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head>
    <title>coloured ASCII-art</title>
    <link rel="stylesheet" href="/ascii-art/ascii-art_style.css" type="text/css" />
    </head>
    <body>
    [...]
    :::::::::::::double dotted line::::::::::::::
    
      Your                 
                           
        /\ (`/`|| _     +  
       /--\,)\,||   (||`|  
                           
              goes here    
    

    :::::::::::::double dotted line::::::::::::::

    [...]
    </body>
    </html>

Let’s say you want to have one example of your ASCII-art on a black background and the rest on white.

To get the following,

  Your                 
   (white background)  
    /\ (`/`|| _     +  
   /--\,)\,||   (||`|  
                       
          goes here    


  Your                 
   (black background)  
    /\ (`/`|| _     +  
   /--\,)\,||   (||`|  
                       
          goes here    

Here are the changes you would make to your stylesheet.

/* everything except the background colour and default text will be the same */
.red {background:transparent; color:#f00;}
.green {background:transparent; color:#060;}
.blue {background:transparent; color:#009;}

.white, #black {
background:#fff;color:#000;
width:25%;
margin:auto;
padding:5px;
text-align:center;
border:10px double #ff0;
}
/* change the background colour from white to black
and default text colour from black to white */
#black {background:#000;color:#fff;}

/* change to a lighter shade of blue for the black background */
#black .blue {background:#000; color:#06f;}
#black .green {background:#000; color:#393;}

And this is what you would place in your HTML file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>coloured ASCII-art</title>
<link rel="stylesheet" href="/ascii-art/ascii-art_style.css" type="text/css" />
</head>
<body>
[...]
:::::::::::::::::::double dotted line:::::::::::::::::::
<div class="white">
<pre>
  <span class="red">Your</span>                 
   (white background)  
    <span class="grn">/\ (`/`|| _     +  
   /--\,)\,||   (||`|</span>  
                       
          <span class="blu">goes here</span>    
</pre>
</div>

:::::::::::::::::::double dotted line:::::::::::::::::::

<div id="black">
<pre>
  <span class="red">Your</span>                 
   (black background)  
    <span class="grn">/\ (`/`|| _     +  
   /--\,)\,||   (||`|</span>  
                       
          <span class="blu">goes here</span>    
</pre>
</div>
:::::::::::::::::::double dotted line:::::::::::::::::::

[...]
</body>

Please note that you can only have ONE id per page. If you plan to have more instances of black background ascii-art, use class instead.

And speaking of the idiosyncracies of some browsers, the people who are in charge of MSIE’s development are children of the universe and like to do whatever they want. Luckily, you can specify coding and text that are JUST for IE viewers. Simply place whatever it is you want IE viewers to see between <!--[if IE]> and <![endif]-->.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>coloured ASCII-art</title>
<link rel="stylesheet" href="/ascii-art/ascii-art_style.css" type="text/css" />
<!--[if IE]>
<style type="text/css">
/*The following will be seen only by those viewing with IE*/
#black {
background:#fff;color:#000;
width:30%;
</style>
<![endif]-->
</head>
<body>
[...]
<body>
</html>

Please consult a colour chart for hexadecimal numbers. Don’t forget to put </span> when you want to change colours. Of course, this method may be foiled by people who like to change the background or text colours of any webpage they are viewing. But, it is their loss if they choose not to see your stunningly coloured ASCII-art.


I hope all that helps you!


                     \ 
                      \,^^%---
                      <\/  \ See? It's easy when you know how....
                      >
                      >^^
                     /| 
ejm                  | \


For more information about HTML and cascading style sheets, please consult W3Schools Introduction to HTML, W3Schools Introduction to CSS, HTML Dog: HTML Beginner Tutorial and/or HTML Dog: CSS Beginner Tutorial.

Many many thanks go to browsershots.org for the fantastic service they offer of testing web design in different browsers and showing the results with screenshots.

© llizard 1997, 1998, 2000-2001, 2003, 2007, 2008 (last modified 13 August 2008)


FAQ | Copyright Myths | ASCII characters chart | character entities | putting ASCII-art on a webpage | “internet safe” colours | choosing colours