code post

jQuery CSS Featured Content Slider

2011-07-31T09:27:00.000-05:00

Auto-Playing Featured Content Slider

Great Tutorial @ CSS-Tricks.com

- Auto-Playing Content Slider
- Spotted on Twitter

If you like the Auto-Playing Slider you may want to check-out:
- Start/Stop Slider
- Spotted on Twitter

Technorati tags: jquery, content-management, web-design

Label: jQuery |

10 htaccess snippets and new css3 selectors

2011-05-30T20:19:00.002-05:00

10 USEFUL .htaccess Snippets

http://www.catswhocode.com/blog/10-useful-htaccess-snippets-to-have-in-your-toolbox

My fav: Remove file extensions from urls

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.html -f
RewriteRule ^(.*)$ $1.html
# Replace html with your file extension, eg: php, htm, asp

New CSS 3 Selectors

http://perishablepress.com/awesome-new-css3-selectors/

My fav: Reverse/Parent Selectors

a < img { border: none; }

Technorati tags: css3 web+design htaccess snippets

code post |

Amazing Child Sings PRAY for Japan

2011-04-01T15:26:00.002-05:00

Connie Talbot Sings Pray - Music Videos

JAPAN MEGA DISASTER • Part 1 • Part 2 • Part 3 • Part 4

Technorati tags:
codepost
connie-talbot
video
GodTube
child-singer

code post |

Free Brushes, Backgrounds and more.

2009-06-05T11:33:00.004-05:00

Graphics-Illistrations.com | Photoshop brushes & design tools, swirls, tatoo, grunge, paisley and many more, free downloads and tutorials

Join the GREEN BULB GANG - It's free!

Technorati tags:
codepost
webdev
gimp
graphic+design
brushes

code post |

Learn GIMP - Part 1

2009-04-11T09:58:00.004-05:00

I just came across some great Gimp sites, includes several video tutorials to learn Gimp in a flash. If your still learning, these tutorials will be extremely useful for teaching the more advanced Gimp functions. I'll be watching the video's ... more on this in Learn GIMP - Part 2

Download a copy of GIMP

Learn Gimp Fast!
- Gimp Tutorials -
Step by Step Gimp Training

Here's a couple of great BRUSH tutorials!

HOW-TO Create Your Own Brush and Add to Gimp Brushes

GIMP SPLASH SCREENS TUTORIAL
- also includes all Gimp User Folders "Documents > username > .gimp-2.x > folder name" (Vista) and free downloadable Gimp Splash Screens

http://deladedesign.blogspot.com/2010/09/gimp-splash-screens.html

GIMP TUTORIALS

Technorati tags:
codepost
graphic
gimp
graphic+design

code post |

50 Freebies Every WebDev Needs

2009-03-20T09:05:00.003-05:00

Just found this great resource for webdev'ers. Lot's of graphics such as icon sets, brushes, even fonts - take a peek ;-)

@DesiznTech
http://desizntech.info/2009/03/50-freebies-you-should-have/

-Thanks DesiznTech for these excellent resources!
I'm sure I will be using some of them in the very near future.

Link to this post:

Technorati Tags: codepost, webdev

♥ Post This! ♥ Help Raise Awareness of CdLS <> Join iGive!

<< CODEPOST | RSS | CONTACT | URLAGE

Scripts to Protect Your Images

2009-03-02T19:16:00.005-06:00

How to Protect Your Images from Bandwidth Thieves

Author, Christopher Heng, describes a PHP (CHImageGuard PHP Script) and .htaccess scripts for protecting your images and bandwidth from theft. Extremely helpful information with a complete tutorial for each... must read!

codepost
<< code post |

Best Wishes for a Great NEW YEAR!

2008-12-27T17:00:00.004-06:00

Watch this Amusing JibJab Holiday Movie:
IT'S A WONDERFUL LIFE - Sendable eCard

Try JibJab Sendables® eCards today!

I'm a JibJab star!
codepost
<< code post |

I believe in Santa!

2008-12-16T06:45:00.010-06:00

Brandon with Santa

(my youngest grandson)

from CODE POST

Print and Send a letter from Santa
http://blog.urlage.com/#santaletters

DECEMBER Holiday Deals
http://blog.urlage.com/2008/12/december-holiday-deals.html

