Running Borders with a CSS

This is one of experiments i tried with CSS and it came off really well. It’s a neat little trick which if used properly can give you amazing results.  See the demo page below.

Demo Code

Creating the border

To create the border we will be using a website called stripegenerator. It generates some cool lined patterns which you can use in your projects. For our purpose we cannot use vertical or horizontal lines, the pattern must have some rotation to it. The default red and white one is good for us, so lets hit download and save the pattern. Now lets open the pattern in photoshop.

Animating the pattern

Now we need to animate the pattern in photoshop. To do that first lets open the animation window in photoshop its in windows >> animation.

Now we need to duplicate the background layer and name it 01.

Similarly we will make one more copy of layer 01 and name it 02.

Now lets make the background layer black this works only as a visual guide when we animate the layers. Go into edit menu >> Fill, then fill it with black color.

Now we hide layer 01 and move layer 02 to the extreme right of the canvas so that its completely out of it. You can use the right arrow key to precisely move it one pixel on each nudge.

Now turn on visibility of layer 01 and select both the layers .

In the animation window we need to create another frame.

Now its animation time. With both layers selected and frame 2 selected move the layers to the extreme left such that layer01 goes out of the canvas and layer 02 comes in completely on the canvas. To check that everything is perfect see to it that both frame 1 and 2 are exactly same. Reason why we do this is that we need to make a looping animation (animation which runs over and over again without jerk.) so most important in any animation loop is that first and the last frames are identical, hence its very important that frame 1 and frame 2 should look exactly same else your animation will be jerky.

We will now be adding more frames to the animation called tweens or inbetweens a term came from classical animation. Tweens are nothing but frames between two main frames called keyframes, they are the inbetween instances of a frame which creates the illusion of movement. Below is a diagram which can explain you better.

Suppose in our a ball moves from point A to point B in time then Points A & B will be our KeyFrames and all the other frames along the motion path will be the inbetween frames.

Ok now with those animation basics off the plate and lets get on with our animation. From the animation pane click on the arrow at top right corner to open a options menu. Select the tween option.

This is the how the tween options look like.

Here’s what each option means.

Tweent with: By default it’s selection when more than one frames are selected. It simply means put new frames between the two main frames.

Frames to Add: It specifies the number of frames to be added inbetween. By default its five but it can be any number.

Layers : It specifies which layers will be affected by the tween. By default it’s All Layers we will keep it that way, but it can also be changed to affect a specific layer if we need.

Parameters: Parameters are the properties which can be affected by tweens. In more easy way the properties of a layer that can be animated. By default all the checkboxes are checked, but for this tutorial we only focus on changing position so we uncheck opacity and effects boxes.

Here’s how we changed things in the tween dialogue. Just hit ok and it will create 15 frame in between frame 1 and 2.

Now the animation part is almost done, next step we will do is to delete the last frame.

The we add a little delay to all the frames. Delay means the animation will delay by a specific time fraction. To do that we select all the frames and click on the small black triangle on bottom right corner of each frame. It opens a few options choose 0.1 sec delay in that and we are done.

Below is the resulting animation.

Building the Borders

With pattern done now we will write the code to make all of this work. Below is the code for it.

We made two simple boxes with some dummy content in it.

Now for the CSS: We are using two classes here one called patternbox and other is called boxconts.

.patternbox: This class places the animated gif as a background of the outer box. It also has a padding of 5px which acts as border width. You can increase it to get a thicker running border or you can reduce it to make border thinner.

.boxconts : This class holds the contents of the box. Important property here is to put a bckground color to this one so that the animated pattern is not showing through the transparent box. You can see the results below with and without background color.

Click Here to see the demo of what we created.

Conclusion

Trick here is the background color of the inner box which masks the animation giving us a running borders look. Nevertheless nice and handy little trick to give some great results you can see the all the demos below to see the possibilities on what all you can do with it.

Demo Code