Style Detail - Retro

See this style applied to a real page — identical content, different stylesheet.

About This Style

The 90s web retro style is an imitation and tribute to the visual characteristics of the early internet era. Web design at that time was limited by technology (slow networks, limited HTML/CSS functionality, low-resolution screens), forming a unique aesthetic.

This style often appears somewhat 'chaotic', brightly colored, and even garish, but it is also full of fun and the exploratory spirit of the early internet.

Main Features:

Basic Fonts: Extensive use of early system default fonts like Times New Roman, Arial, Comic Sans.
Bright/Clashing Colors: Backgrounds often use bright blue or gray, text colors might be bright yellow or green, with strong color contrasts, sometimes disregarding readability.
Animated GIFs: Extensive use of flashing, rotating GIF icons, such as "Under Construction" signs, email icons, dividing lines, etc.
Table Layouts: Due to immature CSS layout capabilities, HTML tables `<table>` were heavily used for page layout, sometimes resulting in a grid-like or spreadsheet-like appearance.
Pixelation: Low image resolution, icons and font edges might have a noticeable pixelated look.
Visitor Counters: Numeric counters commonly found at the bottom of pages to display visit counts.
Framesets: Using `<frameset>` to divide the page into multiple independently scrolling regions (though now obsolete).
Outset/Inset Borders: Using CSS `border-style: outset` or `inset` to simulate 3D button or area effects.
Blinking Text (`<blink>`): Using the (now obsolete) `<blink>` tag to make text blink.

This style is now mainly used for nostalgic projects, personal hobby websites, or as a unique visual expression, often with a humorous or playful tone.

Example AI Prompt

Generate a 90s Geocities style fan page. Use Times New Roman or Comic Sans, bright clashing colors (blue background, yellow text), animated GIFs (under construction!), maybe a visitor counter, and a table-based layout feel.

(Explanation: Generate a 90s Geocities style fan page. Use Times New Roman or Comic Sans fonts, bright clashing colors (blue background, yellow text), animated GIFs (e.g., "under construction"!), maybe add a visitor counter, and create a table-based layout feel.)

Theme CSS Code Snippet

The following is the core CSS code for applying the 90s web retro style as a global theme (body.theme-retro-90s):

/* 6. Retro - 90s Web Theme */
body.theme-retro-90s {
    --page-bg: #000080; /* Dark Blue */
    --page-bg-gradient: none;
    --text-color: #ffffff; /* White text */
    --heading-color: yellow; /* Yellow headings */
    --link-color: #00ff00; /* Bright green links */
    --link-hover-color: #ff00ff; /* Magenta hover */
    --border-color: #c0c0c0; /* Silver borders */
    --card-bg: #c0c0c0; /* Silver cards */
    --card-shadow: none;
    --card-hover-shadow: none;
    --header-bg: #c0c0c0; /* Silver header */
    --header-text-color: #000000; /* Black text on header */
    --header-shadow: none;
    border-bottom: 2px outset #eee; /* Header outset border */
    --footer-text-color: #ffffff;
    --footer-bg: transparent;
    --button-bg: #0000ff; /* Blue button */
    --button-text-color: yellow; /* Yellow text on button */
    --button-hover-bg: yellow; /* Yellow hover bg */
    --button-hover-text-color: #0000ff; /* Blue text on hover */
    --button-border: 2px outset #eee; /* Button outset border */
    --button-secondary-bg: #ff0000; /* Red secondary button */
    --button-secondary-text-color: white;
    --button-secondary-hover-bg: #800000; /* Dark red hover */
    --button-secondary-border: 2px outset #eee;
    --prompt-bg: #fff; /* White prompt area */
    --prompt-text-color: #000; /* Black prompt text */
    --base-font: var(--font-times); /* Times New Roman */
    --heading-font: var(--font-times);
    --card-border-radius: 0px; /* No rounded corners */
    --button-border-radius: 0px; /* No rounded corners */
}

/* Retro 90s Specific Adjustments */
body.theme-retro-90s .card {
    border: 2px outset #eee; /* Card outset border */
}
body.theme-retro-90s h1,
body.theme-retro-90s h2,
body.theme-retro-90s h3 {
    font-weight: bold; /* Bold headings */
}
body.theme-retro-90s a:hover {
    background-color: yellow; /* Yellow background on link hover */
    color: blue; /* Blue text on link hover */
    text-decoration: none; /* Remove underline on hover */
}
/* Simulate blink effect (use animation) */
@keyframes blink-animation { 50% { opacity: 0; } }
body.theme-retro-90s .blink { /* Add class="blink" to elements */
    animation: blink-animation 1s step-start infinite;
}

Note: To simulate the blink effect, you can add `class="blink"` to elements that need to blink, in conjunction with CSS animations. The actual `<blink>` tag has been deprecated by modern browsers.

Resource Download (Example)

Download a zip file containing a more complete CSS definition for this style (may include specific component styles, font file references, etc.).

Download retro-90s.zip