Difference between revisions of "Style Making Resources"
Foxfirefey (Talk | contribs) |
Foxfirefey (Talk | contribs) |
||
| Line 2: | Line 2: | ||
== CSS == | == 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] | ||
| + | |||
| + | === Cheatsheets === | ||
| + | |||
| + | * [http://www.smashingmagazine.com/2009/07/13/css-3-cheat-sheet-pdf/ Smashing Magazine CSS3 Cheat Sheet] | ||
== HTML == | == 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] | ||
= Materials = | = Materials = | ||
| Line 12: | Line 29: | ||
* [http://www.gimp.org/ GIMP] -- Open source photo/image editing | * [http://www.gimp.org/ GIMP] -- Open source photo/image editing | ||
* [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 === | ||
== Colors == | == Colors == | ||
| Line 77: | Line 96: | ||
* [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] |
== Layouts == | == Layouts == | ||
Revision as of 07:31, 7 May 2011
Contents
Learning
CSS
Cheatsheets
HTML
Cheatsheets
Materials
Programs
- Inkscape -- Open source vector image program
- GIMP -- Open source photo/image editing
- Aviary and Pixlr -- Web based image tools
Text Editors
Colors
- ColourLovers -- There is even a Dreamwidth group
- Kuler
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
