|
My brother, Chris, and I discovered an interesting effect on his website one day. He had
numerous topics listed on his website's home page in paragraph form. After each topic's name
was a date (in parentheses) but the date was a smaller font and different color than the item names.
The page had a black background, the topic names were blue and font size 3 while the dates were
red and font size 1. Here is an example: Topic name (9/2/55) What we noticed was that, due to the layout of the paragraph, often a date (red, size 1) would be surrounded on all sides by topic names (blue, size 3). This created a kind of 3-D effect and looked as though the blue text was actually closer to the viewer than the red text. The blue seemed to rise up off the screen a little. Here is an example: Colorado (9/2/55) New York (9/2/55) California (9/2/55) Texas (9/2/55) Pennsylvania (9/2/55) Missouri (9/2/55) Connecticutt (9/2/55) Arizona (9/2/55) Wyoming (9/2/55) Florida (9/2/55) Oregon (9/2/55) Washington (9/2/55) Mississippi (9/2/55) Arkansas (9/2/55) Virginia (9/2/55) Idaho (9/2/55) Hawaii (9/2/55) Michigan (9/2/55) So, I began to experiment with these colors on web pages. I simply tried to produce interesting effects using different sizes, colors and patterns. Some of my results are below, with short explanations about each. I hope you find them interesting. |
|
First, I used just alternating lines of symbols where the lines switched between larger blue characters and
smaller red ones. Since this is basically a visual exercise, symbols work well and are less distracting
than "readable" letters or numbers. For the first few experiments I chose to use the equal sign (=).
The blue lines are a size 6 font and the red lines are a size 3. All the lines actually have
the same number of characters, however the red lines are shorter simply due to the smaller size of each
character.
Here is the example: |
|
===================== ===================== ===================== ===================== ===================== ===================== ===================== ===================== |
|
Next, I used lines of symbols that changed size, getting smaller toward the center of the image. Also, the lines were all of the larger blue characters and only the center line used the smaller red font. The shrinking of the lines toward the center helps create a 3-D perspective. Here is the example: |
|
===================== ===================== ===================== ========= 3D ======== ===================== ===================== ===================== ===================== |
|
Next, I changed the colors incrementally between blue and red from the outer lines to the center line. This added to the sense of depth and has created a really interesting 3-D effect. Here is the example: |
|
===================== ===================== ===================== ===================== ===================== ========= 3D ======== ===================== ===================== ===================== ===================== ===================== ===================== |
|
Next, I kept the colors incrementally changing between blue and red from the outside in, but this time we used characters on the same horizontal plane. The characters still get smaller toward the center creating a 3-D effect. Here is the example: |
|
|
|
For this experiment, I returned to using only blue and red. I created a square image in which the smaller red characters are surrounded on all 4 sides by larger blue characters -- this is the effect that my brother and I had first observed. This experiment really shows the 3-D effect and how the red charcters appear farther away than the blue ones. Here is the example: |
|
++++++++++++++++++++ ++++++++++++++++++++ ++++++++++++++++++++ ++++++++++++++++++++ +++++++ ooooooooooooooo +++++++ +++++++ ooooooooooooooo +++++++ +++++++ ooooooooooooooo +++++++ ++++++++++++++++++++ ++++++++++++++++++++ ++++++++++++++++++++ ++++++++++++++++++++ ++++++++++++++++++++ |
|
I hope you enjoyed these experimental images. |