The PCG-Freepack, content of which could easily cost you $300 plus elsewhere,  is yours for free!


Download Freepack!

Use extra space available on your site to display advertisements
This page is simply loaded with handy scripts, tools & graphics which you may implement on your own site provided that you observe the open license rules, as follows:


A nifty picture slider to your right - fun for your site as is or use it to display your own pictures

Included in this pack:


  • Graphics  featured here in are in flat  jpeg / gif format (when in .gif, graphics normally have transparent backgrounds, but just check)
  • Navigational scripts as external files
  • "Leapfrog" image-viewer (see above)
  • Custom Scrollbar-face script (visible in IE only)

PLUS!!

light security scripts (helps protect your pages from being copied)


  • no right-click
  • no drag & select
  • no image bar

Instructions:

Simply study the code of this page and follow suit - scripts are easy to copy & paste.  Remember to customize your link and /or button names


The Grid

PCGrafix, including this very page, is developed along the responsive grid from foundation.com. The full package can be downloaded from them, but here is the mark-up in a nutshell, with the corresponding CSS in the "grid-css" stylesheet: (we color-coded the columns to make them visible)

twelve column row spans the whole width

2 col's

2 col's

2 col's

2 col's

2 col's

2 col's

What it basically boils down to is that a container is created which holds a row which holds the specified columns. Rows do not strictly need to be surrounded by a container div, but it is the container that holds the margins, specifically a bottom margin, which creates a differentiating space between rows. Columns may be specified in any number of combinations between 1 and 12. We show you just two rows here, but you can see the entire grid at its original source. (foundation.com) Rows and columns are of course nestable, like these obviously are, but when standing alone, will span the entire width of the screen.


Navigation: Horizontal

Emerald Lustre Iconmenu: 10 most-used links as iconbuttons with rollover effect and bubbletips, on same colour gradient background - bubbletips are css style-able as illustrated; if not required just exclude them from your mark-up.

sitemap helpon serviceson register


A "Silverpipe" drop-down Menubar. (Note: don't forget the "onload" call in the body-tag)





CSS Tabmenu: these glitter-tabs resize themselves automatically to fit the wordlength of the link




Premium Offer

In our shopping area, you'll find corresponding graphical components as follows:

Lustre icons: (as illustrated) Extremely comprehensive collection comprising 21 commonly used icons, each with its rollover counterpart, in a variety of styles and sizes -

Furthermore, each collection is available in each of the following colors -


Metalic Pipes:

This collection offers menu components in gold, silver, bronze and copper, each with rollover and drop-down counterparts, as well as vertical versions. For added measure, we throw in a lacquer (black) finish. (Button sizes are as illustrated in the menu)


Glitter Tabs:

A veritable variety of tabs for all applications - horizontal, vertical, left and right; including sliced tabs as used in the menu and background slices for repeats. You will also find a couple of scalable gradient blocks - oblique and horizontal

Apart from the colour featured in the menu, collections are available in the following:

Of course, all of the above are also available as smooth tabs

Note: sizes are as illustrated in the menu

Navigation: Vertical

Concertina Menu (handy in small spaces like sidebars, or for your sitemap) Note: this menu causes rest of page to stretch along - if you find this undesirable, stick to a standard menu

Expand All | Contract All
  • Home
  • About
  • Information
    • Privacy
    • Terms of Use
  • Contact
  • Products
    • For girls
    • For boys
    • For babies
      • Clothing
      • Toys
  • Support











A one-level vertical "glossy" menu in a pretty little box



Premium Offer

In our shopping area, you'll find corresponding graphical components as follows:

Glossy Menu: (as illustrated) - in this collection, you get all this

,

in all these colors


Antique Scrolls:

Two color variations with link backgrounds and rollovers, plus two grungy looking variations

There is also a metalic version, which includes chrome, silver, gold and bronze, as well as a mottled one

Image Viewers

This image gallery will allow any number of thumbnail images, as long as you don't create a loadtime problem.

  
  
  

Script Source: http://www.portaldepot.net



"Expando"

Description: Expando is a simple script for folks who want to have an image expand onMouseover (to its actual size). This lets you display large images at a reduced size initially (aka thumbnail size), and have them dynamically expand when the mouse rolls over them. Installation is simple- install the script in the HEAD section of the page, then give your "thumbnail" images a CSS class of "expando". These thumbnail images should have an explicit width/height attribute that's less than the actual image's dimensions, so the script has something to expand to. Expando Image is AJAX friendly, meaning imported content with images with the "expando" class will be immediately recognized by the script.

Script Source: http://www.dynamicdrive.com/



Albumflip

Display your portfolio or photo collection with this nifty realistic looking bookflip script. Pictures may be hyperlinked to detail pages. (We include left and right background graphics into which you may insert your own pics) Script source: dynamicdrive.com (Note: don't forget the "onload" call in the body-tag)

My Art Album



Extra's

Background blocks/frames for short paragraphs

You may find these graphic backgrounds handy if you have blocks of content which you'd like to stand out on your pages. Each scalable block measures roughly 300x300px and may be lifted off the included sheet (don't pay attention to the slight distortion of the enlargement)



CSS-styled frames

Do you like the roundcorner frames in which we display a lot of our content? Well, you're welcome to it - here is the markup; you will find the css in our freeglobals stylesheet


This is a styled-frame with only slight round corners. Corners may be adjusted according to preference; same goes for colours



Content Heading

This styled-box has a prominent title-bar



This is a styled-box with a solid background colour


The border of this styled-box has corners which are more pronounced, and a "content" class which also has a border. The inner border has normal corners

Content Heading

This styled-box has a padding of 5px, which sets the title-bar apart. Presenting content in this way also looks neat

The border of this styled-framebox has corners which are more pronounced, and a "content" class with a solid background and round corners.


Flip your headings sideways with this cool css and modernizr.js duo

Script source: http://css-tricks.com/


No-image text perspective and drop-shadows

Who says CSS is boring? Have your fun with this lot!


Normal perspective

Deeper perspective

Perspective with mouse-over effect

Shadow is close and quite dark
but the smaller the fontsize,
the less defined the shadow becomes
until it is quite blurry


this link drops a shadow on mouse-over