CSS Tape Effect - My take on the tape
I run into problems sometimes when I am figuring out how to code a project, layouts, etc. Instead of dwelling on the problem, I take a break and look for little toys to play with. This time, I found some CSS for a piece of semi-transparent tape that required no image.

I found several examples, but invariably, the top image most common (without the angle transform I made). If you tell me it’s supposed to be a piece of tape, I’ll believe you…for the time being. I usually code something like this and leave it in a place where it is visible to me for a while. In this case, after a brief period of time, the piece of tape looked exactly like what it was: a semi-transparent rectangle.

I chose to tweak it with a linear gradient background, some corner border radius “deformities” and semi-opaque left/right dashed borders for a serrated edge look. I’m happy with it.

3 notes
Tagged: css, html, web design, .
  1. psdtohtmlshop reblogged this from ohnemitleid
  2. 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!