More than meets the eye…

One of the reasons I created my new CSS Toy Box blog was to compare browser performance and display. IE might enter the comparison at some future point. For now, it is too much work just to get IE to “play nice”.

Zooming the screenshots is recommended. Objective observations:

• Title - The blurred text is fuzzier for Firefox. There is no title (or lower left copyright) for Opera, although both appear upon hover.
• Avatar (hover) - Opera does not rotate or resize. Although border-radius rounding has been applied to avatar image and frame, image rounding only appears on Firefox.
• Background - Firefox linear gradient appears to be a duller grayish color throughout. Minor color variance noted for the remaining three. All other colors are comparatively standard.
  
• Post Border - Opera border margin is reduced for unknown reasons.
• Slideshow - Although the background is a semi-opaque white color, Opera has a solid text background fill.

I have more detailed observations pending.

my CSS Toy Box
New theme? Not really, this is the Redux theme you start out with. The difference is I have added Custom CSS to alter the appearance. To the html, I have added a slide menu (left) and automated slideshow (right). These were CSS creations with the exception of the slideshow. The slideshow is created with CSS and a very small jquery call for timing transitions and image preloading. The bottom screenshot should give you some indication of my main objective: compacting as much CSS for testing into as few objects as possible. So taking this image into account:

• CSS Automated slide show with semi-opaque background.
• Slideshow contains animations, stills and text All slides either contain links or are links.
• Avatar rotation and size scaling upon hover. A double-solid border was also added to reflect edge transparency between borders. A “glow” box-shadow was added to the avatar frame.
  Did I mention the rounding of the inner border?
• Z-indexing adjustments so the avatar hovers over the posts but below the slideshow.
• The top/bottom borders of the posts have been created with drop-shadows; no images.
• The Return to Top icon was created entirely with CSS. This is powered by a standard javascript void call, the only other script related function of the theme.

Title, menu, background, top/bottom body shadow, slideshow, posts, compacted css and a lot of other “toys” were thrown in for testing. Also the theme should be 100% cross-browser compatible with the latest versions of Firefox, Chrome and Safari.

The theme will also function under Opera with the exception of the title and the tumblr copyright. They are only visible upon hover (you may want to note where they are in the screenshot so you know what you are looking for).

Cool. Time to move on to responsive web design, jquery and php.

When you post or reblog this information, do you even know what an IQ is based upon? Have you ever taken an IQ test yourself? If you have, did it make you feel superior or inferior based on your score? Do you avoid entering beauty contests or other competitions because you are not what is considered “above average”?

Did the IQ test also show the statistics for choice of favorite color…let’s say “blue”? So if blue is your favorite color, your IQ is lower because it scored on the low end of the IQ scale?

Pffft… if you actually believe this holds high value, you can stay at the shallow end.

The whole is more than the sum of its parts. Aristotle, Metaphysica4

EDIT: …And the next morning I wake up to find the whole thing is a hoax. I’ll be laughing for a while.