Design & Coding Resources

DESIGN & CODING RESOURCES

helpful tutorials and more for people who wish to learn!

SKINNING INVISIONFREE

• Invisionsfree CSS Guide, A break down of the IF CSS
• Mer's Sidebars, Sidebars for your forum right and left aligned.
• CSS Cheatsheet, A detailed listing of what each piece of CSS does.

SKINNING ZETABOARDS

• Zetaboards CSS Guide, A break down of the ZB CSS
• Making a Zetaboards Theme, A guide on how to do so.

GENERAL HTML & CSS

• Advanced CSS Ornamentation - it's an archived article going into some advanced techniques that are really spiffy. It explains how you can append things before/after elements.
• CSS Cheat Sheet This cheat sheet is amazing, it has everything you could possibly imagine with CSS all listed in one place
• http://border-radius.com, Quick way to see rounded corners. Does not work in IE!
• CSS menu generator & Pure CSS Menus, Tool to make cool drop down navigations.
• CSS Transparency Settings for all Browsers, Explains the different ways to create a transparent element in the various browsers, how to interpret the numeric values (they differ depending on the code) and explains the different CSS properties.
• Vertical Centring with CSS, Explains five possible methods to center text with CSS. Offers an explanation, pros, and cons of each method, and guides you step-by-step to use the third method. Very helpful!
• The 6 Most Important CSS Techniques You Need To Know, An amazing checklist of things to remember when skinning! This page has six suggestions for coding, all of which are definitely worth a look.
• Selectutorial - CSS selectors, This site provides some great explanations on not only what a CSS selector is, but how to properly use one. The type selectors diagram is incredibly helpful, and the shorthand suggestions are all extremely useful. Very good for anyone coding a skin!
• W3Schools HTML Help, W3Schools explain HTML. A huge guide!
• W3Schools CSS Help, W3Schools explain CSS. A huge guide!
• CSS Compatibility and Internet Explorer, Not everyone uses firefox, chrome, opera, some people ACTUALLY use IE, and it can be tricky (that's putting it MILDLY) to figure out what CSS codes will work with explorer.
• CSS - Contents and compatiblity, Lists the CSS codes and what browsers they're compatible with.
• CSS Properties List, A big list of every property you can use in CSS
• Rollover Code Generator, A free rollover code generator for easy rollover images.
• Image Map Creator, Upload an image and set the co-ordinates for the links. Generates the code for you.
• CSS3 Please! - a cross-browser CSS3 rule generator. It easily generates cross-browser CSS rules for many of those nifty CSS transitions many of us love eg transform, text shadow, gradient. Also, it will generate a preview as you edit the presets. I adore it. The creator is still adding transitions; the changelog can be viewed in the footer region.

COLORS, PALETTES, & PATTERNS

• Colour Lovers, A site where you can create patterns & palettes for design.
• Color tools for Designers
• Color Wizard
• Colorzilla Firefox Add-on
• Color Picker

BROWSER ADD-ONS:FIREFOX

• Web Developer Firefox Add-on
• MeasureIt allows pixel measurements within a Firefox window.

BROWSER ADD-ONS:CHROME

• Web Developer, Tools to edit CSS and resize your window and much more
• CSS Viewer, For Chrome: Click the button and mouse over elements on a page, and it will tell you the name of it and lots of information about that element, like size, colors, fonts, and so on.
• CSS Reloader, Chrome plugin that allows you to reload only the CSS of a site
• IE Tab, Display a tab as if it was open in IE, but in Chrome. Good for testing sites in IE
• Color Pick, Chrome plugin to get colors from a website

FONTS

• Dafont
• Common Fonts, A big table of common fonts on Windows and Mac so you can set alternate fonts in your CSS

IMAGE STOCK

• DeviantArt Stock
• stock.xchng requires registration, but is a really awesome stock image place. I've been using for years. :D
• imageafter.com is a smaller stock site. I just discovered this one, but I've found a few gems already.
• burningwell.org is neat and provides public domain images.
• morguefile.com has some pretty good images. I haven't found a ton of useful ones on here, but your mileage may vary, of course.

ADD TO LIST

Code: Select

[URL=linktosite]Title of Site[/URL]: Explain how this is helpful.

Ooo, I've got a few!

Browser plugins:

Web Developer, Tools to edit CSS and resize your window and much more

CSS Viewer, For Chrome: Click the button and mouse over elements on a page, and it will tell you the name of it and lots of information about that element, like size, colors, fonts, and so on.

CSS Reloader, Chrome plugin that allows you to reload only the CSS of a site

IE Tab, Display a tab as if it was open in IE, but in Chrome. Good for testing sites in IE

CSS:

CSS Properties List, A big list of every property you can use in CSS

Colors:

Color Pick, Chrome plugin to get colors from a website

Fonts:

Common Fonts, A big table of common fonts on Windows and Mac so you can set alternate fonts in your CSS

So you can easily add them to the list:

Code: Select

Browser plugins:

[URL=https://chrome.google.com/extensions/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=en#]Web Developer[/URL], [i]Tools to edit CSS and resize your window and much more[/i]

[URL=https://chrome.google.com/extensions/detail/ggfgijbpiheegefliciemofobhmofgce?hl=en]CSS Viewer[/URL], [i]For Chrome: Click the button and mouse over elements on a page, and it will tell you the name of it and lots of information about that element, like size, colors, fonts, and so on.[/i]

[URL=https://chrome.google.com/extensions/detail/dnfpcpfijpdhabaoieccoclghgplmpbd]CSS Reloader[/URL], [i]Chrome plugin that allows you to reload only the CSS of a site[/i]

[URL=https://chrome.google.com/extensions/detail/hehijbfgiekmjfkfjpbkbammjbdenadd?hl=en-US]IE Tab[/URL], [i]Display a tab as if it was open in IE, but in Chrome. Good for testing sites in IE[/i]

CSS:

[URL=http://www.pageresource.com/dhtml/cssprops.htm]CSS Properties List[/URL], [i]A big list of every property you can use in CSS[/i]

Colors:

[URL=https://chrome.google.com/extensions/detail/ohcpnigalekghcmgcdcenkpelffpdolg?hl=en#]Color Pick[/URL], [i]Chrome plugin to get colors from a website[/i]

Fonts:

[URL=http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html]Common Fonts[/URL], [i]A big table of common fonts on Windows and Mac so you can set alternate fonts in your CSS[/i]

Updated, thanks for sharing! >=D I know quite a few of us use Chrome so those pluggins in particular are super cool. I also really like the common fonts site, very solid.

A few possible suggestions? I'm not sure if most of the stock image sites are large enough -- stock.xchng is huge, but the others are smaller. I'm sure there are some useful or nice images on 'em, though. :3

Firefox Extensions:
- MeasureIt allows pixel measurements within a Firefox window.

Stock images:
- stock.xchng requires registration, but is a really awesome stock image place. I've been using for years. :D
- imageafter.com is a smaller stock site. I just discovered this one, but I've found a few gems already.
- burningwell.org is neat and provides public domain images.
- morguefile.com has some pretty good images. I haven't found a ton of useful ones on here, but your mileage may vary, of course.

Oh, I've got a really great one for the advanced coders!

Advanced CSS Ornamentation - it's an archived article going into some advanced techniques that are really spiffy. It explains how you can append things before/after elements (like if you wanted to add a period to the end of usernames without people registering like that, or add the same image to the end of your category title, etc.), and a multitude of other things you don't see used very often. This 3-page article is a must-have ^_^

Actually all the articles in this archive are really informative for anyone looking to do some serious coding.

Updated, awesome resources thanks for contributing! >=D

CSS3 Please! - a cross-browser CSS3 rule generator. It easily generates cross-browser CSS rules for many of those nifty CSS transitions many of us love eg transform, text shadow, gradient. Also, it will generate a preview as you edit the presets. I adore it. The creator is still adding transitions; the changelog can be viewed in the footer region.

Someone might want to update the third link on that list. The CSS cheatsheet. The link doesn't work.