The PCG-Freepack, content of which could easily cost you $300 plus elsewhere, is yours for free!
Use extra space available on your site to display advertisements
The PCG-Freepack, content of which could easily cost you $300 plus elsewhere, is yours for free!
Included in this pack:
PLUS!!
light security scripts (helps protect your pages from being copied)
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
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.
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.
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
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
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)
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
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
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
this link drops a shadow on mouse-over
,
