Celtic Knotwork clip art















To download any of these images, right-click (Windows) or click-and-hold (Macintosh) on them; then select "Save image as..." and choose a directory on your hard drive where you'd like to save them.


THE PIECES (12): All have transparent backgrounds

01BOTKNOT.GIF
Size: 2.57K
01BOTSTRIP.GIF
Size: 326 bytes
01LEFTKNOT.GIF
Size: 2.74K
01LEFTSTRIP.GIF
Size: 288 bytes

01LL.gif
Size: 2.23K
01LR.gif
Size: 2.19K
01RIGHTKNOT.GIF
Size: 2.75K
01RIGHTSTRIP.GIF
Size: 292 bytes
File: 01TOPKNOT.GIF File: 01TOPSTRIP.GIF File: 01ul.gif File: 01UR.gif
Size: 2.6K Size: 322 bytes Size: 2.19K Size: 2.2K


EXAMPLE ONE
Here all of the pieces are put together in a basic example. The second version below has its table border turned on, so you can see the table's structure (The table border's width throws the graphics a little out of alignment).







A couple of things are keeping the pieces lined up properly. First, the top cel of the table has its
VALIGN attribute set to "TOP", and each of the graphics in that row has its ALIGN attribute also set to "TOP". The bottom cel's VALIGN attribute is set to "BOTTOM", as are the ALIGN attributes of each of the graphics. The left cel has its ALIGN attribute set to "LEFT", and the right-hand cel has its ALIGN attribute set to "RIGHT". In the side cels, <BR> (line break) tags force each graphic below the previous one.




^transparent GIF



Finally, at the top of the center cel there's an invisible, trasparent GIF file that's sized to be 240 pixels wide. This forces that cel to be exactly wide enough to keep the border pieces in alignment.
That GIF file is in fact only 2 pixels wide by 2 pixels high; I use the image's
SIZE attributes to force it to whatever size I want. By doing this, your browser just downloads one tiny file and I can then use it in all sorts of sizes to adjust the spacing of the graphics I'm placing on the page. Don't you just love this stuff?

Remember to read the Layout Tips.


EXAMPLE TWO

     







     

This example demonstrates how you can adjust the border's size by repeating or dropping out elements. Now our design's quite short and wide, after we've deleted the center knots from the side and added more knot and straight sections to the top and bottom.
Also you can see that due to the graphics' transparent background, we can add a background color to our table and the border design will "float" over it.

Remember to read the Layout Tips.


EXAMPLE THREE




















These two final samples show how the same extensions can be done vertically. Just remember that in those side cels a  <BR> tag comes after each graphic so that a line break will force the next graphic below.
The version on the right is a pretty versatile frame - and don't forget that its size can be easily adjusted by adding or removing those little border bands.

Remember to read the Layout Tips.




    LAYOUT TIPS

1. Remember that each of these pieces is downloaded only once by the web browser. That means that there's no additional download time for each of the repeating sections.

2. You should be very cautious about placing text inside a border that's closed on the bottom; because the size of fonts will vary from one system to another, on some systems your border may develop gaps between the sections. It's safest to use a graphic in the middle so you have control over its size.

3. Be sure that your table sets its border size, cel padding, and cel spacing all to zero - otherwise there will be gaps in the design. On some browsers if these attributes are not set they may default to one, not zero.

4. This design uses a transparent background (the exposed interior is transparent) so you can set the table color to whatever you like, as in some of the examples.

5. Using a small transparent GIF, as I do here, is a handy layout trick. HTML isn't a perfect layout medium and sometimes you just need to force your elements to go together the way you want them.





THIS PAGE SPONSORED BY

Celtic T Shirts

These designs are all copyright Bradley W. Schenck, 1997 & 1998, but may be used without fee by individuals for non-commercial web projects. If you're building your own web site, and you don't make money from the site, feel free to use these designs. If you are profiting by building a site for someone else, do not use them. If you are creating your own commercial site, do not use them. If you want to use one of these designs as a tattoo, a stationery design for your personal email, or want to make an object for your own use (not for sale) using one of these designs, go ahead. It is specifically prohibited for anyone other than the artist to include these images in a collection of clip art, whether for profit or not. Got it?

If you use these designs on your web pages, I would be grateful for a credit and, if possible, a link to: http://www.webomator.com/bws.

BWS - Home

 
"Trade them for a package of sunshine
and flowers.
If you want the things you love, you must
have showers.
So when you hear it thunder don't run
under a tree,
There'll be Pennies From Heaven for you and me."

 

"Pennies From Heaven" by John Burke & Arthur Johnston, 1936
 

Celtic  T Shirts, Hoodies, & Greeting Cards


HOME || ART STORE || RESUME || GALLERY || FREE ART! || LINKS

If you have linked to this page through a search engine or other link, you may not see the navigational bar
at the top of the window. Click
HERE to correct that, or to break out of another site's frameset.
Email: bws@webomator.com    copyright Bradley W. Schenck, 1997 - 2005

 
Free Clip Art Home Bradley W. Schenck's Home Page What's Celtic Interlace? Celtic Knotwork Backgrounds Cl;ip Art Celtic Gripping Beasts Clip Art Celtic Art Circles Clip Art Celtic Design Panels Clip Art