codepost
<< code post |

Tutorial: FORM TRICKS

2008-11-13T19:09:00.016-06:00

TABINDEX, Focus onLoad and Lose the VALUE Text
Article by Joe Burns
Copyright Internet.com All rights reserved.
This article is online:
http://www.htmlgoodies.com/tutorials/forms/article.php/11895_3479201_2

Lose the VALUE Text
Note the text inside the text boxes in the example form; added the attribute VALUE="some text" to the input tag.

Click inside the box:

The "default text" is removed when box is selected/clicked.

Here's the code:

<FORM> <INPUT TYPE="text" VALUE="Default Text" SIZE="45" onFocus="this.value=''"> </FORM>

It's JavaScript, when focus is given to the box (onFocus), the value of the box (this.value) is set to nothing. Note the empty quotes at the end of the code; the quotation marks must be used without a space; any space added between quotes, will appear in the form element.

View more tricks ...
- TABINDEX - The Command in Action
- Focus onLoad
- Lose the VALUE Text

Get PLUMB - Blink - In My Arms
Listen to or visit PLUMB at MySpace.com/plumb

codepost
forms
blog
Plumb

<< code post

NEW Items at CODE POST Shop!

2008-10-21T10:45:00.014-05:00

(reflection not included)

Visit the Code Post Shop for your custom product.
or
Copy/paste this address:
http://www.cafepress.com/codepost

Custom Products by Request >> SUBMIT A REQUEST

VOTE
wearables
tshirt
tees
gifts
codepost
clothing
sale
shop
campaign

<< code post

OCTOBER GRUNGE Calendar Wallpaper

2008-10-01T08:34:00.006-05:00

Just in time for October!
Get this free OCTOBER GRUNGE Calendar Wallpaper for your desktop.
(Click the MENU drop down arrow then click SORT BY DATE)

Download Link:
[http://www.box.net/shared/jppkqa6qlt]

-CREDITS-

*Brushes*
bsilvia.com
obsidiandawn.com

I know that I have brushes from many other authors, and I'm trying to identify the authors for each. If you see something I created with your brushes, please contact me or comment. I would be more than happy to credit you and link to your site or other as requested.

<< code post |

Generate Color Scheme from Image

2008-10-01T07:07:00.003-05:00

"Generating a Website Color Scheme from an Image"
How can a color scheme be extracted from an image? The problem with determining a color scheme is that there are too many colors in the image, yet the algorithm to convert the image must find a set of colors that most accurately represents the original. Atalasoft provides the code right here.

The Code Project also contains hundreds of articles, free source code samples and applications to help in your day to day programming. Why not give it a try!

25+ MUST-HAVE Web Design Resources

2008-09-23T14:05:00.002-05:00

If you can't find what you need with these resources, you probably won't find it!

BONUS: Website Design Tutorials and Articles

more ...
CSS-Tricks | Create A Unique Contact Form

Sticky-Footer here's the CSS

Simple Four Step Print-friendly Version:
The page header should contain links to two CSS documents, one for the 'screen', and one for 'print':
To use remove the "." after the "<" - ex:

<.link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen"/>
<.link type="text/css" rel="stylesheet" href="printstyle.css" media="print"/>

The first line is for the screen version (using media="screen") and the second for the print version (using media="print").

Create the print style CSS document:
1) Open a blank plain text document (ie: Notepad) and save it as printstyle.css

2) Point the 'print' CSS command to the new document like this:
<.link type="text/css" rel="stylesheet" href="printstyle.css" media="print"/>.

3) Enter CSS commands until the on screen or preview matches the 'print version' desired. (Assumption: Your using a WYSIWYG editor.) Use the display: none command for all navigation, decorative images and non-essential items - omits them from the printable version. Go to Print Different for more on printable versions.

4) Upload to server when completed.

<< code post |

NEW! TATTOO Brushes - Photoshop or Gimp

2008-08-28T12:37:00.005-05:00

BRUSHES:

PNG:

VECTORS:

<< code post |

NEW! AUGUST 2008 Calendar Wallpaper

2008-08-04T10:32:00.005-05:00

Click Image » Go to Download Site

New AUGUST 2008 Calendar Wallpaper
Colors: pink/yellow/white
or go to: http://www.box.net/shared/63t8v94gsw

