Difference between revisions of "Style Making Resources"
From Dreamwidth Notes
(→Seamless background patterns: what seamless means + why these are useful) |
Foxfirefey (Talk | contribs) |
||
| (20 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
| − | + | = Learning = | |
| − | + | == CSS == | |
| − | + | * [http://www.w3schools.com/css/default.asp W3Schools CSS], [http://www.w3schools.com/css3/default.asp W3Schools CSS3] | |
| + | * [http://www.w3.org/Style/CSS/ W3.org CSS] | ||
| + | * [http://www.css3.info/ CSS3.info] | ||
| + | * [http://css3please.com/ CSS3 Please Rule Generator] | ||
| + | * [http://www.alistapart.com/topics/topic/css/ A List Apart CSS] | ||
| + | * [https://developer.mozilla.org/en/CSS_Reference Mozilla's CSS Reference] Although geared towards Firefox users, this explains how the property work, provides visual examples and a compatibility table to mention which browsers it works in. | ||
| − | == | + | === Indexes === |
| − | === Programs === | + | * [http://meiert.com/en/indices/css-properties/ CSS Properties Index] |
| + | * [http://www.quirksmode.org/compatibility.html Compatibility Tables] | ||
| + | |||
| + | === Cheatsheets === | ||
| + | |||
| + | * [http://www.smashingmagazine.com/2009/07/13/css-3-cheat-sheet-pdf/ Smashing Magazine CSS3 Cheat Sheet] | ||
| + | * [http://www.scriptiny.com/2008/04/css-shorthand-cheat-sheet/ CSS Shorthand Cheat Sheet] Although incomplete now it's very useful for basic selectors. | ||
| + | |||
| + | == HTML == | ||
| + | |||
| + | * [http://www.w3schools.com/html/DEFAULT.asp W3Schools HTML] | ||
| + | * [http://diveintohtml5.org/ Dive Into HTML5] | ||
| + | |||
| + | === Cheatsheets === | ||
| + | |||
| + | * [http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/ Smashing Magazine HTML5 Cheat Sheet] | ||
| + | * [http://woorkup.com/2009/12/16/html5-visual-cheat-sheet-reloaded/ Woorkup's HTML5 Tag Reference] Less complete but easier on the eyes. | ||
| + | |||
| + | = Materials = | ||
| + | |||
| + | == Programs == | ||
| + | |||
| + | === Graphics === | ||
* [http://inkscape.org/ Inkscape] -- Open source vector image program | * [http://inkscape.org/ Inkscape] -- Open source vector image program | ||
| Line 13: | Line 40: | ||
* [http://www.aviary.com/ Aviary] and [http://pixlr.com/ Pixlr] -- Web based image tools | * [http://www.aviary.com/ Aviary] and [http://pixlr.com/ Pixlr] -- Web based image tools | ||
| − | === | + | === Text Editors === |
| + | |||
| + | * [http://www.jedit.org/ jEdit] -- all OSes | ||
| + | * [http://www.barebones.com/products/textwrangler/ TextWrangler] -- OS X | ||
| + | * [http://notepad-plus-plus.org/ Notepad++] -- Windows | ||
| + | |||
| + | == Colors == | ||
* [http://www.colourlovers.com ColourLovers] -- There is even a [http://www.colourlovers.com/group/Dreamwidth Dreamwidth group] | * [http://www.colourlovers.com ColourLovers] -- There is even a [http://www.colourlovers.com/group/Dreamwidth Dreamwidth group] | ||
| + | * [http://www.design-seeds.com/ Design Seeds] | ||
* [http://kuler.adobe.com Kuler] | * [http://kuler.adobe.com Kuler] | ||
| + | * [http://colorschemedesigner.com/ Color Scheme Designer] | ||
| − | + | == Graphics == | |
| − | === | + | === Icons === |
| − | + | Icons can be used to replace action links, to provide visual clues and information, as decorations or to make wallpaper backgrounds. When they replace links or provide information it is important to associate alternative text to them so that screen readers or users who browse without images can use the page too. | |
| − | + | * [http://dryicons.com/free-icons Free Icons from DryIcons] | |
| + | * [http://www.famfamfam.com Famfamfam] | ||
| + | * [http://www.freeiconsweb.com/ Free Icons Web] | ||
| + | * [http://thenounproject.com/it/ The Noun Project] | ||
| + | * [http://p.yusukekamiyamane.com/ p.yusukekamiyamane's Icons Sets] | ||
| + | * [http://somerandomdude.com/projects/ SomeRandomDude's Icon Sets] | ||
| + | * [http://webtreats.mysitemyway.com/category/icons/ Webtreats Icons] | ||
| + | |||
| + | === Seamless background patterns === | ||
Seamless background patterns are patterns which can be repeated endlessly (or tiled) without elements being misaligned or lines being visible. That's why they can be used as backgrounds. They're also generally small, light images which take very little space on a server -- which is useful as image size is usually restricted on image hosts -- and are therefore much quicker to load than bigger images. | Seamless background patterns are patterns which can be repeated endlessly (or tiled) without elements being misaligned or lines being visible. That's why they can be used as backgrounds. They're also generally small, light images which take very little space on a server -- which is useful as image size is usually restricted on image hosts -- and are therefore much quicker to load than bigger images. | ||
| Line 48: | Line 91: | ||
* [http://webtreats.mysitemyway.com/category/photoshop-resources/patterns/ Webtreats Patterns] | * [http://webtreats.mysitemyway.com/category/photoshop-resources/patterns/ Webtreats Patterns] | ||
| − | === | + | === Vector Art === |
| − | + | Vector images can usually be used to provide decorations or to make background images. The difference between ordinary images and vector images is that vector images can be easily rescaled, recolorized, rotated or transformed without distortion or quality loss then converted to the usual .jpg, .png or .gif formats. | |
| − | + | ||
| − | + | * [http://www.allfreevectors.com/index.php All Free Vectors] | |
| + | * [http://www.freevectors.net/ FreeVectors.net] | ||
| + | * [http://www.openclipart.org/ OpenClipart Library] | ||
| + | * [http://qvectors.net/ QVectors Free Vector Graphics] | ||
| + | * [http://www.vecteezy.com/ Vecteezy] | ||
| + | * [http://vectorart.org/ VectorArt.org] | ||
| + | * [http://www.vectoropenstock.com/home-vectors Vector Open Stock] | ||
| + | [http://www.smashingmagazine.com/tag/icons Smashing Magazine] regularly provides or links to free icon sets. | ||
| + | |||
| + | == Fonts == | ||
| + | |||
| + | * [http://www.fontex.org/ Fontex] | ||
* [http://www.fontsquirrel.com/fontface/generator Font Squirrel Font Face Generator] | * [http://www.fontsquirrel.com/fontface/generator Font Squirrel Font Face Generator] | ||
| + | * [http://imjustcreative.com/category/free-fonts/ imjustcreative Free Font Archive] | ||
* [http://www.google.com/webfonts Google Web Fonts] | * [http://www.google.com/webfonts Google Web Fonts] | ||
* [http://www.theleagueofmoveabletype.com/ The League of Movable Type] | * [http://www.theleagueofmoveabletype.com/ The League of Movable Type] | ||
| − | * [http://openfontlibrary.org/ Open Font Library] -- | + | * [http://openfontlibrary.org/ Open Font Library] |
| − | * [http:// | + | |
| + | == Layouts == | ||
| + | |||
| + | * [http://www.csszengarden.com/ CSS Zen Garden] | ||
| + | * [http://www.oswd.org/ OSWD] | ||
| + | * [http://wordpress.org/extend/themes/ WordPress Themes] -- many released under the GPL could be converted into Dreamwidth themes | ||
| + | |||
| + | * [http://matthewjamestaylor.com/blog/ultimate-stacked-columns-pixels.htm Fluid full height column layouts] | ||
| + | |||
| + | = Testing and Checking = | ||
| + | |||
| + | * [http://browsershots.org/ Browsershots.org] -- helps you check and see what your layout looks on different browsers | ||
| + | |||
| + | == Validation == | ||
| + | |||
| + | * [http://validator.w3.org/ W3.org Validator] -- check the validity of your HTML | ||
| + | |||
| + | == Accessibility == | ||
| + | |||
| + | * [http://snook.ca/technical/colour_contrast/colour.html Colour Contrast Check] | ||
| + | * [http://www.vischeck.com/ Vischeck.com] Simulates how your style would look to an individual with color deficient vision. | ||
| + | * [http://webaim.org/techniques/fonts/ Webaim.org article on fonts] -- List of ideas to keep in mind with the goal of making your text as legible as possible. (Also, just kinda interesting about fonts.) | ||
| + | |||
| + | = Web Hosts = | ||
| + | |||
| + | If you don't have your own server you will need to upload your resources to a web host, as Dreamwidth doesn't support media hosting yet. | ||
| + | |||
| + | * [http://imgur.com/ Imgur] Supports .apng, .bmp, .gif, jpeg, .jpg, .pdf, .png, .tif, .tiff, .xcf. Size is limited to 1MB for non-animated files and 2MB for animated files. Files must be viewed at least once every six months to prevent automatic deletion. File names are converted to numbers and letters. Uploading and managing is very easy. | ||
[[Category: Styles]] | [[Category: Styles]] | ||
Latest revision as of 02:58, 14 June 2011
Learning
CSS
- W3Schools CSS, W3Schools CSS3
- W3.org CSS
- CSS3.info
- CSS3 Please Rule Generator
- A List Apart CSS
- Mozilla's CSS Reference Although geared towards Firefox users, this explains how the property work, provides visual examples and a compatibility table to mention which browsers it works in.
Indexes
Cheatsheets
- Smashing Magazine CSS3 Cheat Sheet
- CSS Shorthand Cheat Sheet Although incomplete now it's very useful for basic selectors.
HTML
Cheatsheets
- Smashing Magazine HTML5 Cheat Sheet
- Woorkup's HTML5 Tag Reference Less complete but easier on the eyes.
Materials
Programs
Graphics
- Inkscape -- Open source vector image program
- GIMP -- Open source photo/image editing
- Aviary and Pixlr -- Web based image tools
Text Editors
- jEdit -- all OSes
- TextWrangler -- OS X
- Notepad++ -- Windows
Colors
- ColourLovers -- There is even a Dreamwidth group
- Design Seeds
- Kuler
- Color Scheme Designer
Graphics
Icons
Icons can be used to replace action links, to provide visual clues and information, as decorations or to make wallpaper backgrounds. When they replace links or provide information it is important to associate alternative text to them so that screen readers or users who browse without images can use the page too.
- Free Icons from DryIcons
- Famfamfam
- Free Icons Web
- The Noun Project
- p.yusukekamiyamane's Icons Sets
- SomeRandomDude's Icon Sets
- Webtreats Icons
Seamless background patterns
Seamless background patterns are patterns which can be repeated endlessly (or tiled) without elements being misaligned or lines being visible. That's why they can be used as backgrounds. They're also generally small, light images which take very little space on a server -- which is useful as image size is usually restricted on image hosts -- and are therefore much quicker to load than bigger images.
- Ava7 Patterns
- Background Maker
- ColourLovers Patterns
- Dinpatterns
- Everyday Icons Patterns
- Fractured Sanity Patterns
- The Inspiration Gallery
- Milleseicentopercento Patterns
- Patterific
- Pattern Cooler
- Pattern8
- Patternhead
- Portfelia Patterns
- Kaliber10000 Pixel Patterns
- Shizoo Patterns
- Squidfingers
- Stripe Generator
- Tartan Maker
- Webtreats Patterns
Vector Art
Vector images can usually be used to provide decorations or to make background images. The difference between ordinary images and vector images is that vector images can be easily rescaled, recolorized, rotated or transformed without distortion or quality loss then converted to the usual .jpg, .png or .gif formats.
- All Free Vectors
- FreeVectors.net
- OpenClipart Library
- QVectors Free Vector Graphics
- Vecteezy
- VectorArt.org
- Vector Open Stock
Smashing Magazine regularly provides or links to free icon sets.
Fonts
- Fontex
- Font Squirrel Font Face Generator
- imjustcreative Free Font Archive
- Google Web Fonts
- The League of Movable Type
- Open Font Library
Layouts
- CSS Zen Garden
- OSWD
- WordPress Themes -- many released under the GPL could be converted into Dreamwidth themes
Testing and Checking
- Browsershots.org -- helps you check and see what your layout looks on different browsers
Validation
- W3.org Validator -- check the validity of your HTML
Accessibility
- Colour Contrast Check
- Vischeck.com Simulates how your style would look to an individual with color deficient vision.
- Webaim.org article on fonts -- List of ideas to keep in mind with the goal of making your text as legible as possible. (Also, just kinda interesting about fonts.)
Web Hosts
If you don't have your own server you will need to upload your resources to a web host, as Dreamwidth doesn't support media hosting yet.
- Imgur Supports .apng, .bmp, .gif, jpeg, .jpg, .pdf, .png, .tif, .tiff, .xcf. Size is limited to 1MB for non-animated files and 2MB for animated files. Files must be viewed at least once every six months to prevent automatic deletion. File names are converted to numbers and letters. Uploading and managing is very easy.
