…and On and On

Now that the gradient background with the image overlay was successful, I tossed in some before/after pseudo elements to see what could be accomplished.
Left animation - Eight frames (Animation begins with a blank, black frame):

  1. Black background
  2. Gradient fill
  3. Body background image
  4. Font size table
  5. Z-index image overlay (Body:before)
  6. Envelope right inner box-shadow (Content:before)
  7. Envelope left inner box-shadow (Content:after)
  8. Top box-shadow (Body:after)

Fun! CSS is very entertaining, if you add your imagination to spice things up :)

2 notes
Tagged: css, html, web design, dashboard, gradient, .
  1. ohnemitleid posted this

Welcome to my CSS Toy Box

This is where I test CSS toys. You are currently looking at a variant of Steven Bradley's 3 Column CSS Layout.

This Simple Auto-Playing Slideshow might move a bit fast, but each slide either contains a link or actually is a link. There is a wee bit of jquery in use for the slideshow to function.

The Title is a good example of a CSS Toy. Blurred text changing to 3D Text with a CSS timed transition.

Initially all I wanted was to create Post Drop-Shadows without using images. This rapidly grew into something else.

I've seen a lot of fancy tricks for links, but most of them required javascript or some variant. I wanted a pure CSS Slider menu, hopefully one that allowed images.

Please take a look around. There are lots of little things I have toyed with, from the rounded inner corners of the avatar frame to the linear gradient background with a semi-opaque "noise" filter overlay.

I'm trying to utilize what I have learned, not just post links to what you might be able to do with CSS. Enjoy!