-CREDITS-

*Brushes*
bsilvia.com
obsidiandawn.com

I know that I have brushes from many other authors, and I'm trying to identify the authors for each. If you see art I created with your brushes, please contact me or comment. I would be more than happy to credit you and link to your site or other as requested.

<< code post |

Associated Content | Why I Love GIMP 2

2008-07-27T10:56:00.001-05:00

Why I Love GIMP2
the free photo editing program, GIMP2, has many features to offer its users
View more »

<< code post |

JUNE 2008 CALENDAR by joyousjoym on flickr

2008-05-25T10:35:00.002-05:00

Expressly June, originally uploaded by ♫ joyousjoym.

- JUNE Calendar by joyousjoym on flickr (Computer Woes!!! Group)

view calendar: http://www.flickr.com/photos/joyousjoym/2449186628/

created with fd's Flickr Toys: http://bighugelabs.com/flickr/

-CREDITS-

*Brushes*
bsilvia.com
obsidiandawn.com

I know that I have brushes from many other authors, and I'm trying to identify the authors for each. If you see art I created with your brushes, please contact me or comment. I would be more than happy to credit you and link to your site or other as requested.

calendar

<< code post |

Desktop WALLPAPER and JUNE Calendar

2008-05-17T08:53:00.009-05:00

FIRST LOOK!
My DESKTOP WALLPAPER Creations and JUNE 2008 Calendar Wallpaper

I used GIMP with several beautiful brushes to create the wallpapers.
All filed are '.png' and are free to download and share with others.
All have both 1024x768 or 800x600 size shown in the file name.
The JUNE 2008 Calendar 'be_still' has additional sizes.
I will re-size or add a file format for any of them, request by commenting to this post.

COMING SOON
I will name the brush authors in this post and add more to the collection as time allows.

-CREDITS-

*Brushes*
bsilvia.com
obsidiandawn.com

I know that I have brushes from many other authors, and I'm trying to identify the authors for each. If you see art I created with your brushes, please contact me or comment. I would be more than happy to credit you and link to your site or other as requested.

Download/Preview Box:

http://www.box.net/shared/wtaznim0wo

or copy/paste this address:

http://www.box.net/shared/wtaznim0wo

wallpaper

calendar

<< code post |

SNIPPET: Show or Hide Text

2008-05-15T13:11:00.029-05:00

UPDATE! Can anyone tell me why this code is not working or is it working for you?
Please comment to this post with the text 'working or not working' included.
\--0000-------------------------------0000-------------------------------0000--/

STEP 1 -
ADD this CSS before the <./head> tag:

.posthidden {display:none}
.postshown {display:inline}

STEP 2 -
ADD this javascript before the <./head> tag:

<.script type="text/Javascript">

function expandcollapse (postid) {

whichpost = document.getElementById(postid);

if (whichpost.className=="postshown") {
   whichpost.className="posthidden";
}
else {
   whichpost.className="postshown";
}
}
<./script>

STEP 3 -
Create a unique id for each show/hide sub topic.
ADD HTML code like this: (user defined text/paragraph/titles)

<.a href="javascript:expandcollapse('extss')">External Style Sheet<./a>
<.span class="posthidden" id="extss">You can change the look of your entire web site by changing one file. Each page must link to the style sheet using the link tag. The link tag is within the head section like this:

<.link rel="stylesheet" type="text/css" href="style1.css">
<./span>

<.a href="javascript:expandcollapse('intss')">Internal Style Sheet<./a>
<.span class="posthidden" id="intss">Use an internal style sheet when a single document has a unique style. Define the internal styles in the head section by using the style tag, like this:

<.style type="text/css">
body {margin: 0; padding: 0; font-size: 100%; text-align: center; background-image: url("http://...images/bg.gif") no-repeat}
p {margin-left: 10px}
<./style><./span>

<.a href="javascript:expandcollapse('inlss')">Title Three<./a>
<.span class="posthidden" id="inlss">For inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. Like this:
<.p style="border: 2px none rgb(0, 0, 0); padding: 3px; font-family: cursive; font-size: 150%; color: rgb(255, 0, 153); text-decoration: blink;">INLINE STYLES<./p><./span>

