How to write DOS text on your site

Do you want web site text that looks like DOS text?

Here is the CSS that produces what you see on this page:

.dos {
width: 400px;
background: #000;
padding:30px;
font-size: 9pt;
font-family: fixedsys, LucidaTerminal, monospace;
color: #909090;
text-align: left;
overflow:auto;
border: 5px solid #909090;
}

Good luck!

New added:

I made this for fun, check it out! :)

13 responses » Leave a comment
  1. Marcus said on December 18, 2005 at 12:04 am

    Awesome Jim!
    I like it more retro on the net! :)

  2. Pelle said on December 18, 2005 at 12:26 am

    Never thought about doing something like that but it’s actually quite cool. Thanks for the tip anyway :)

  3. Roger said on December 18, 2005 at 8:30 pm

    Wasn’t the DOS text white and not dark grey? It still looks cool. Nice work.

  4. Timothy said on December 18, 2005 at 8:32 pm

    Excellent programming skills you have there. I came from Digg.

  5. Greg Marra said on December 18, 2005 at 9:03 pm

    I did something similar for a web game I made a while ago, but your effect looks much more like DOS than mine. Cool stuff.

  6. Daniel Smith said on December 18, 2005 at 10:16 pm

    This will be the look of “Web 3.0″ sites :-)

  7. Cheyne said on December 20, 2005 at 8:49 am

    This is very cool. I tried this a year or so ago and just couldn’t get it right. I blogged this tutorial over at thewebdesignblog.com

  8. Glenn said on December 21, 2005 at 4:03 pm

    i love MSDOS. Nice info JIM!

  9. Michael Phillips said on December 22, 2005 at 12:02 pm

    Thanks for this! Very clean way of presenting it, too. And, come to think of it, this is still how it looks on my Linux box outside of the GUI…. (I, too, came from Digg.)

  10. ilushkin said on December 23, 2005 at 8:47 am

    Wow, this is good :) brings out good memories…

  11. josh said on March 11, 2007 at 4:14 pm

    If this is a how-to, then where are the directions to build that CSS script that makes the scrolling dos text. I would like to do it to my pages.

  12. Jim Westergren said on March 12, 2007 at 1:08 pm

    If this is a how-to, then where are the directions to build that CSS script that makes the scrolling dos text.

    Here:
    http://simplythebest.net/scripts/DHTML_scripts/javascripts/javascript_123.html

  13. Deviantz said on July 17, 2007 at 5:07 am

    Wow! very nice..

    Thanks! Keep it up!

RSS feed for comments on this post or Track with co.mments

Leave a Comment

To quote: <blockquote>text to quote</blockquote>

Link to This Page

If you found this page useful, consider linking to it.
Simply copy and paste the code below into your web site (Ctrl+C to copy)
It will look like this: How to write DOS text on your site

Pingbacks


Post Navigation by Category

Previous post in category: Frames with CSS!

Next post in category: 2 big redesigns and 2 new sites