EXAMPLE:
External Style Sheet

You can change the look of your entire web site by changing one file. Each page must link to the style sheet using the link tag. The link tag is within the head section.

Internal Style Sheet

Use an internal style sheet when a single document has a unique style. Define the internal styles in the head section by using the style tag.

Inline Styles

For inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property.

javascript

snippet

<< code post |

SNIPPET: Round Corners Box - #0099CC

2008-05-13T15:35:00.025-05:00

CSS:
.rbroundbox { background: url(nt.gif) repeat; }
.rbtop div { background: url(http://...) no-repeat top left; }
.rbtop { background: url(http://...) no-repeat top right; }
.rbbot div { background: url(http://...) no-repeat bottom left; }
.rbbot { background: url(http://...) no-repeat bottom right; }

/* optional: height and width */
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 7px;
font-size: 1px;
}
.rbcontent { margin: 0 7px; }
.rbroundbox { width: 50%; margin: 1em auto; }

HTML:
*<.div class="rbroundbox"><.div class="rbtop"><.div><./div><./div>*
<.div class="rbcontent">
<.h3>WORDS<./h3><.p>An example of words.
css,html,xhtml,tutorial,color,graphic,
design,free,help,widget,webmaster,create,
template,blog,guide,
reference,scripts,markup,
web design,freeware,how-to,howto,
html,xhtml,style<./p>
<./div>
*<.div class="rbbot"><.div>Round Corners Box<./div><./div><./div>*

* IMPORTANT! Make sure the html code does not include line breaks between the * else, the round corners will not appear correctly. *Specifically: Before <.div class="rbcontent"> or after the <./div> tag immediately following the <./p> tag.

EXAMPLE:

WORDS

An example of words.
css,html,xhtml,tutorial,color,graphic,
design,free,help,widget,webmaster,create,
template,blog,guide,
reference,scripts,markup,
web design,freeware,how-to,howto,
html,xhtml,style

Round Corners Box

--Made with the CSS Rounded Box Generator--

Try the CSS Rounded Box Generator =>
http://www.neuroticweb.com/recursos/css-rounded-box/index.php?idioma=en

snippet
css
round corner box

<< code post |

Get a Free BIRTHDAY KEEPER!

2008-05-02T12:57:00.020-05:00

Can't Remember Birthday's? I've got the solution ...

BIRTHDAY KEEPER

Screen shot:

Birthday Keeper v1 - Upload a doc

BIRTHDAY KEEPER is a very small one (1) page .pdf file.
Super fast downloading 32 kb and easy printing!

As our family continues to grow, I'm realizing I can not remember all the birthdays. We have three grown children with their own families - one with two children, one with three children and one with five children, whew! Not to be out done by our his and hers sides of the family both being large. That's a lot of birthdays to recognize each year!

I recently created BIRTHDAY KEEPER as a helper. I use two pages to keep birthday's right next to the calendar for quick and easy access.

It's been so helpful, I had to share it!
You can download, print, share and enjoy it.
Use this link to download:
Get BIRTHDAY KEEPER v1 - It's free!

^^^^^^^^^^^^^^^^^^^^^^^^^^^
Link Back If You Like BIRTHDAY KEEPER
^^^^^^^^^^^^^^^^^^^^^^^^^^^
I'd be grateful if you'd leave a comment and
link back to this post on your site, blog or profile! ;-)

Here's a shortened URL to use for link back:
http://blog.codepost.net/#birthdaykeeper

Here's the html code: (remove '.' after '<' to use)

<.span style="color: #0099CC;font-family: Trebuchet MS;font-size: 100%;font-weight: bolder;text-align: center;text-transform: uppercase;background-color: #CCFFFF;border-style: dotted;border-width: 2px 2px 2px 2px;padding: 3px 3px 3px 3px;"><.a href="http://blog.codepost.net/#birthdaykeeper" target="_top" title="Get a free BIRTHDAY KEEPER and never forget again! Instant Download - No Signup">Get a free BIRTHDAY KEEPER!
http://blog.codepost.net/#birthdaykeeper<./a><./span>

Code preview:

Get a free BIRTHDAY KEEPER!

^^^^^^^^^^^^^^^^^^^^^^^^^^^

BIRTHDAY KEEPER alternate (shortened) download link:
http://tinyurl.com/57trgs
or copy/paste this address:
http://www.filecrunch.com/fileDownload.php?sub=eca801038004e586ebd79ee160974f54&fileId=144052

PS - Contact me! I take special requests to create a custom BIRTHDAY KEEPER just for you!

organize

♥ Post This! ♥ Help Raise Awareness of CdLS <> Join iGive!

<< code post |

Announcement: New FEED Graphics and Links

2008-04-25T10:46:00.010-05:00

Here's your chance to try out the brand new graphics - skip to subscribe and share!

The NEW badges were made with BUTTON MAKER by Silkscreen from Jason Kottke.

[REF: http://kalsey.com/tools/buttonmaker/]

Excellent FREE Tool!

<< code post |

Browser Background Transparency

2008-04-14T16:22:00.032-05:00

Opacity scale:
1 = entirely opaque
0 = entirely transparent
-------------------------
Firefox, Opera, Safari -
To make a <.div> 50% transparent, use this code:

div { opacity:0.5; } /* 50% opacity */

IE6:
To make a <.div> 50% transparent, use this code:

div {
filter:alpha(opacity=50); /* 50% opacity */
height:1%;
}

Note: 'height:1%' used to give the <.div> 'layout'.

Setting the child elements of the transparent <.div> to be fully opaque works. Use this code:

div * {
filter:alpha(opacity=100); /* 100% opacity */
postion:relative;
}

<----- final ------>
div {
background:transparent url(transparent.png);
}

and for IE6

<.!--[If IE 6]>
<.style type="text/css">
#transparent {
background:#fff none;
filter:alpha(opacity=50);
height:1%;
}
#transparent * {
filter:alpha(opacity=100);
position:relative;
}
<./style>
<.![endif]-->

Note: Tested in IE6 and 7, Firefox 1.5 and 2.0 and Opera 9.2. Safari = not tested/may work.

Use a 1x1 pixel transparent '.png'.
<----- /final ------>

EXAMPLE:

This should be an example of the above transparent code.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc molestie. In vulputate lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut congue, ligula a condimentum varius, pede neque ornare magna, non sollicitudin sem sapien a elit. Vestibulum iaculis.

CSS: (actual css used for the example - w/o image url)
div.trans { opacity:1.0; }

div#ex1 {
font-family: Sans-Serif,MS Sans Serif,Arial;
color: #16A3C2;
font-size: 90%;
font-weight: bold;
background: url('http://...your-image-url') repeat;
border: 5px thick solid #CC6600;
padding: 30px 30px 30px 30px;
}

div#ex1b {
background: #FCE3B4;
opacity:0.6;
border: 10px thick solid #CC6600;
padding: 20px 20px 20px 20px;
}

div#ex1c {
font-family: Sans-Serif,MS Sans Serif,Arial;
color: #CC6600;
font-size: 130%;
font-weight: bolder;
padding: 10px 10px 10px 10px;
}

HTML: (actual html used for the example)
<.div class="trans" id="ex1"><.div id="ex1b"><.div id="ex1c">This should be an example of the above transparent code.
<.p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc molestie. In vulputate lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut congue, ligula a condimentum varius, pede neque ornare magna, non sollicitudin sem sapien a elit. Vestibulum iaculis.<./p><./div><./div><./div>

(Coder define: class name and id names.)

[REF: http://www.unintentionallyblank.co.uk/2007/05/07/cross-browser-background-transparency-with-css/]

snippet
css

<< code post | feed

Cross Browser CSS Feature Support Table

2008-04-14T15:40:00.017-05:00

skip to Table

Table: Cross Browser CSS Support
CSS FEATURE	IE6	IE7	Firefox	Safari
Attribute selectors	No	Yes	Yes	Yes
Child selector	No	Yes	Yes	Yes
:first-child pseudo-class	No	Yes	Yes	Yes
:first-line pseudo-element	Yes	Yes	Yes	Yes
:first-letter pseudo-element	Yes	Yes	Yes	Yes
Multi-column layout	No	No	Yes	Yes
Border Radius	No	No	Yes	Yes
:target	No	No	Yes	Yes

[REF: http://www.sitepoint.com/article/tomorrows-css-today]

css

<< code post | feed